搜索到
93
篇与
的结果
-
Typecho的Joe主题实现侧边栏互动读者-展示活跃用户 之前的魔改版就有这个功能，虽然没几个人留言，但不是要加上这个功能。0.成品图1.修改aside.php文件，新增如下代码，文件路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="代码"}<!--互动读者--> <?php if ($this->options->JactiveUsers === 'on') : ?> <section class="aside aside-hunter-authors"> <div class="joe_aside__item-title"> <svg t="1622460301541" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="200" height="200"><path d="M896 128H128a32 32 0 0 0-32 32v576a32 32 0 0 0 32 32h288v-64H160V192h704v512h-256c-8.832 0-16.832 3.584-22.656 9.376l-159.968 160 45.248 45.248L621.248 768H896a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32" fill="#181818" p-id="2713"></path><path d="M560 448a48 48 0 1 0-95.968-0.032A48 48 0 0 0 560 448M240 448a48 48 0 1 0 95.968 0.032A48 48 0 0 0 240 448M784 448a48 48 0 1 0-95.968-0.032A48 48 0 0 0 784 448" fill="#181818" p-id="2714"></path></svg> <span class="text">互动读者</span> <span class="line"></span> </div> <div class="hunter-cont"> <ul class="hunter-authors"> <?php $period = time() - 2592000; // 单位: 秒, 时间范围: 30天 $counts = Typecho_Db::get()->fetchAll(Typecho_Db::get() ->select('COUNT(author) AS cnt', 'author', 'max(url) url', 'max(authorId) authorId', 'max(mail) mail') ->from('table.comments') ->where('created > ?', $period) ->where('status = ?', 'approved') ->where('type = ?', 'comment') ->group('author') ->order('cnt', Typecho_Db::SORT_DESC) ->limit('4') ); foreach ($counts as $count) { $c_url = '<li><div class="item"><div class="hunter-avatar"><div class="vatar"><img src="' . _getAvatarUrlByMail($count['mail']) . '"></div></div><div class="item-main"><div><a target="_blank" href='. $count['url'] . '>' . $count['author'] . '</a>'; echo '' . $c_url . ''; autvip($count['mail']); $allpostnum = allpostnum($count['authorId']); echo ' <h4>评论 ' . $count['cnt'] . ' 次 | <i>'.$allpostnum.'</i>'; echo ' </h4></div></div></li>'; } ?> </ul> </div> </section> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}2.修改core.php文件，底部新增，文件路径：usr/themes/Joe-master/core{tabs}{tabs-pane label="代码"}/** * 显示用户等级，按邮箱 */ function autvip($i){ $db=Typecho_Db::get(); $mail=$db->fetchAll($db->select(array('COUNT(cid)'=>'rbq'))->from('table.comments')->where('mail = ?', $i)/**->where('authorId = ?','0')**/); foreach ($mail as $sl){ $rbq=$sl['rbq'];} if($rbq<1){ echo '<span class="autlv aut-0">Lv.0</span>'; }elseif ($rbq<10 && $rbq>0) { echo '<span class="autlv aut-1">Lv.1</span>'; }elseif ($rbq<20 && $rbq>=10) { echo '<span class="autlv aut-2">Lv.2</span>'; }elseif ($rbq<40 && $rbq>=20) { echo '<span class="autlv aut-3">Lv.3</span>'; }elseif ($rbq<80 && $rbq>=40) { echo '<span class="autlv aut-4">Lv.4</span>'; }elseif ($rbq<100 && $rbq>=80) { echo '<span class="autlv aut-5">Lv.5</span>'; }elseif ($rbq>=100) { echo '<span class="autlv aut-6">Lv.6</span>'; } } /** *输出作者文章总数，可以指定 */ function allpostnum($id){ $db = Typecho_Db::get(); $postnum=$db->fetchRow($db->select(array('COUNT(authorId)'=>'allpostnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post')); $postnum = $postnum['allpostnum']; if($postnum=='0') { return '暂无文章'; } else{ return '文章 '.$postnum.' 篇'; } } /* 通过邮箱生成头像地址 */ function _getAvatarUrlByMail($mail) { $gravatarsUrl = Helper::options()->JCustomAvatarSource ? Helper::options()->JCustomAvatarSource : 'https://gravatar.ihuan.me/avatar/'; $mailLower = strtolower($mail); $md5MailLower = md5($mailLower); $qqMail = str_replace('@qq.com', '', $mailLower); if (strstr($mailLower, "qq.com") && is_numeric($qqMail) && strlen($qqMail) < 11 && strlen($qqMail) > 4) { return 'https://thirdqq.qlogo.cn/g?b=qq&nk=' . $qqMail . '&s=100'; } else { return $gravatarsUrl . $md5MailLower . '?d=mm'; } }{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}3.修改include.php文件，底部新增，代码路径：usr/themes/Joe-master/public{tabs}{tabs-pane label="代码"}<?php if ($this->options->JactiveUsers === 'on') : ?> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.css'); ?>"> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}4.新增custom.css文件，文件路径：usr/themes/Joe-master/assets/css{tabs}{tabs-pane label="代码"}.autlv { font-size: 10px; color: #fff; display: inline-block; vertical-align: text-top; font-weight: normal; border-radius: 2px; line-height: 1.4; padding: 0 4px; margin-left: 5px; letter-spacing: 0px; } .aut-0 { background: #d1d5dc; } .aut-1 { background: #448EF6; } .aut-2 { background: #f6b044; } .aut-3 { background: #c444f6; } .aut-4 { background: #f69644; } .aut-5 { background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%); } .aut-6 { background: #f64444; } .aside-hunter-authors { background: var(--background); } .aside-hunter-authors .vs { border-radius: 100%; } .aside-hunter-authors ul { padding: 14px; list-style: none; line-height: 2.5; } .aside-hunter-authors .item { border-bottom: 1px dashed #eee; margin-bottom: 0px; position: relative; padding-bottom: 4px; } .aside-hunter-authors .item .hunter-avatar { float: left; line-height: 55px; } .aside-hunter-authors .item .hunter-avatar .vatar { position: relative; } .aside-hunter-authors .item .hunter-avatar .vatar img { width: 45px; border-radius: 100%; } .aside-hunter-authors .item .hunter-avatar .vatar .va_v_honor { position: absolute; bottom: 3px; right: 0px; width: 18px; height: 18px; } .aside-hunter-authors .item .item-main { min-height: 60px; margin-left: 60px; color: #393939; } .aside-hunter-authors .item .item-main h4 { font-size: 12px; line-height: 1; margin-bottom: 7px; font-weight: normal; color: #999; } .aside-hunter-authors .item .item-main h4 i { font-style: normal; color: #aaa; margin: 0 5px; }{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs}5.修改functions.php文件，底部新增，文件路径：usr/themes/Joe-master{tabs}{tabs-pane label="代码"}// 互动读者 $JactiveUsers = new Typecho_Widget_Helper_Form_Element_Select( 'JactiveUsers', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启互动读者', '介绍：显示评论相关用户' ); $JactiveUsers->setAttribute('class', 'joe_content joe_custom'); // 如果后台无法展示该设置，将joe_custom修改为joe_other $form->addInput($JactiveUsers);{/tabs-pane}{tabs-pane label="代码位置图片"}{/tabs-pane}{/tabs} -
Typecho完美实现回复可见功能 步骤一就是《typecho非插件实现回复可见功能》里面的内容将post.php中的<?php $this->content(); ?>换成<?php $db = Typecho_Db::get(); $sql= $db->select()->from('table.comments') ->where('cid = ?',$this->cid) ->where('mail = ?', $this->remember('mail',true)) ->where('status = ?', 'approved') //只有通过审核的评论才能看回复可见内容 ->limit(1); $result= $db->fetchAll($sql); if($this->user->hasLogin() || $result) { $content= preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">$1</div>',$this->content); } else{ $content= preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">此处内容需要评论回复后方可阅读。</div>',$this->content); } echo $content ?>步骤二解决缩略内容和feed暴露问题。在functions.php中加入如下代码即可Typecho_Plugin::factory('Widget_Abstract_Contents')->excerptEx = array('myyodux','one'); Typecho_Plugin::factory('Widget_Abstract_Contents')->contentEx = array('myyodux','one'); class myyodux { public static function one($con,$obj,$text) { $text= empty($text)?$con:$text; if(!$obj->is('single')){ $text= preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'',$text); } return $text; } }就是用插件接口，在缩略内容输出之前，隐藏掉或者替换掉回复可见内容，同时使用if判断，来针对非single页面进行隐藏。步骤三使用方法在写文章需要隐藏部分内容时用以下写法(去掉@)[@hide]要隐藏的内容[/hide]css参考样式.reply2view { background:#f8f8f8; padding:10px 10px 10px 40px; position:relative }心里话在写yodu模板的时候，因为网友需要，我就找了教程把回复可见功能加上了，当时也是知道这个东西的bug，但是自己不会修，最近写了个typecho的搜索插件，看了一些typecho的插件接口和源码，发现用插件接口很好的就能解决了，于是乎水文一下，希望能帮助到一些人。
-
typecho非插件实现回复可见功能 typecho非插件实现回复可见功能步骤一将post.php中的<?php $this->content(); ?>换成<?php $db = Typecho_Db::get(); $sql = $db->select()->from('table.comments') ->where('cid = ?',$this->cid) ->where('mail = ?', $this->remember('mail',true)) ->where('status = ?', 'approved') //只有通过审核的评论才能看回复可见内容 ->limit(1); $result = $db->fetchAll($sql); if($this->user->hasLogin() || $result) { $content = preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">$1</div>',$this->content); } else{ $content = preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">此处内容需要评论回复后方可阅读。</div>',$this->content); } echo $content ?>步骤二解决缩略内容和feed暴露问题。在functions.php中加入如下代码即可Typecho_Plugin::factory('Widget_Abstract_Contents')->excerptEx = array('myyodux','one'); Typecho_Plugin::factory('Widget_Abstract_Contents')->contentEx = array('myyodux','one'); class myyodux { public static function one($con,$obj,$text) { $text = empty($text)?$con:$text; if(!$obj->is('single')){ $text = preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'',$text); } return $text; } }就是用插件接口，在缩略内容输出之前，隐藏掉或者替换掉回复可见内容，同时使用if判断，来针对非single页面进行隐藏。步骤三使用方法在写文章需要隐藏部分内容时用以下写法(去掉@)[@hide]要隐藏的内容[/hide]css参考样式.reply2view { background:#f8f8f8; padding:10px 10px 10px 40px; position:relative }心里话在写yodu模板的时候，因为网友需要，我就找了教程把回复可见功能加上了，当时也是知道这个东西的bug，但是自己不会修，最近写了个typecho的搜索插件，看了一些typecho的插件接口和源码，发现用插件接口很好的就能解决了，于是乎水文一下，希望能帮助到一些人。转载自泽泽社长：https://zezeshe.com/
-
typecho 实现评论Cookie点赞功能 搞了一个动态发布页面，之前已经有了回复功能，总觉得还差点什么，折腾了好长时间，终于把遗缺的点赞功能加上了。先看效果https://xwsir.cn/talk.html后端处理1、 在核心文件 core.php 的初始化函数 function themeInit($self) 下添加if ($self->request->isPost() && $self->request->is('action=support')) { $res = _addSupport($self->request->get('coid')); $json = [ 'success' => $res ? true : false, 'count' => $res ]; ob_clean(); echo json_encode($json); exit(); }2、 在公用函数 function.php 中末尾地方添加function _getSupport($coid) { $db = Typecho_Db::get(); $prefix = $db->getPrefix(); if (!array_key_exists('support', $db->fetchRow($db->select()->from('table.comments')))) { $db->query('ALTER TABLE `' . $prefix . 'comments` ADD `support` INT(10) DEFAULT 0;'); return [ 'icon' => 'icon-unlike', 'count' => 0, 'text' => '点赞' ]; } $row = $db->fetchRow($db->select('support')->from('table.comments')->where('coid = ?', $coid)); $support = Typecho_Cookie::get('extend_comments_support'); if (empty($support)) { $support = array(); } else { $support = explode(',', $support); } if (!in_array($coid, $support)) { return [ 'icon' => 'icon-unlike', 'count' => $row['support'], 'text' => '点赞' ]; } else { return [ 'icon' => 'icon-like', 'count' => $row['support'], 'text' => '已赞' ]; } } function _addSupport($coid) { $db = Typecho_Db::get(); $row = $db->fetchRow($db->select('support')->from('table.comments')->where('coid = ?', $coid)); $support = Typecho_Cookie::get('extend_comments_support'); if (empty($support)) { $support = array(); } else { $support = explode(',', $support); } if (!in_array($coid, $support)) { $db->query($db->update('table.comments')->rows(array('support' => (int)$row['support'] + 1))->where('coid = ?', $coid)); array_push($support, $coid); $support = implode(',', $support); Typecho_Cookie::set('extend_comments_support', $support); return $row['support'] + 1; } else { return false; } }前端处理----php1、 在需要显示的页面中添加<div class="item"> <?php $suport = _getSupport($comments->coid) ?> <i class="iconfont <?php echo $suport['icon'] ?>"> <a class="support" data-coid="<?php echo $comments->coid ?>" href="javascript:void (0)"> <?php echo '(' . $suport['count'] . ')' . $suport['text'] ?> </a> </i> </div>2、 在 js 处理文件中添加$('.support').on('click', function () { $.ajax({ url: `/?action=support`, type: 'POST', data: { coid: $(this).data('coid') }, dataType: 'json', success: res => { if (res.success) { Qmsg.success('谢谢点赞~'); $(this).parent().removeClass('icon-unlike').addClass('icon-like'); $(this).text('(' + res.count + ')' + '已赞'); } else { Qmsg.warning('您已赞过~'); } } }); });3、 在 css 样式文件中添加.item { .support { font-size: 14px; color: var(--minor); &:hover { color: var(--theme); } } .icon-like { &:before { color: var(--theme); } } }4、 引入图标库文件，这里用到是阿里巴巴图标库<link rel="stylesheet" href="//at.alicdn.com/t/font_2524811_dm4ygqk8eqo.css">
-
为Typecho添加webp解析 Typecho 原生不支持解析 Webp 图片，在附件插入 webp 文件会被当做文件解析，因此需要魔改 typecho。废话不多说，上教程。在 var/Widget/Abstract/Contents.php 中的 686 行左右：将这行代码$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp'));替换为$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp'));再到 var/Typecho/Common.php 的第 1193 行左右添加如下代码'webp' => 'image/webp',最后到 Typecho 后台 -> 设置 -> 基本 -> 允许上传的文件类型 -> 其他格式 -> 添加 webp 即可完成解析。
-
Typecho 主题开发 - 点赞功能 Typecho 默认是没有提供点赞相关的 API 的，点赞功能只能自己开发，点赞也需要涉及到数据库操作。这里就以 我的博客主题 点赞功能为例，简单写一下点赞功能的开发。编写函数Typecho 提供了一个 functions.php，可以用来定义函数，数据库相关的操作就放在 functions.php 中。下面编写两个函数，agreeNum 函数用来获取点赞数量，agree 函数用来点赞。agreeNum 函数：function agreeNum($cid) { $db = Typecho_Db::get(); $prefix = $db->getPrefix(); // 判断点赞数量字段是否存在 if (!array_key_exists('agree', $db->fetchRow($db->select()->from('table.contents')))) { // 在文章表中创建一个字段用来存储点赞数量 $db->query('ALTER TABLE `' . $prefix . 'contents` ADD `agree` INT(10) NOT NULL DEFAULT 0;'); } // 查询出点赞数量 $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid)); // 获取记录点赞的 Cookie $AgreeRecording = Typecho_Cookie::get('typechoAgreeRecording'); // 判断记录点赞的 Cookie 是否存在 if (empty($AgreeRecording)) { // 如果不存在就写入 Cookie Typecho_Cookie::set('typechoAgreeRecording', json_encode(array(0))); } // 返回 return array( // 点赞数量 'agree' => $agree['agree'], // 文章是否点赞过 'recording' => in_array($cid, json_decode(Typecho_Cookie::get('typechoAgreeRecording')))?true:false ); }上面的函数很简单，下面是说明：判断存储点赞数量的字段是否存在。如果点赞数的字段不存在就创建。查询出点赞数量。获取点赞记录的 Cookie。判断文章是否点赞过。返回点赞数量和点赞记录。上面的 agreeNum 函数调用的时候需要传入一个 cid，cid 就是 Typecho 的文章 ID。agree 函数：function agree($cid) { $db = Typecho_Db::get(); // 根据文章的 `cid` 查询出点赞数量 $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid)); // 获取点赞记录的 Cookie $agreeRecording = Typecho_Cookie::get('typechoAgreeRecording'); // 判断 Cookie 是否存在 if (empty($agreeRecording)) { // 如果 cookie 不存在就创建 cookie Typecho_Cookie::set('typechoAgreeRecording', json_encode(array($cid))); }else { // 把 Cookie 的 JSON 字符串转换为 PHP 对象 $agreeRecording = json_decode($agreeRecording); // 判断文章是否点赞过 if (in_array($cid, $agreeRecording)) { // 如果当前文章的 cid 在 cookie 中就返回文章的赞数，不再往下执行 return $agree['agree']; } // 添加点赞文章的 cid array_push($agreeRecording, $cid); // 保存 Cookie Typecho_Cookie::set('typechoAgreeRecording', json_encode($agreeRecording)); } // 更新点赞字段，让点赞字段 +1 $db->query($db->update('table.contents')->rows(array('agree' => (int)$agree['agree'] + 1))->where('cid = ?', $cid)); // 查询出点赞数量 $agree = $db->fetchRow($db->select('table.contents.agree')->from('table.contents')->where('cid = ?', $cid)); // 返回点赞数量 return $agree['agree']; }上面的函数也很简单，下面是说明：获取点赞记录的 Cookie。如果 Cookie 不存在就创建一个。判断文章是否点赞过。如果文章点赞过就不再往下执行。把文章的 cid 添加到点赞记录的 Cookie 中。更新点赞字段。查询出点赞数量。返回点赞数量。点赞记录的 Cookie 是一个 JSON 字符串，需要读取或更改的时候就需要转换为 PHP 对象，更改完成后需要转换为 JSON 字符串写入 Cookie。点赞记录的 Cookie 中保存着文章的 cid，每次点赞 文章的 cid 就会被加到 Cookie 中。如果要判断文章是否点赞过就可以判断文章的 cid 是否存在。文章页Typecho 用来输出文章的文件是 post.php，处理点赞和展示点赞数量就需要在这个文件中编写。下面是处理点赞的部分：// 判断是否是点赞的 POST 请求 if (isset($_POST['agree'])) { // 判断 POST 请求中的 cid 是否是本篇文章的 cid if ($_POST['agree'] == $this->cid) { // 调用点赞函数，传入文章的 cid，然后通过 exit 输出点赞数量 exit(agree($this->cid)); } // 如果点赞的文章 cid 不是本篇文章的 cid 就输出 error 不再往下执行 exit('error'); }上面的点赞处理需要放到 post.php 的顶部，也就是放到 HTML 代码的前面。这里如果判断是点赞请求就只会处理点赞，不会往下执行。我的点赞数量是显示在点赞按钮中的，下面是显示输出点赞数量和点赞按钮。获取点赞数量：<?php $agree = $this->hidden?array('agree' => 0, 'recording' => true):agreeNum($this->cid); ?> 上面首先判断文章是否加密，如果加密就把点赞数设置为 0，然后禁止点赞，否则就调用函数获取点赞数量。点赞按钮：<button <?php echo $agree['recording']?'disabled':''; ?> type="button" id="agree" data-cid="<?php echo $this->cid; ?>" data-url="<?php $this->permalink(); ?>"> <span>赞</span> <span class="agree-num"><?php echo $agree['agree']; ?></span> </button>注意文章按钮有两个自定义属性，data-cid 存储文章的 cid，JS 发送 AJAX 请求的时候会用到，data-url 文章的 URL，发送 AJAX 请求的 URL。上面如果文章被点赞过 PHP 就会输出 disabled 来禁用按钮。JavaScript 点赞我这里用到了 jQuery，下面是点赞代码：// 点赞按钮点击 $('#agree-btn').on('click', function () { $('#agree-btn').get(0).disabled = true; // 禁用点赞按钮 // 发送 AJAX 请求 $.ajax({ // 请求方式 post type: 'post', // url 获取点赞按钮的自定义 url 属性 url: $('#agree-btn').attr('data-url'), // 发送的数据 cid，直接获取点赞按钮的 cid 属性 data: 'agree=' + $('#agree-btn').attr('data-cid'), async: true, timeout: 30000, cache: false, // 请求成功的函数 success: function (data) { var re = /\d/; // 匹配数字的正则表达式 // 匹配数字 if (re.test(data)) { // 把点赞按钮中的点赞数量设置为传回的点赞数量 $('#agree-btn .agree-num').html(data); } }, error: function () { // 如果请求出错就恢复点赞按钮 $('#agree-btn').get(0).disabled = false; }, }); });点赞后被点赞的文章的点赞按钮会被禁用，只有点赞记录的 Cookie 到期或清除后才能再次点赞。以上就是 Typecho 点赞功能的代码和详细说明，上面的函数和代码放到其它主题中也能使用，JS 部分需要依赖 jQuery。
-
Typecho博客Joe主题实现打赏设置 其实这个主要是与Joe主题完美契合，之前有文章也写了两种设置方法。0.成品图展示1.新增一个php文件，用于以后新增自定义设置，文件名：custom.php；文件路径：usr/themes/Joe-master/public代码如下<?php // 收款设置 $ZNPaySet = new Typecho_Widget_Helper_Form_Element_Select( 'ZNPaySet', array( 'on' => '开启（默认）', 'off' => '关闭', ), 'on', '是否启用执念打赏功能', '介绍：开启后，文章底部展示打赏功能 <br> 详情可查看 <a href="https://zhinianblog.com/archives/892/">https://zhinianblog.com/archives/892/</a> ' ); $ZNPaySet->setAttribute('class', 'joe_content joe_pay'); $form->addInput($ZNPaySet->multiMode()); $ZNAlipay = new Typecho_Widget_Helper_Form_Element_Text( 'ZNAlipay', NULL, NULL, '支付宝收款码', '介绍：填写此处，打赏界面展示支付宝收款码，图片地址 <br />' ); $ZNAlipay->setAttribute('class', 'joe_content joe_pay'); $form->addInput($ZNAlipay->multiMode()); $ZNWeChat = new Typecho_Widget_Helper_Form_Element_Text( 'ZNWeChat', NULL, NULL, '微信收款码', '介绍：填写此处，微信界面展示微信收款码，图片地址 <br />' ); $ZNWeChat->setAttribute('class', 'joe_content joe_pay'); $form->addInput($ZNWeChat->multiMode()); $ZNQqPay = new Typecho_Widget_Helper_Form_Element_Text( 'ZNQqPay', NULL, NULL, 'QQ收款码', '介绍：填写此处，QQ界面展示QQ收款码，图片地址 <br />' ); $ZNQqPay->setAttribute('class', 'joe_content joe_pay'); $form->addInput($ZNQqPay->multiMode()); ?>2.修改handle.php文件，底部新增代码，放在最后一行上面，文件路径：usr/themes/Joe-master/public代码如下<style> /*弹出*/ .footer_flex { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px} .footer_flex:hover { background-color: #409eff; } /*top*/ .footer_flex:hover .flex-footer { display: block; } .footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px #409eff; border-radius: 8px; width: 156px; height: 166px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 15px; background: #fff; display: none; } .flex-footer input{vertical-align:middle; margin-bottom:3px; *margin-bottom:3px;} </style> <script language="javascript" type="text/javascript"> function zfb(){ var obj=document.getElementById("ewm"); obj.src=`<?php $this->options->ZNAlipay() ?>`; }; function wx(){ var obj=document.getElementById("ewm"); obj.src=`<?php $this->options->ZNWeChat() ?>`; }; function qq(){ var obj=document.getElementById("ewm"); obj.src=`<?php $this->options->ZNQqPay() ?>`; }; </script> <div style="text-align: center; margin-left:30px; <?php if(Helper::options()->ZNPaySet !== 'on') echo 'display:none;' ?>"> <div class="footer_flex"> <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/shang.png" width="20px" height="20px"> <div class="flex-footer"> <img id="ewm" src="<?php $this->options->ZNAlipay() ?>" width="120px" height="120px"> <div style="margin-top:5px;"> <label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label> <label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()" checked>支付宝</label> <label style="margin-left:3px;"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label> </div> <div style="height:40px; background:rgba(0,0,0,0);"></div> </div> </div> <p style="margin-top:5px; color:#909399; font-size:12px">打赏</p> </div>3.修改functions.php文件，加入打赏设置菜单和底部引入新建的php文件，文件路径：usr/themes/Joe-master代码如下<li class="item" data-current="joe_pay">打赏设置</li> // 收款设置 require_once("public/custom.php");
-
typecho 真的很简单的自定义评论列表 以前写过一个关于自定义评论的文章，时至如今来看，还是有很多不足的，昨晚再新写主题的时候，也重新写了一次自定义评论，嗯，有了新的理解，因为其实真的很简单，仔细阅读本篇文章，相信你会有收获的。自定义评论模板到底要怎么做很简单，可以理解为两步：编写自定义评论的模板通过php渲染出自定义模板评论而为什么大多数人不会，其实就是因为官方的文档真的是，如果懂php的人，可能看了一两遍后明白了怎么回事，但是如果是小白入门，纯前端的童鞋，可能看的一脸蒙蔽。就算是原封不动的copy官方的示例代码也还是会报错，心累...因为，你不知道他要做什么，我编写了自定义模板函数threadedComments；然后呢？？？然而官方啥也没说。（当然，我不能保证这篇教程的绝对正确，但是从我的理解和使用上，还是可以正常运作的）自定义评论模板的编写我们可以创建一个用于存放模板的php文件，比如list-template.php模板本身其实就是一个php的函数，不管那些if啥的代码，其实他就是一个空架子<?php function threadedComments($comments, $options) { ?> ...自定义评论模板具体的html内容 <?php } ?>那么官方文档中开头那部分$commentClass是做什么的，其实是一个用于设置class的php变量，这个变量需要判断这条评论是文章作者的，还是其他人评论的，然后$commentLevelClass则是用来判断，这条评论是主评论还是子评论。事实上官方在 具体的html内容部分又if判断了一次，这条评论是主评论还是子评论，所以，$commentLevelClass这段我们可以删掉，并不会影响后面的内容，当然，待会我会仔细讲讲这段代码怎么用，因为官方写错啦！$commentClass那么，$commentClass我们是需要的，如果你的html样式里面不需要判断这条评论是作者的还是其他人的，那么这块代码，包括$commentClass变量，我们可以去除。$commentClass = ''; if ($comments->authorId) { if ($comments->authorId == $comments->ownerId) { $commentClass .= ' comment-by-author'; //如果是文章作者的评论添加 .comment-by-author 样式 } else { $commentClass .= ' comment-by-user'; //如果是评论作者的添加 .comment-by-user 样式 } }$commentLevelClass$commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent'; //评论层数大于0为子级，否则是父级再官方的文档中，可以看到开头这么一段代码，咋一看好像没啥问题，但是他在后面的li元素那，也有一个判断：<li id="li-<?php $comments->theId(); ?>" class="comment-body<?php if ($comments->levels > 0) { echo ' comment-child'; $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); } else { echo ' comment-parent'; } $comments->alt(' comment-odd', ' comment-even'); echo $commentClass; ?>">仔细看，是不是似曾相识：levels、comment-child、comment-parent、> 0、这不就是一样的意思吗？？？为什么要写两遍，所以，我们可以二选一，可以保留li的if判断，删除上面的$commentLevelClass；也可以保留$commentLevelClass，删除li里面的if判断。但是，如果你要保留$commentLevelClass的话，那么需要把_levels改为levels代码才能正常运行。而li这边则需要改成：<li id="li-<?php $comments->theId(); ?>" class="comment-body<?php echo $commentLevelClass;?> <?php if ($comments->levels > 0) { $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); }; $comments->alt(' comment-odd', ' comment-even');?>">是不是感觉有点麻烦，其实还可以拆分：<?php echo $commentLevelClass;?>这句就不多说了，又不是瞎子，是吧！后面这一大段：<?php if ($comments->levels > 0) { $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); }; $comments->alt(' comment-odd', ' comment-even'); ?>仔细看看，其实就是一个判断这条评论是奇数偶数，然后添加对应class的判断而已，何必这么麻烦，是不是，css的选择器：:nth-child(odd)和:nth-child(even)不香吗？？？所以，我个人是建议，这句话干掉他，还我一个干净的html代码。干掉后代码如下：<li id="li-<?php $comments->theId(); ?>" class="comment-body <?php echo $commentLevelClass;?>">就这样，我们完事了。是不是一下就明白了！现在对于class变量我们知道了，现在来看具体的html评论代码html评论代码先看下预设的php变量方法作用<?php $comments->gravatar(); ?>评论者头像（avatar源）<?php $comments->author(); ?>评论者名字<?php $comments->permalink(); ?>评论者当前评论的页面和定位，点击可以跳转到该评论位置<?php $comments->date('Y-m-d H:i'); ?>评论的时间，可以到data查看对应的格式<?php $comments->reply('Reply'); ?>回复按钮<?php $comments->content(); ?>评论的内容id="<?php $comments->theId(); ?>"评论的唯一值id评论代码只需要在html中套用就行了<li id="li-<?php $comments->theId(); ?>" class="comment-body <?php echo $commentLevelClass;?>"> <div class="media" id="<?php $comments->theId(); ?>"> <?php $comments->gravatar(); ?> <div class="media-body"> <?php $comments->author(); ?> <?php $comments->content(); ?> </div> <div class="media-footer"> <time><?php $comments->date('Y-m-d H:i'); ?></time> <?php $comments->reply('Reply'); ?> </div> </div> </li>一个经典的bootstrap的medai评论卡片就完成了，当然这里还只是单条的评论，如有子评论，我们还需要加上一个判断<li id="li-<?php $comments->theId(); ?>" class="comment-body <?php echo $commentLevelClass;?>"> <div class="media" id="<?php $comments->theId(); ?>"> <?php $comments->gravatar(); ?> <div class="media-body"> <?php $comments->author(); ?> <?php $comments->content(); ?> </div> <div class="media-footer"> <time><?php $comments->date('Y-m-d H:i'); ?></time> <?php $comments->reply('Reply'); ?> </div> </div> <?php if ($comments->children) { ?> <div class="comment-children"> <?php $comments->threadedComments($options); ?> </div> <?php } ?> </li>这样一个完整的评论就产生了，由于子评论嵌套在父评论里面，li的效果会产生padding-left的左间距，所以，回复评论太多，宽度就会不太够，所以，官方再博客后台评论设置那，可以设置最多回复多少条，一般是5条就需要新开回复了。那么，如果想避免这个情况，就可以再这里调整下嵌套结构，比如，像我的做法是我会将子评论和li做同级处理，当然这个做法不是很符合Ol>Li的结构，但是也没啥好办法吧，2333，看大家的智慧了完整代码现在就是合体了<?php function threadedComments($comments, $options) { $commentClass = ''; if ($comments->authorId) { if ($comments->authorId == $comments->ownerId) { $commentClass .= ' comment-by-author'; } else { $commentClass .= ' comment-by-user'; } } $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent'; ?> /* 自定义评论的代码结构 */ <li id="li-<?php $comments->theId(); ?>" class="comment-body <?php echo $commentLevelClass;?>"> <div class="media" id="<?php $comments->theId(); ?>"> <?php $comments->gravatar(); ?> <div class="media-body"> <?php $comments->author(); ?> <?php $comments->content(); ?> </div> <div class="media-footer"> <time><?php $comments->date('Y-m-d H:i'); ?></time> <?php $comments->reply('Reply'); ?> </div> </div> <?php if ($comments->children) { ?> <div class="comment-children"> <?php $comments->threadedComments($options); ?> </div> <?php } ?> </li> <?php } ?>关于审核提示（不一定是正确的）官方在文档末尾说：最新版本更新：首次评论审核提示，在自定义评论代码的适当地方添加以下语句，否则将看不到审核提示语句。<?php $singleCommentOptions->commentStatus(); ?>但是这句话使用有问题，最直白的就是：$singleCommentOptions这边变量哪里来的，在threadedComments函数中，找遍天也没有创建过这个变量。事实上这个$singleCommentOptions需要改为$options所以实际代码是这个：<?php $options->commentStatus(); ?>但是，当我们在评论里面添加这句话的时候，你会发现，他并不是真的智能输出的，不管你这条评论是不是真的在审核，他都会显示文字：您的评论正等待审核！我在百度找到了一个判断：<?php if ('waiting' == $comments->status): ?> <?php $options->commentStatus(); ?> <?php endif;?>通过这个判断来输出是否需要显示审核提示，but，既然我if都能判断了，<?php $options->commentStatus(); ?>这句话反倒可有可无了，因为我可以自己写提示文字啊。<?php if ('waiting' == $comments->status): ?> <span>什么吊评论，还要老子审核！！！</span> <?php endif;?>这不香吗？？？所以，我感觉这代码真的好尬啊！！！php渲染出自定义模板评论现在我们模板已经写好了，是时候让它出现在我们的页面上了。在我们需要添加评论的页面先引入list-template.php文件<?php $this->need("components/list-template.php");?>$this->need()方法，他是相对于当前主题目录的，比如你主题名字叫nmd，那么components就是nmd主题目录下的一个文件夹nmd 主题文件夹 | ---- components |----| | ---- list-template.php | ...大概是这样的一个结构，具体就不细说了，意思到位就行！引入模板后，我们需要使用<?php $comments->listComments(); ?>这段代码渲染评论，但是要注意，如果你的代码前面，没有声明$comments代码的话，使用这句话就会报错。那么代码应该是这样：<?php //评论列表 模板->$comments对象->渲染?> <?php $this->need("components/list-template.php");?> <?php $this->comments()->to($comments); ?> <?php $comments->listComments(); ?>ok，到这基本上你已经领悟了typecho的自定义评论了！恭喜出师。。。老父亲留下激动的泪水注意在评论中点击回复，可能会导致刷新页面，原因是因为在评论的回复表单那（form）元素，没有添加取消回复的代码：<?php $comments->cancelReply('放弃回复'); ?>这个代码记得添加到form表单那，当然form表单那边id啥的记得不要删了，按照官方文档那种基本上没啥问题。而本次教程只是讲怎么自定了评论列表，如果以后有时间，再讲讲怎么自定评论表单吧！
-
typecho 实现“那年今日”功能 经常逛 QQ 空间的人会发现，它就有这个功能。这个功能是展示与今天同一天发生的事、写的文章，上传的图片等等。其实，在之前使用 Wordpress 程序时，我用的知更鸟主题集成了这个功能，他叫历史上的今天。改用了 typecho 程序后，JOE主题的作者不断加强主题，而这个"那年今日"的功能也在网友提出建议后如约而至了。作者只是写好了函数，前端并没有调用，所以也就没有具体的样式。我简单的写了一个样式，把这个功能用起来了，下面我把使用的方法分享一下吧。函数部分function _getHistoryToday($created) { $date = date('m/d', $created); $time = time(); $db = Typecho_Db::get(); $prefix = $db->getPrefix(); $sql = "SELECT * FROM `{$prefix}contents` WHERE DATE_FORMAT(FROM_UNIXTIME(created), '%m/%d') = '{$date}' and created <= {$time} and created != {$created} and type = 'post' and status = 'publish' and (password is NULL or password = '') LIMIT 5"; $result = $db->query($sql); if ($result instanceof Traversable) { foreach ($result as $item) { $item = Typecho_Widget::widget('Widget_Abstract_Contents')->push($item); $title = htmlspecialchars($item['title']); $permalink = $item['permalink']; echo " <li class='item'> <a class='link' href='{$permalink}' title='{$title}'>{$title}</a> </li> "; } } }前端调用1、 文章页内<?php _getHistoryToday($this->created) ?>2、 全局调用<?php _getHistoryToday(time()) ?>效果查看本站的侧边栏，可以看到。CSS代码：.joe_history{margin:15px 0;padding:15px;position:relative;border:1px dashed var(--classA);line-height:26px}.joe_history .title{position:absolute;top:0;left:15px;font-size:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--background);padding:0 5px;color:var(--main);font-weight:600}.joe_history .title-date{color:var(--theme)}.joe_history .item{display:flex;align-items:center;line-height:30px}.joe_history .item strong{color:var(--routine);margin-right:20px}.joe_history .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_history .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_history .item .link:hover{color:var(--theme)}.joe_history .item .link:hover::after{width:100%}.joe_history .item .icon{fill:var(--routine)}侧边栏详细代码，添加到public/aside.php的恰当位置 <section class="joe_aside__item hot"> <div class="joe_aside__item-title"> <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"> <path d="M704 199.68h28.16c25.6 0 46.08-20.48 46.08-43.52V69.12c0-25.6-20.48-43.52-46.08-43.52h-28.16c-25.6 0-43.52 20.48-43.52 43.52v87.04c-2.56 25.6 17.92 43.52 43.52 43.52z m268.8 25.6v-102.4c0-20.48-17.92-38.4-38.4-38.4h-84.48-46.08v56.32c0 51.2-40.96 92.16-92.16 92.16h-5.12c-51.2 0-92.16-40.96-92.16-92.16V84.48h-171.52v56.32c0 51.2-40.96 92.16-92.16 92.16h-5.12c-51.2 0-92.16-40.96-92.16-92.16V84.48H179.2h10.24-99.84C69.12 84.48 51.2 102.4 51.2 122.88v844.8c0 20.48 17.92 38.4 38.4 38.4H184.32h-12.8H844.8h-15.36 97.28c20.48 0 38.4-17.92 38.4-38.4V232.96c7.68-2.56 7.68-5.12 7.68-7.68z m-58.88 663.04c0 53.76-5.12 58.88-58.88 58.88H168.96c-53.76 0-58.88-5.12-58.88-58.88V320h803.84v568.32zM332.8 199.68h28.16c25.6 0 46.08-20.48 46.08-43.52V69.12c0-25.6-20.48-43.52-46.08-43.52H332.8c-25.6 0-46.08 20.48-46.08 43.52v87.04c0 25.6 20.48 43.52 46.08 43.52zM302.08 640h391.68c-12.8 25.6-25.6 48.64-43.52 71.68-15.36 20.48-33.28 38.4-53.76 56.32-20.48 15.36-40.96 30.72-64 43.52-17.92 10.24-35.84 17.92-56.32 25.6-10.24 2.56-12.8 12.8-10.24 23.04 2.56 5.12 5.12 7.68 10.24 10.24 5.12 2.56 10.24 2.56 15.36 0 23.04-7.68 46.08-20.48 69.12-33.28 28.16-15.36 51.2-35.84 76.8-56.32 23.04-23.04 43.52-48.64 64-76.8 15.36-23.04 28.16-48.64 38.4-76.8 5.12-12.8-5.12-25.6-17.92-25.6H537.6v-66.56c0-10.24-7.68-17.92-17.92-17.92-10.24 0-17.92 7.68-17.92 17.92v66.56h-199.68c-10.24 0-17.92 7.68-17.92 17.92v2.56c-2.56 10.24 7.68 17.92 17.92 17.92z m17.92-102.4l74.24-76.8 12.8-12.8c10.24-7.68 17.92-12.8 30.72-15.36 5.12-2.56 12.8-2.56 23.04-2.56h122.88c7.68 0 15.36 0 23.04 2.56 5.12 0 12.8 2.56 17.92 5.12 10.24 5.12 17.92 12.8 25.6 20.48l71.68 76.8c7.68 7.68 17.92 7.68 25.6 0 5.12-5.12 5.12-7.68 5.12-12.8s-2.56-7.68-5.12-12.8L675.84 435.2l-17.92-17.92c-5.12-5.12-12.8-7.68-20.48-12.8-15.36-7.68-35.84-10.24-56.32-10.24h-122.88c-20.48 0-38.4 2.56-56.32 10.24-7.68 5.12-12.8 7.68-20.48 12.8l-17.92 17.92-71.68 76.8c-5.12 5.12-5.12 7.68-5.12 12.8s2.56 10.24 5.12 12.8c7.68 7.68 20.48 7.68 28.16 0z"></path> </svg> <span class="text">那年今日</span> <span class="line"></span> </div> <ol class="joe_aside__item-contain"> <?php _getHistoryToday(time()) ?> </ol> </section>
-
typecho添加评论算术验证 typecho 和 wordpress 一样，开启评论后，总是会有垃圾的评论、外国机器人评论灌水，加上一个算术验算能有效的增加一层防护网。我加上以后，类似的灌水消失了。添加算术验证的方式虽多，但万变不离其宗，这里列举一种广为流传的。实现方式1、 在 function.php 文件中添加function _spamProtectionMath() { $num1 = rand(0, 9); $num2 = rand(0, 9); echo "<input type=\"text\" value=\"\" placeholder=\"请计算 $num1 + $num2 = ...\" autocomplete=\"off\" name=\"sum\" maxlength=\"2\">"; echo "<input type=\"hidden\" name=\"num1\" value=\"$num1\">"; echo "<input type=\"hidden\" name=\"num2\" value=\"$num2\">"; } function _spamProtectionPre($commentdata) { $sum = $_POST['sum']; switch ($sum) { case $_POST['num1'] + $_POST['num2']: break; case null: throw new Typecho_Widget_Exception(_t('请输入计算结果！')); break; default: throw new Typecho_Widget_Exception(_t('请输入正确结果！')); } return $commentdata; }2、 在内容页或者单页显示function themeInit($self){ if ($self->is('single')) { $comment = _spamProtectionPre($self); } }3、 ajax 判断，找到评论提交这一块代码，把下面的加上const sum = $("input[name='sum']").val(); const num1 = $("input[name='num1']").val(); const num2 = $("input[name='num2']").val(); $.ajax({ ... data: { num1, num2, sum }, ... });4、 调用，把下面的代码添加评论提交的表单内<?php _spamProtectionMath(); ?>
-
给侧边栏添加恋爱计时功能 效果如图示：<section class="joe_aside__item timelife table"> <div class="joe_aside__item-title"> <i class="fa fa-heart-o icon"></i> <span class="text">恋爱清单</span> <span class="line"></span> </div> <div class="content"><br> <div style="text-align: center;"> <img src="https://q1.qlogo.cn/g?b=sdk&k=KeAYc2FhrGZhIXOplOjAXA&s=100" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" title="森"> <a href="//us.arsn.cn/" target="_blank" title="恋爱清单100件"><i class="fa fa-heart us_arsn_cn" style="color:red"></i></a> <img src="https://q1.qlogo.cn/g?b=sdk&k=wUtN0RKG3VZ2NKvuiac8icFA&s=100" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" title="妍"><br> <div class="title">我们已经在一起 <span class="us_arsn_cn_font">520</span>天啦</div> </div> </div><br> </section>另一套源码：<div class="joe_aside__item hot" style="text-align: center; color:#888; font-size: 15px; padding:10px;"> <div style="width: 220px; margin: 0 auto;"> <!-- 左边的头像，nk=后面填写QQ号，直接采集QQ头像 --> <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love" style="width: 60px; border-radius: 50%;"> <!-- 中间的图片 --> <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/love.gif" alt="love" style="width: 60px; border-radius: 50%;"> <!-- 右边的头像，nk=后面填写QQ号，直接采集QQ头像 --> <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love" style="width: 60px; border-radius: 50%;"> </div> <p id="lovepyqSitetime"></p> <script language=javascript> function lovepyqSitetime() { window.setTimeout("lovepyqSitetime()", 1000); var seconds = 1000 var minutes = seconds * 60 var hours = minutes * 60 var days = hours * 24 var years = days * 365 var today = new Date() var todayYear = today.getFullYear() var todayMonth = today.getMonth() + 1 var todayDate = today.getDate() var todayHour = today.getHours() var todayMinute = today.getMinutes() var todaySecond = today.getSeconds() // 时间设置 var t1 = Date.UTC(2019, 10, 19, 22, 22, 00) //年，月，日，时，分，秒 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond) var diff = t2 - t1 var diffYears = Math.floor(diff / years) var diffDays = Math.floor((diff / days) - diffYears * 365) var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours) var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes) var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds) document.getElementById("lovepyqSitetime").innerHTML = "我们相恋了：</br>" + diffYears + "年" + diffDays + "天" + diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦" } lovepyqSitetime() </script> </div>手机上左侧添加 <!-- 恋爱计时 --> <ul class="joe_header__slideout-count"> <div style="font-size:15px; text-align: center; color:#888;"> <div style="width: 220px; margin: 0 auto;"> <!-- 左边的头像，nk=后面填写QQ号，直接采集QQ头像 --> <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love" style="width: 60px; border-radius: 50%;"> <!-- 中间的图片 --> <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/love.gif" alt="love" style="width: 60px; border-radius: 50%;"> <!-- 右边的头像，nk=后面填写QQ号，直接采集QQ头像 --> <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love" style="width: 60px; border-radius: 50%;"> </div> <p id="loveSitetime"></p> <script language=javascript> function loveSitetime() { window.setTimeout("loveSitetime()", 1000); var seconds = 1000 var minutes = seconds * 60 var hours = minutes * 60 var days = hours * 24 var years = days * 365 var today = new Date() var todayYear = today.getFullYear() var todayMonth = today.getMonth() + 1 var todayDate = today.getDate() var todayHour = today.getHours() var todayMinute = today.getMinutes() var todaySecond = today.getSeconds() // 时间设置 var t1 = Date.UTC(2019, 10, 19, 22, 22, 00) //年,月,日,时,分,秒 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond) var diff = t2 - t1 var diffYears = Math.floor(diff / years) var diffDays = Math.floor((diff / days) - diffYears * 365) var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours) var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes) var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds) document.getElementById("loveSitetime").innerHTML = "我们相恋了：</br>" + diffYears + "年" + diffDays + "天" + diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦</br>" } loveSitetime() </script> </div> </ul>参考网站：https://www.arsn.cn/https://blog.52aill.xyz/archives/139/
-
Typecho同步新浪微博的插件（可提取文章图片作配图） 由于博客在2015-12-10已经从Typecho转到了Pelican，所以把这个Typecho同步新浪微博的插件放在Github上后就一直也没管了。最近有同学在Github上提了issue，于是写了这篇文章对插件作了详细说明，希望对大家有帮助。插件基于新浪微博开放平台最新的OAuth2认证方式调用相关API接口把文章同步到微博上。微博发布后，会显示来源（也即应用名称，如下图BZ的是TypeCodes）以及缩略图（需要在插件后台设置）。1 插件说明：由于插件基于OAuth2认证方式，在调用相关微博API的时候需要用户的access_token（30天有效）和uid数据，所以需要自己额外搭建一个新浪微博应用服务。2 搭建新浪微博应用服务：首先用户必须有一个已经审核通过的新浪微博开放平台的应用。申请方法这里不再赘述，详见官方说明。2.1 修改配置文件根据新浪微博开放平台的应用的信息修改config.php文件中的WB_AKEY、WB_SKEY和WB_CALLBACK_URL这三个变量，它们分别代表应用的App Key、App Secret和回调地址。2.2 博客搭建回调服务把本目录（weibo）上传至对应的新浪微博应用服务器，如果能通过访问该回调地址（例如https://typecodes.com/weibo）则表示服务搭建完毕。3 安装插件：在搭建新浪微博应用服务后就可以安装这个新浪微博同步插件了。3.1 修改配置文件同2.1小节所示，根据新浪微博开放平台的应用的信息修改config.php文件中的WB_AKEY、WB_SKEY和WB_CALLBACK_URL这三个变量，它们分别代表应用的App Key、App Secret和回调地址。3.2 上传插件程序把本目录（WeiboSync）上传至Typecho插件目录（默认为/usr/plugins）。4 插件设置进入typecho的后台并启用WeiboSync插件，再点击设置按钮，进入到WeiboSync插件信息的设置页面。点击"使用微博账号登录"按钮会跳转到新浪微博登录授权界面，在授权登录后会自动跳转到2.2小节设置的回调地址界面。如下图所示，在这个界面会输出用户的access_token（30天有效）和uid数据，把这两个值填写到上图中的新浪微博Access Token和个人微博ID中即可。5 插件维护目前已经把整个工程放在了GitHub上了，地址是：https://github.com/vfhky/WeiboSync 。
-
调用博主最近登录时间 放在主题文件functions.php， 或core/core.php文件里都可以，在文件最下面放入以下代码即可：//调用博主最近登录时间 function get_last_login($user){ $user = '1'; $now = time(); $db = Typecho_Db::get(); $prefix = $db->getPrefix(); $row = $db->fetchRow($db->select('activated')->from('table.users')->where('uid = ?', $user)); echo Typecho_I18n::dateWord($row['activated'], $now); }然后在想要显示的位置调用以下代码：博主 <?php get_last_login(1); ?> 在线
-
Joe 主题 6.xx 底部增强，显示标签及二维码分享 原理也简单，不细说了。直接上教程。下载二维码生成器https://ijkxs.lanzous.com/i9oqjng4uwf密码:d4bm解压后得到一个叫 poster 的文件夹，放到 joe 的主题目录里。添加 html找到 Joe/public/handle.php 在文件最下面添加<footer class="entry-footer" id="footfix"> <div class="entry-bar-inner" style="width: auto;"> <div class="post-tags"> <?php $this->tags('', true, ''); ?> </div> <div class="readlist"> <div href="javascript:;" id="mClick" class="mobile_click"> <div class="share"> <div class="Menu-item"><a href="javascript:Share('tqq')"><svg t="1617016842691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271" width="20" height="20"><path d="M510.138606 62.785975c-247.246127 0-447.679066 200.431915-447.679066 447.679066S262.891456 958.144106 510.138606 958.144106s447.679066-200.431915 447.679066-447.679066S757.384733 62.785975 510.138606 62.785975zM725.157751 635.028011c-9.552563 5.081739-24.467251-6.489808-38.461987-27.720342-5.516644 23.134907-19.282159 44.057425-38.842657 60.886719 20.558222 7.739265 33.964556 20.400632 33.964556 34.704406 0 23.52581-36.31509 42.59819-81.136925 42.59819-40.400129 0-73.909313-15.502066-80.113619-35.821857-1.610684-0.026606-7.995091-0.026606-9.655917 0-6.178723 20.345374-39.660278 35.821857-80.08906 35.821857-44.819788 0-81.136925-19.044752-81.136925-42.59819 0-14.329357 13.422707-26.965142 33.965579-34.704406-19.588127-16.803711-33.301454-37.751812-38.842657-60.886719-13.996782 21.231557-28.950356 32.801057-38.487569 27.720342-13.829983-7.372921-11.031241-46.844911 6.195096-88.217181 13.509688-32.488948 31.936363-56.459896 45.880957-61.747319-0.179079-2.085498-0.25685-4.169973-0.25685-6.253424 0-12.58462 3.422959-24.178679 9.221012-33.638121-0.027629-0.728594-0.078795-1.483794-0.078795-2.213411 0-5.758144 1.341554-11.177574 3.664459-15.891945 3.515057-84.520999 57.476039-151.633512 144.80499-151.633512 87.277786 0 141.215232 67.113537 144.764058 151.633512 2.299369 4.689812 3.654226 10.108219 3.654226 15.891945 0 0.728594 0 1.483794-0.101307 2.213411 5.849218 9.458419 9.269108 21.079084 9.269108 33.638121 0 2.083451-0.103354 4.193509-0.305969 6.253424 14.045901 5.287423 32.407084 29.232788 45.944402 61.747319C736.266763 588.157517 738.996944 627.654067 725.157751 635.028011z" p-id="1272"></path></svg> QQ 分享</a></div> <div class="Menu-item"><a href="javascript:Share('sina')"><svg t="1617016892561" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2124" width="18" height="18"><path d="M428.465 463.138c-88.93 12.19-154.28 71.145-145.986 131.497 8.394 60.353 87.132 99.423 176.063 87.232 88.93-12.29 154.28-71.144 145.986-131.497-8.394-60.453-87.132-99.522-176.063-87.232z m26.68 175.463c-46.364 8.893-89.73-13.69-96.725-50.56-7.094-36.772 24.78-73.843 71.144-82.736 46.364-8.893 89.63 13.79 96.725 50.56 7.094 36.872-24.78 73.943-71.145 82.736z" p-id="2125"></path><path d="M512.3 0.8C229.72 0.8 0.7 229.82 0.7 512.4S229.72 1024 512.3 1024s511.6-229.021 511.6-511.6S794.78 0.8 512.3 0.8z m184.955 590.238c-23.282 71.744-160.075 182.658-347.928 115.61-76.94-31.176-126.7-102.72-95.625-185.455 55.057-136.494 249.505-211.235 246.907-106.317-1 19.185-1 30.076 27.878 14.788 83.635-42.367 115.91 21.384 96.125 60.253-12.59 19.885 14.089 14.09 14.089 14.09s89.63-20.785 58.554 87.031z m-21.583-138.192c5.396-69.845-60.852-58.154-65.049-57.655-4.197 0.5-9.792-3.197-10.592-9.792-0.9-6.595 4.197-11.091 11.691-11.89 99.123-10.493 83.735 80.336 82.835 87.031-0.999 6.695-4.496 13.99-13.39 11.791-8.992-2.298-4.496-13.19-5.495-19.485z m96.325 20.284c-3.997 11.591-12.99 26.68-27.479 23.082-15.987-4.296-13.49-24.98-10.292-38.47 23.282-122.804-104.018-115.91-130.698-115.91-7.194-0.699-21.483-9.392-21.383-22.681 0.1-13.39 16.287-19.585 23.482-20.884 227.122-14.689 168.268 161.474 166.37 174.863z" p-id="2126"></path><path d="M424.069 555.366c-15.988 0-28.978 11.091-28.978 24.68 0 13.69 12.99 24.682 28.978 24.682s28.977-10.992 28.977-24.681c0-13.59-12.89-24.68-28.977-24.68z m47.563-16.087c-5.996 0-11.991 7.194-11.991 15.987 0 8.893 6.095 16.088 11.99 16.088 5.996 0 12.091-7.195 12.091-16.088-0.1-8.793-6.195-15.987-12.09-15.987z" p-id="2127"></path></svg> 微博分享</a></div> <div class="Menu-item"><svg t="1617016924519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="18" height="18"><path d="M710.4 511.36c16.64 0 29.44 10.88 29.44 24.32 0 10.88-12.8 21.76-29.44 21.76-12.8 0-23.68-10.88-23.68-21.76 0.64-13.44 11.52-24.32 23.68-24.32zM337.92 340.48c16.64 0 30.08 10.88 30.08 29.44 0 17.28-13.44 29.44-30.08 29.44-17.92 0-35.84-12.16-35.84-29.44 0-18.56 17.92-29.44 35.84-29.44z m165.12 58.24c-17.28 0-33.92-11.52-33.92-29.44 0-18.56 16.64-29.44 33.92-29.44 18.56 0 30.08 10.88 30.08 29.44 0 17.92-12.16 29.44-30.08 29.44z m76.8 112.64c17.28 0 30.08 10.88 30.08 24.32 0 10.88-12.8 21.76-30.08 21.76-11.52 0-23.68-10.88-23.68-21.76 0-13.44 11.52-24.32 23.68-24.32zM415.36 641.92c6.4 0 14.08 0 21.12-0.64-4.48-16.64-6.4-32.64-6.4-49.92 0-102.4 87.68-187.52 200.96-187.52 6.4 0 14.08 0.64 22.4 2.56-20.48-97.92-122.88-165.76-238.08-165.76-129.92 0-236.8 87.04-236.8 200.32 0 64 35.2 117.12 94.08 158.72l-24.32 71.68 84.48-42.88c28.8 8.32 51.84 13.44 82.56 13.44z m347.52 81.28c46.72-33.92 82.56-81.92 82.56-135.04 0-95.36-95.36-172.16-200.96-172.16-112 0-200.32 76.8-200.32 172.16s88.32 171.52 200.32 171.52c24.32 0 47.36-7.68 71.68-12.16l63.36 35.84-16.64-60.16zM512 0c282.88 0 512 229.12 512 512s-229.12 512-512 512S0 794.88 0 512 229.12 0 512 0z" p-id="3061"></path></svg> 微信分享<img src="<?php $this->options->themeUrl("poster/api.php"); ?>?url=<?php $this->permalink() ?>"> </div> </div> <div><svg t="1617016981855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3873" width="15" height="15"><path d="M826.48 660.9c-60.456 0-109.88 32.358-132.9 82.596L401.373 619.203c17.045-26.404 26.41-58.768 26.41-93.666 0-14.459-1.706-28.943-5.12-42.573l186.572-144.752c24.72 18.729 56.253 29.798 91.177 29.798 84.347 0 147.38-63.012 147.38-146.432 0-83.45-63.054-146.462-147.38-146.462-84.352 0-146.535 63.011-146.535 146.462 0 21.29 4.265 40.868 11.07 57.892L392.837 411.433c-34.068-51.087-90.301-86.856-154.194-86.856-104.192-0.26-188.866 83.989-189.122 188.18a23.803 23.803 0 0 0 0 0.856c-0.2 104.192 84.106 188.815 188.298 189.015h0.83c39.188 0 75.811-10.194 105.635-28.928l335.683 143.032c4.27 79.176 65.602 137.923 146.509 137.923 84.372 0 146.554-62.992 146.554-146.437s-63.058-147.313-146.529-147.313h-0.02z" p-id="3874" fill="#ffffff"></path></svg> 分享</div> </div> </div> </div> </footer> <script type="text/javascript"> $("#mClick").click(function (e) { if ($(this).hasClass('mobile_click')){ $(this).prop('class','mobile_close') }else{ $(this).prop('class','mobile_click') } }) function Share(pType){ var pTitle = "<?php $this->title(); ?>"; //待分享的标题 var pImage = "<?php $this->fields->thumb(); ?>"; //待分享的图片 var pContent = '<?php _e(str_replace(array("\r\n","\n","\r"),'<br/>',Typecho_Common::subStr(strip_tags($this->excerpt), 0, 80, '...')));?>'; //待分享的内容 var pUrl = window.location.href; //当前的url地址 var pObj = jQuery("div[class='yogo_hc']").find("h4"); if(pObj.length){ pTitle = pObj.text();} var pObj = jQuery("div[class='yogo_hcs']").find("em"); if(pObj.length){ pContent = pObj.text(); } var pObj = jQuery("div[class='con_cons']").find("img"); if(pObj.length){ pImage = jQuery("div[class='con_cons']").find("img",0).attr("src");} shareys(pType, pUrl, pTitle,pImage, pContent); } function shareys(a, c, b, e, d) { switch (a) { case "sina": c = "http://service.weibo.com/share/share.php?title\x3d" + encodeURIComponent(d + "\u300c" + b + "\u300d \u70b9\u8fd9\u91cc" + c) + "\x26pic\x3d" + e; window.open(c); break; case "tqq": c = "https://connect.qq.com/widget/shareqq/index.html?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26pics\x3d" + e; window.open(c); break; case "qzone": c = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26site\x3d\x26pics\x3d" + encodeURIComponent(e) + "\x26desc\x3d" + encodeURIComponent(d) + "\x26summary\x3d" + encodeURIComponent(d); window.open(c); break; case "ren": c = "http://widget.renren.com/dialog/share?resourceUrl\x3d" + encodeURIComponent(c) + "\x26srcUrl\x3d" + e + "\x26title\x3d" + encodeURIComponent(b), NaN + d, window.open(c) } } </script>添加自定义cssbody #footfix.entry-footer { display: table; width: 100%; padding: 10px; } body #footfix.entry-footer .share { position: absolute; background: #fff; border: 1px solid #ebebeb; border-radius: 4px; -webkit-box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1); box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1); z-index: 203; padding: 15px 0; width: 110px; animation: left 0.5s; left: -43px; top: -200px; } body #footfix.entry-footer .share .Menu-item { display: block; width: 100%; padding: 0 15px; text-align: left; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; color: black; } body #footfix.entry-footer .share .Menu-item a { color: var(--main); } body #footfix.entry-footer .share .Menu-item img { max-width: 100%; height: auto; transition: opacity 0.3s; vertical-align: middle; } body #footfix.entry-footer .mobile_click .share { display: none; } body #footfix.entry-footer .post-tags a { margin-right: 15px; margin-bottom: 15px; line-height: 32px; display: inline-block; padding: 0 8px; background: var(--classC); border-radius: 3px; color: var(--minor); cursor: pointer; float: left; font-size: 11px; } body #footfix.entry-footer #mClick.mobile_click, body #footfix.entry-footer #mClick.mobile_close { float: right; color: #fff; padding: 0 10px; background: var(--theme); border-radius: 2px; font-size: 11px; line-height: 32px; cursor: pointer; } body #footfix.entry-footer #mClick.mobile_click, body #footfix.entry-footer #mClick.mobile_close { float: right; color: #fff; padding: 0 10px; background: var(--theme); border-radius: 2px; font-size: 11px; line-height: 32px; cursor: pointer; } body #footfix.entry-footer #mClick.mobile_close { position: relative; } body #footfix.entry-footer a#mClick, body #footfix.entry-footer a#mStats { opacity: 1; }本站备份poster.zip下载。[attach]1191[/attach]
-
Joe 主题 6.xx 增加顶部下拉隐藏，并显示文章标题 效果和本博客在查看文章时的效果一致，当下滑的时候，顶部会自动收起并显示文章的标题。原理没啥好讲的，就是监听下滚动时间，判断下滚动距离。教程添加到自定义css：@keyframes hideIndex { 0% { opacity: 0; transform: translate(0, 30px); } 100% { opacity: 1; transform: translate(0, 0); } } .post_no { display: none !important; } body #Joe { padding-top: 105px !important; } body #Joe > header { position: fixed; width: 100%; } body #Joe #post_top_title { font-size: 16px; line-height: 50px; font-weight: 600; width: 100%; animation: hideIndex 0.6s; -moz-animation: hideIndex 0.6s; -webkit-animation: hideIndex 0.6s; -o-animation: hideIndex 0.6s; } body #Joe #post_top_title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--main); } @media (max-width: 768px) { body #Joe { padding-top: 55px !important; } } 自定义js：$(document).ready(function(){ if (!document.querySelector("#post_top_title span").innerHTML){ return } let header = document.querySelector("header.joe_header") let row_above = $(".joe_header__above") let above_nav = $(".joe_header__above .joe_container:first-child") let below = $(".joe_header__below") let post_title = $("#post_top_title") let canSlideDown = true let canSlideUp = true let caluSideBar = function () { // 计算侧边栏最后一个元素的高度 let ele = $('.joe_aside__item:last-child') ele.css('transition','top 100ms'); ele.css('top', $('.joe_header').height() + 15) } let showNav = function(){ post_title.addClass("post_no") above_nav.removeClass("post_no") below.slideDown("fast",function (){ canSlideDown = true caluSideBar() }) } let hideNav = function(){ post_title.removeClass("post_no"); above_nav.addClass("post_no") below.slideUp("normal",function () { canSlideUp = true caluSideBar() }) } let lastScrollPos = 0 if(screen.width < 768) { $(window).scroll(function() { let scrollPos = $(window).scrollTop(); //得到滚动的距离 if (scrollPos > 395 && scrollPos < 505) return // 防止nav出现触发再次scroll if (scrollPos >= 450) { //比较判断是否fixed if (lastScrollPos > scrollPos && canSlideUp){ canSlideDown = false row_above.slideDown("fast",function (){ canSlideDown = true }) } else{ if (canSlideDown){ canSlideUp = false row_above.slideUp("normal",function () { canSlideUp = true }) } } } else { row_above.slideDown("fast",function (){ canSlideDown = true }) } lastScrollPos = scrollPos }) }else { let navOffw = header.offsetWidth if (post_title.length > 0 && navOffw > 750) { $(window).scroll(function() { let scrollPos = $(window).scrollTop(); //得到滚动的距离 if (scrollPos > 400 && scrollPos < 500) return // 防止nav出现触发再次scroll if (scrollPos >= 450) { //比较判断是否fixed if (lastScrollPos > scrollPos && canSlideUp){ //向上滚动举例超过100 canSlideDown = false showNav() } else{ if (canSlideDown){ canSlideUp = false hideNav() } } } else { showNav() } lastScrollPos = scrollPos }) } } }) 添加 html：在 Joe/public/header.php 文件顶部找到<header class="joe_header"> ----<div class="joe_header__above"> --------<div class="joe_container"> ------------xxxxx很多代码 --------</div> ----</div> // 找到这一个闭合的标签 说白了就是在 <div class="joe_header__above"> 这个标签对应的闭合标签</div>的前面插入：<header class="joe_header"> ----<div class="joe_header__above"> --------<div class="joe_container"> ------------xxxxx很多代码 --------</div> --------<div class="joe_container post_no" id="post_top_title"><span><?php if ($this->is('post')): ?><span><?php $this->title(); ?></span><?php endif; ?></div> ----</div> // 找到这一个闭合的标签，在前面插入 刷新一下大功告成。
-
cmsblog.cn 十年博客归来 用爱发电 随缘更新 从2007年开始，就折腾起博客来了。中间断断续续，域名注册也断了几年，最后还是回到了自己手里。 因为没有技术，所以很多问题回答不了各位。纯粹是用爱发电，到现在才让博客实现了自己想要的功能。总是喜爱折腾一些代码，收藏的网址随着时间的流逝，很多打不开了。所以这是我博客更新的主要来源以及动力。文章底部都会标有我抄文章时的来源的网址，我也不知道它是不是原创。如果有涉及侵权或引起你的不适，请留言告之我会删除。以后慢慢多收集些实用的分享。{alert type="info"}我不是代码的创造者，我只是代码的搬运工！{/alert}{alert type="success"}用爱发电！！！ 随缘更新！！！{/alert}
-
WxFans 一款 typecho 微信公账号涨粉插件，支持动态验证码 WxFans一款 typecho 微信公账号涨粉插件，支持动态验证码下载后插件文件夹改名为 WxFans 后启用。第一、插件的设置开发者TOKEN这个如果我们不采用公众号API接口的话，那这里就随便填写。建议不要用API，否则会使得其他预设值的自动回复关键字失效。公众号URL这个是我们需要在前端显示的公众号二维码的图片。尺寸适当。验证码获取关键字根据我们预设值要对应后面微信公众号自动回复调用一致。验证码有效时间一般设置 2 分钟。单位是默认的。接口文件名这个是会在我们网站根目录生成的PHP文件，对应后面要设置到自动回复的返回URL。回复模板这个一般默认，也可以根据自己需要微调。第二、公众号设置我们在插件配置完毕之后，就需要在公众号设置自动回复。这里我们在公众号自动回复设置一条。回复内容需要设置注意：<a href="http://我们的网站URL/api.php?url_captcha=get_captcha">查看验证码</a> 这里我们看到上面需要注意的。对应我们插件设置的api 接口文件名称，后面的尾巴（url_captcha=get_captcha）是固定的。第三、如何隐藏内容插件已经集成后台编辑器里了。如果没有的话可以插入一下内容：<!--wxfans start-->请输入加密内容<!--wxfans end-->//前面有一个！欢迎关注我的公众号下载地址：https://github.com/gogobody/WxFans[attach]1173[/attach]本站会员免费下载：
-
typecho调用博主最近登录时间 显示博主最后一次登录的时间，搭配在线人数统计一起用效果非常的NICE！废话少说，直接说方法。方法在主题文件functions.php（Joe主题放在core/core.php文件）最下面放入以下代码：//调用博主最近登录时间 function get_last_login($user){ $user = '1'; $now = time(); $db = Typecho_Db::get(); $prefix = $db->getPrefix(); $row = $db->fetchRow($db->select('activated')->from('table.users')->where('uid = ?', $user)); echo Typecho_I18n::dateWord($row['activated'], $now); } 然后在想要显示的位置调用以下代码：博主 <?php get_last_login(1); ?> 在线 就这么简单！
-
无插件实现Typecho 独立友链页面 思路typecho 的 markdown 支持以!!!<-- html tag -->!!!的方式嵌入 html 内容，所以可以把原来的脚本嵌入到这里面，这样就不用修改主题了。为了使显示效果不过分依赖 css，我特意重写、精简了 css，同样把 css 也嵌入到 html tag 里面，使得与主题分离而独立。使用# 本页面仅作为演示使用 友链页面请转至 https://www.onesrc.cn/links.html ## 友情链接: <ul class="flinks"> <li>一元-ONESRC</li> <li>https://www.onesrc.cn/</li> <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li> <li>onesrc.cn</li> <li>Baidu</li> <li>https://www.baidu.com/</li> <li>https://www.baidu.com/favicon.ico</li> <li>baidu.com</li> <li>一元-ONESRC</li> <li>https://www.onesrc.cn/</li> <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li> <li>onesrc.cn</li> <li>一元-ONESRC</li> <li>https://www.onesrc.cn/</li> <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li> <li>onesrc.cn</li> </ul> ## 其他内容 又有一些链接 <ul class="flinks"> <li>一元-ONESRC</li> <li>https://www.onesrc.cn/</li> <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li> <li>onesrc.cn</li> <li>Baidu</li> <li>https://www.baidu.com/</li> <li>https://www.baidu.com/favicon.ico</li> <li>baidu.com</li> <li>一元-ONESRC</li> <li>https://www.onesrc.cn/</li> <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li> <li>onesrc.cn</li> <li>一元-ONESRC</li> <li>https://www.onesrc.cn/</li> <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li> <li>onesrc.cn</li> </ul> ## 结尾内容 这是文章结尾。 !!! <script>document.querySelectorAll('ul.flinks').forEach(function(e){let a=e;if(a){let ns=a.querySelectorAll("li");let str='<div style="display:inline-block;">';let bgid=0;const bgs=["bg-white","bg-grey","bg-deepgrey","bg-blue","bg-purple","bg-green","bg-yellow","bg-red","bg-orange"];for(let i=0;i<ns.length;i+=4){str+=(`<div class="flink-item ${bgs[Math.floor(Math.random() * 9)]}"><div class="flink-title"><a href="${ns[i+1].innerText}"target="_blank"rel="external nofollow ugc">${ns[i].innerText}</a></div><div class="flink-link"><div class="flink-link-ico"style="background: url(${ns[i+2].innerText});background-size: 42px auto;"></div><div class="flink-link-text">${ns[i+3].innerText}</div></div></div>`)}str+=`</div>`;let n1=document.createElement("div");n1.innerHTML=str;a.parentNode.insertBefore(n1,a);a.style="display: none;"}else{console.log('No such id "flinks"')}});</script> <style>.flink-item{width:300px;height:100px;position:relative;margin:10px;background-color:#fff;border-radius:3px;float:left}.flink-title{left:25px;top:25px;position:absolute}.flink-title a{font-size:17px;color:#f1f1f1;line-height:17px;word-break:break-all;text-decoration:none;outline:0}.flink-link{right:0;bottom:0;padding:0 15px 15px;position:absolute;text-align:center}.flink-link-text{font-size:12px;color:#f1f1f1}.flink-link-ico{display:inline-block;width:42px;height:42px;border-radius:50%}.bg-white{background-color:#fff!important}.bg-grey{background-color:#f7f7f7!important}.bg-deepgrey{background-color:rgba(0,0,0,.5)!important}.bg-blue{background-color:#6fa3ef!important}.bg-purple{background-color:#bc99c4!important}.bg-green{background-color:#46c47c!important}.bg-yellow{background-color:#f9bb3c!important}.bg-red{background-color:#e8583d!important}.bg-orange{background-color:#f68e5f!important}</style> !!!直接将上面的内容作为 markdown 文章内容使用即可，其余的我已经处理好。常见问题与 ShortLinks 冲突链接中的 nofollow，_blank 等属性我已经添加好，可以不用担心外链问题。至于冲突，可以通过添加自定义字段 noshort 解决。当然，你如果没有使用 ShortLinks，就可以忽略这个问题了。显示效果不佳按照自己的需求，修改代码中的 style 部分即可，思路还是一样的。效果展示
-
typecho个性读者墙 这篇文章主要介绍了Typecho CSS3个性留言板读者墙页面的添加方法,需要的朋友可以参考下。首先、把下面代码粘贴到当前主题的functions.php页面（Joe主题放在core/core.php）：//获得读者墙 function getFriendWall() { $db = Typecho_Db::get(); $sql = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail') ->from('table.comments') ->where('status = ?', 'approved') ->where('type = ?', 'comment') ->where('authorId = ?', '0') ->where('mail != ?', 'admin@ben-lab.com') //排除自己上墙 ->group('author') ->order('cnt', Typecho_Db::SORT_DESC) ->limit('15'); //读取几位用户的信息 $result = $db->fetchAll($sql); if (count($result) > 0) { $maxNum = $result[0]['cnt']; foreach ($result as $value) { $mostactive .= '<li><a target="_blank" rel="nofollow" href="' . $value['url'] . '"><span class="pic" style="background: url(http://1.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=36&d=&r=G) no-repeat; "></span><em>' . $value['author'] . '</em><strong>+' . $value['cnt'] . '</strong><br />' . $value['url'] . '</a></li>'; } echo $mostactive; } }然后在想要显示的位置调用以下代码：<?php getFriendWall(); ?>最后再美化一下：<div id="list-post"> <ul class='readers-list'> <?php getFriendWall(); ?> </ul></div>在CSS文件（Joe主题在assets/css/joe.min.css）放入以下代码：/*读者墙*/ .readers-list { line-height: 16px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .readers-list li { width: 180px; float: left; list-style: none; } .readers-list a,.readers-list a:hover strong { background-color: #f2f2f2; background-image: -webkit-linear-gradient(#f8f8f8,#f2f2f2); background-image: -moz-linear-gradient(#f8f8f8,#f2f2f2); background-image: linear-gradient(#f8f8f8,#f2f2f2); } .readers-list a { position: relative; display: block; height: 30px; margin: 4px; padding: 2px 4px 2px 44px; color: #999; overflow: hidden; border: #ccc 1px solid; border-radius: 2px; box-shadow: #eee 0 0 2px; font-size: 10px; line-height: 14px; } .readers-list .pic,.readers-list em,.readers-list strong { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; transition: all .2s ease-out; } .readers-list .pic { width: 30px; height: 30px; float: left; margin: 0 8px 0 -40px; border-radius: 2px; } .readers-list em { color: #666; font-style: normal; margin-right: 10px; font: bold 12px/16px microsoft yahei; } .readers-list strong { color: #ddd; width: 34px; text-align: right; position: absolute; right: 6px; top: 4px; font: bold 14px/16px microsoft yahei; } .readers-list a:hover { border-color: #bbb; box-shadow: #ccc 0 0 2px; background-color: #fff; background-image: none; } .readers-list a:hover .pic { opacity: .6; margin-left: 0; } .readers-list a:hover em { color: #EE8B17; font: bold 12px/36px microsoft yahei; } .readers-list a:hover strong { color: #EE8B17; right: 134px; top: 0; text-align: center; border-right: #ccc 1px solid; height: 34px; line-height: 34px; }
