找到
12
篇与
Typecho教程
相关的结果
- 第 3 页
-
【Typecho】的Joe主题新增文章阅读时长统计 成品演示 效果图图片 教程开始 第一步 修改 functions.php 文件，底部增加，文件路径： /usr/themes/Joe 注意:代码一定要在</>之间,否则会报错 // 文章阅读时长设置 $onlineTime = new Typecho_Widget_Helper_Form_Element_Select( 'onlineTime', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'on', '是否启用文章阅读时长统计', '介绍：开启后，文章底部展示文章字数，预计阅读时长和已阅读时长' ); $onlineTime->setAttribute('class', 'joe_content joe_post'); //如果设置无法展示，请将joe_custom替换为joe_other $form->addInput($onlineTime->multiMode());截图说明：图片 第二步 2.修改 article.php 文件，文件路径： usr/themes/Joe/module/single <div class="contain" style="margin-bottom: 10px; <?php if(Helper::options()->onlineTime !== 'on') echo 'display:none;' ?>"> <blockquote id="onlineTime">本文共 <?php art_count($this->cid); ?> 个字数,平均阅读时长 ≈ <?php echo art_time($this->cid); ?>分钟</blockquote> </div>截图说明：图片 第三步 3.修改 article.php 文件，文件路径： usr/themes/Joe/module/single 在最底部添加以下代码: <?php //文章阅读时间统计 function art_time ($cid){ $db=Typecho_Db::get (); $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1)); $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']); $text_word = mb_strlen($text,'utf-8'); echo ceil($text_word / 400); } //文章字数统计 function art_count ($cid){ $db=Typecho_Db::get (); $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1)); $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']); echo mb_strlen($text,'UTF-8'); } ?> <script language="javascript"> var second=0; var minute=0; var hour=0; window.setTimeout("interval();",1000); function interval() { second++; if(second==60) { second=0;minute+=1; } if(minute==60) { minute=0;hour+=1; } var onlineTime = "您已阅读：" + hour + "时" + minute + "分" + second + "秒。"; var joe_message_content = "本文共 " + <?php art_count($this->cid); ?> + "个字数，平均阅读时长 ≈ " + <?php echo art_time($this->cid); ?> + "分钟，"; $('#onlineTime').text(joe_message_content + onlineTime); window.setTimeout("interval();", 1000); } </script>截图说明：图片
-
Joe主题文章添加文章目录树 前言 修改 post.php 加载js和css <!--加在头部--> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/jfloor.min.css'); ?>"> <!-- body标签 最下面 --> <?php if ($this->options->jfloor === 'on') : ?> <!-- 目录树 --> <script src="<?php $this->options->themeUrl('assets/js/jfloor.min.js'); ?>"></script> <?php endif; ?> 加载功能代码,大概41行 <div class="joe_container j-post"> <section class="j-adaption" style="height: auto !important;"> <?php if ($this->options->jfloor === 'on') : ?> <?php GetCatalog(); ?> <?php endif; ?> ... </div>functions.php 后台功能开关 //开启文章目录树显示 $jfloor = new Typecho_Widget_Helper_Form_Element_Select( 'jfloor', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'off', '是否启用文章目录树显示', '介绍：开启之后 在文章最左侧显示目录树(手机端不显示)' ); $jfloor->setAttribute('class', 'joe_content joe_post'); $form->addInput($jfloor->multiMode());core/function.php 目录树函数,放在文件最后 /*生成文章目录树*/ function CreateCatalog($obj) { global $catalog; global $catalog_count; $catalog = array(); $catalog_count = 0; $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function ($obj) { global $catalog; global $catalog_count; $catalog_count++; $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count); return '<h' . $obj[1] . $obj[2] . ' id="cl-' . $catalog_count . '"><span>' . $obj[3] . '</span></h' . $obj[1] . '>'; }, $obj); return $obj; } /*获取文章目录树*/ function GetCatalog() { global $catalog; $index = ''; if ($catalog) { $index = '<ul>'; $prev_depth = ''; $to_depth = 0; foreach ($catalog as $catalog_item) { $catalog_depth = $catalog_item['depth']; if ($prev_depth) { if ($catalog_depth == $prev_depth) { $index .= '</li>'; } elseif ($catalog_depth > $prev_depth) { $to_depth++; $index .= '<ul>'; } else { $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth; if ($to_depth2) { for ($i = 0; $i < $to_depth2; $i++) { $index .= '</li></ul>'; $to_depth--; } } $index .= '</li>'; } } $index .= '<li><a href="#cl-' . $catalog_item['count'] . '" data-href="#cl-' . $catalog_item['count'] . '">' . $catalog_item['text'] . '</a>'; $prev_depth = $catalog_item['depth']; } for ($i = 0; $i <= $to_depth; $i++) { $index .= '</li></ul>'; } $index = '<div class="j-floor s-j-floor"><div class="contain" id="jFloor" style="top: 126px;"><div class="title">文章目录</div>' . $index . '<svg class="toc-marker" xmlns="http://www.w3.org/2000/svg"><path stroke="var(--theme)" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000" stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" /></svg></div></div>'; } echo $index; }core/core.php 文章页面相应位置(初始化函数themeInit)加载,大约第83行 code here... /* 文章目录树 */ if ($self->is('single')) { $self->content = CreateCatalog($self->content); }需要的资源 文件 jfloor.min.css //样式 jfloor.min.js //功能实现 下载 JOE文章目录树 下载地址：https://pan.baidu.com/s/1o83oneH3WumzrmtUVdQM7w#list/path=%2F 提取码：w4ut
