Joe主题侧边栏添加联系方式 前言好久没有折腾自己的博客了，最近遇到一个网友加我好友，说找了半天才找到我的联系方式。花了点时间，将自己的联系方式加到侧边栏比较明显的地方{card-default label="效果" width="75%"}{/card-default}参考博客的侧栏增加社交信息2.0实现PC端{message type="success" content="Joe/public/aside.php"/} <!-- PC侧栏社交信息 --> <?php if ($this->options->SocialInfo && (($this->options->SocialSwitch === 'on') || ($this->options->SocialSwitch === 'on2'))) : ?> <?php $SocialInfo = $this->options->SocialInfo; if ($SocialInfo) { $SocialInfo_arr = explode("\r\n", $SocialInfo); if (count($SocialInfo_arr) > 0) { for ($i = 0; $i < count($SocialInfo_arr); $i++) { $SocialTitle = explode("||", $SocialInfo_arr[$i])[0]; $SocialIco = explode("||", $SocialInfo_arr[$i])[1]; $SocialUrl = explode("||", $SocialInfo_arr[$i])[2]; $SocialInfos[] = array("SocialTitle" => trim($SocialTitle), "SocialIco" => trim($SocialIco), "SocialUrl" => trim($SocialUrl)); } } } ?> <section class="top-social"> <?php foreach ($SocialInfos as $item) : ?> <li class="<?php echo $item['SocialTitle']; ?>"> <a class="<?php echo $item['SocialTitle']; ?>A" href="<?php echo $item['SocialUrl']; ?>" target="_blank" title="<?php echo $item['SocialTitle']; ?>"> <img src="<?php echo $item['SocialIco']; ?>" /> </a> </li> <?php endforeach; ?> </section> <?php endif; ?>{card-default label="位置" width="75%"}{/card-default}H5手机端{message type="success" content="Joe/public/header.php"/} <!-- PE侧栏社交信息 --> <?php if ($this->options->SocialInfo && (($this->options->SocialSwitch === 'on') || ($this->options->SocialSwitch === 'on2'))) : ?> <?php $SocialInfo = $this->options->SocialInfo; if ($SocialInfo) { $SocialInfo_arr = explode("\r\n", $SocialInfo); if (count($SocialInfo_arr) > 0) { for ($i = 0; $i < count($SocialInfo_arr); $i++) { $SocialTitle = explode("||", $SocialInfo_arr[$i])[0]; $SocialIco = explode("||", $SocialInfo_arr[$i])[1]; $SocialUrl = explode("||", $SocialInfo_arr[$i])[2]; $SocialInfos[] = array("SocialTitle" => trim($SocialTitle), "SocialIco" => trim($SocialIco), "SocialUrl" => trim($SocialUrl)); } } } ?> <section class="top-social pe-social"> <?php foreach ($SocialInfos as $item) : ?> <li class="<?php echo $item['SocialTitle']; ?>"> <a class="<?php echo $item['SocialTitle']; ?>A" href="<?php echo $item['SocialUrl']; ?>" target="_blank" title="<?php echo $item['SocialTitle']; ?>"> <img src="<?php echo $item['SocialIco']; ?>" /> </a> </li> <?php endforeach; ?> </section> <?php endif; ?>{card-default label="位置" width="75%"}{/card-default}后台设置{message type="success" content=" Joe/functions.php"/} // 侧栏社交信息开关 $SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'SocialSwitch', array( 'off' => '关闭（默认）', 'on' => '开启PC社交信息', 'on1' => '开启PE社交信息', 'on2' => '同时开启PC与PE社交信息', ), 'off', '是否启用侧栏社交信息', '介绍：开启后，侧栏展示社交信息功能（必须填写下面的侧栏社交信息）' ); $SocialSwitch->setAttribute('class', 'joe_content joe_aside'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialSwitch->multiMode()); //侧栏社交信息 $SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea( 'SocialInfo', NULL, NULL, '侧栏社交信息', '介绍：用于设置侧栏社交信息, 一行最多5个, 大于5个自动换行<br /> 格式：社交简称(微信必须固定格式WeChat) || 社交图标|| 跳转链接(微信写二维码链接)<br /> 微信: WeChat||https://fuuuy.cn/usr/uploads/image/wechat.png||https://www.itbunan.xyz/usr/uploads/image/gongzhonghao.png <br /> 其他：一行一个，代表一个社交信息' ); $SocialInfo->setAttribute('class', 'joe_content joe_aside'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialInfo);{card-default label="效果" width="75%"}{/card-default}加载自定义css和js{message type="success" content="Joe/public/include.php"/}<!--自定义css --> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.min.css'); ?>"> <!--自定义js --> <script src="<?php $this->options->themeUrl('assets/js/custom.min.js'); ?>"></script>

Joe主题首页文章按修改时间排序 前言{callout color="#f0ad4e"}Joe主题首页的文章是按照创建时间排序的，以前写的文章更新内容后重新发布，然后想看看效果，需要翻半天才找到。修改一下代码，使首页显示的文章按照修改时间排序，最近修改的放前面。{/callout}修改方法{message type="success" content="本以为很简单，结果修改后不生效。研究了半天，发现created字段是js传过来的。又懒得去动js代码。在后端加个判断解决。"/}//修改文件 usr/themes/Joe/core/widget.php //新增代码 //将created改为modified if ($this->parameter->type == 'created') { $this->parameter->type = 'modified'; }{card-default label="代码" width="75%"}{/card-default}

Joe主题开启全站置灰功能 前言{callout color="#f0ad4e"}重要的纪念日，需要开启全站置灰功能。记录一下开机步骤。{/callout}参考： 纪念日网页变灰的Joe主题设置方式 {card-default label="效果" width="90%"}{/card-default}设置方法functions.php{message type="success" content="文件最后添加代码"/} // 全站置灰 $websiteChgGray = new Typecho_Widget_Helper_Form_Element_Select( 'websiteChgGray', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'on', '是否启用全站置灰', '介绍：开启后，网站所有信息全部变成黑白' ); $websiteChgGray->setAttribute('class', 'joe_content joe_global'); $form->addInput($websiteChgGray->multiMode());public/include.php{message type="success" content="文件最后添加"/}<?php if ($this->options->websiteChgGray === 'on') : ?> <style>html { filter: grayscale(1); }</style> <?php endif; ?>

IT技术家园app部署上线过程记录 前言{callout color="#f0ad4e"}博客运行一段时间了，按耐不住一颗折腾的心。又想要app和小程序了，发现 不暇 大神分享的ruleapi和ruleapp。替自己的博客也上线app和小程序。此篇文章记录配置过程和后续改造过程，持续更新...{/callout}ruleapiRuleApi一键安装&更新脚本，傻瓜式配置，超快速运行nginx配置 server { listen 443 ssl http2; server_name api.itbunan.xyz; server_tokens off; ssl_certificate /etc/nginx/cert/api.itbunan.xyz_bundle.crt; ssl_certificate_key /etc/nginx/cert/api.itbunan.xyz.key; ssl_protocols TLSv1.2 TLSv1.3; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload"; location ^~ / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token,key'; if ( $request_method = 'OPTIONS' ) { return 200; } proxy_pass http://172.17.0.10:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header REMOTE-HOST $remote_addr; } }ruleapp{message type="success" content="未标明版本号的，都需要改。标明版本号的，只特定版本改即可。"/}参考：RuleAPP详细设置教程，手把手教你学会这款Typecho客户端manifest.json{callout color="#f0ad4e"}应用名称：IT技术家园应用描述：IT技术家园，记录自己的技术成长{/callout}{card-default label="配置" width="70%"}{/card-default}pages.json"navigationBarTitleText": "IT技术家园",utils/api.js//API var API_URL = 'https://api.itbunan.xyz/' var WEB_URL = 'https://www.itbunan.xyz/' var GroupUrl = 'http://wpa.qq.com/msgrd?v=3&uin=1940728253&site=qq&menu=yes' var GithubUrl = 'https://github.com/buxia97/RuleApp' //用户协议 var appName="IT技术家园"; var appEmail = "1940728253@qq.com"; //积分 var currencyName = "家园币"; //头衔 var rankList = ["小白","萌新","入门","熟手","大佬","巨佬","传说","古神"]; //普通文章 var linkRule =WEB_URL+"/archives/{cid}.html/" //独立页面 var pageRule =WEB_URL+"/{slug}.html" //首页 var swiperid = 70; //使用攻略文章id，typecho文章表cid var raiders = 143; //意见反馈文章id，typecho文章表cid var feedback = 52; //关于我们文章id，typecho文章表cid var aboutme = 56; //小程序端是否开启评论，1位开启，0位关闭。 var isComment = 0;热门专题{message type="success" content="用管理员账号登录->在内容管理中设置"/}Joe自定义标签处理{message type="success" content="规则文件: core/short.php"/}修改page/contents/info.vue中的markHtml函数 {card-default label="代码" width="80%"}{/card-default}首页分类{card-default label="分类设置" width="75%"}{/card-default}{card-describe title="home.vue"}<!-- 第182行修改，去掉最后 v-if!--> <view class="cu-item" :class="item.mid==TabCur?'text-blue cur':''" v-for="(item,index) in metaList" :key="index" @tap="tabSelect" :data-id="item.mid"> {{item.name}} </view>//第855行添加 //getMetaList函数 ... for(var i=0;i<list.length;i++){ //console.log(list[i].name); if (list[i].name != '运维' && list[i].name != '数据库' && list[i].name != '开发' && list[i].name != '项目' && list[i].name != '综合' ){ meta.push(list[i]); } } //that.metaList = meta.concat(list); that.metaList = meta; ...{/card-describe}apk打包{message type="info" content="Android(apk包) -> 传统打包"/}版本更新ruleapi更新代码docker exec -it myblog_java_1 sh sh /opt/ruleapi.sh update通过后台更新数据库{card-default label="更新" width="75%"}{/card-default}ruleapp{callout color="#e60a57"}去ucloud市场下载 最新稳定版 {/callout}# 备份自己的版本 mv RuleApp RuleApp-bak # 解压下载的新版本 mkdir RuleApp && cd RuleApp unzip buxia97-ruleapp_1.3.1.zip && rm buxia97-ruleapp_1.3.1.zip # 用老版本mainfes.json 和 unpackage 文件夹覆盖 cp -r ../RuleApp-bak/unpackage . cp ../RuleApp-bak/manifest.json . # 自己修改的代码处理 ## 按照上面的步骤重新更改一遍更新记录2022-03-18ruleapi：1.25 -> 1.31ruleapp：1.3.1 -> 1.3.2app修改记录 # 用1.3.1版本 mainfes.json 和 unpackage 文件夹替换 cp -r ../RuleApp-bak/unpackage . cp ../RuleApp-bak/manifest.json . ## 按照上面ruleapp设置的步骤重新更改一遍

Joe主题手机导航栏推荐标签过滤 前言{callout color="#f0ad4e"}通过手机访问 博客 ,发现在手机浏览器模式下，有一些自己定义的页面和推荐的网站布局不友好。索性加了个判断在手机模式下不显示这些不友好的标签。{/callout}{card-default label="效果" width="50%"}{/card-default}实现{message type="success" content="编辑文件： usr/themes/Joe/public/header.php，修改代码"/}<!-- 查找 joe_header__slideout-menu 标签 --> <!-- 页面 --> <ul class="slides panel-body"> <?php foreach ($pages->stack as $item) : ?> <?php if (in_array($item['title'], array('美图', '服务', '微语', '留言', '邻居', '我的足迹', '本站统计', '版本历史'))): ?> <li> <a class="link <?php echo $this->is('page', $item['slug']) ? 'current' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a> </li> <?php endif; ?> <?php endforeach; ?> </ul> <!-- 推荐 --> <ul class="slides panel-body"> <?php foreach ($custom as $item) : ?> <?php if (in_array($item['title'], array('M商城', '网址导航'))): ?> <li> <a class="link" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"><?php echo $item['title'] ?></a> </li> <?php endif; ?> <?php endforeach; ?> </ul>

Joe主题文章自动随机输入一条评论功能 前言{callout color="#f0ad4e"} 博客运行有一段时间了，一些文章需要评论才能看到全部。结果收到评论，大部分是666，111，adf之类的。所以新增一个功能，在加载的时候，自己自动输入一条文字评论。{/callout}{card-default label="评论" width="75%"}{/card-default}实现{message type="success" content="修改 core/function.php, 新增函数random_comment"/}/* 随机一言评论功能 */ function random_comment() { $comments = array('对小白真的很友好，写的很全面。', '终于找到这篇文章了，感谢作者的分享！', '喜欢这篇文章，作者666，文章真棒!', '支持博主，一定多分享', '这篇文章写的真不错，真详细，点个赞。', '这篇文章肯定会火，作者666大顺', '受益匪浅，感谢博主。', '学习到了，感谢博主'); return $comments[rand(0,count($comments)-1)]; }{message type="success" content="修改 public/comment.php ，评论加载"/} <textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"><?php echo random_comment(); ?></textarea>

Joe主题壁纸页面模板代码改造 前言{callout color="#f0ad4e"}Joe主题有写好的壁纸模版，直接启用即可。刚开始博主感觉分类太多了，有些分类也不是自己喜欢的。就没有启用，最近有时间研究了一下代码。改造了一下，只留下自己感兴趣的分类。{/callout}核心代码{message type="success" content="主要是core/route.php文件内的两个函数，调用了360的壁纸接口，原版如下"/}/* 获取壁纸分类 已测试 √ */ function _getWallpaperType($self) { $self->response->setStatus(200); $json = _curl("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $res['data'] ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } } /* 获取壁纸列表 已测试 √ */ function _getWallpaperList($self) { $self->response->setStatus(200); $cid = $self->request->cid; $start = $self->request->start; $count = $self->request->count; $json = _curl("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $res['data'], "total" => $res['total'] ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } }优化{message type="success" content="主要优化 _getWallpaperType 函数，去掉不想要的分类"/}隐藏内容，请前往内页查看详情{card-default label="效果" width="95%"}{/card-default}{message type="success" content="首页美女发现是固定的，又懒得翻页。加了个随机，每次刷新都是不同的。"/}/* 获取壁纸列表 已测试 √ */ function _getWallpaperList($self) { $self->response->setStatus(200); $cid = $self->request->cid; //前50页随机显示图片 if (($cid == 6)&&($self->request->start < 2400)) { $start = $self->request->start + rand(1,4800); }else { $start = $self->request->start; } $count = $self->request->count; //$file=dirname(__FILE__).'/debug.log'; //file_put_contents($file, $cid."|".$start."|".$count."\n",FILE_APPEND); $json = _curl("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome"); $res = json_decode($json, TRUE); if ($res['errno'] == 0) { $self->response->throwJson([ "code" => 1, "data" => $res['data'], "total" => $res['total'] ]); } else { $self->response->throwJson([ "code" => 0, "data" => null ]); } }

Joe主题footer添加站长最近登录时间 前言{callout color="#f0ad4e"}参考别人的博客 尘遇 ，继续优化自己的博客。{/callout}{card-default label="效果" width="75%"}{/card-default}优化代码{message type="success" content="进入主题目录 usr/themes/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); }{message type="success" content="在 public/footer.php 内调用"/} <div class="item"> <?php $this->options->JFooter_Left() ?> </div> <--! 新增 --> <div class = "item"> <span>【站长 <strong><?php get_last_login(1); ?></strong> 在线】</span> </div> <?php if ($this->options->JBirthDay) : ?> <div class="item run"> <span>已运行 <strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒</span> </div> <?php endif; ?>

博客优化-利用tinify进行图片无损压缩 前言{callout color="#f0ad4e"}博客搭建有一段时间了，随着内容的增多，感觉在打开的时候加载时间越来越长。所以就想优化一下，特此记录优化过程。{/callout}分析{callout color="#f0ad4e"} PageSpeed 是我经常用的用来分析页面加载时间比较喜欢的一个用具。 使用也很简单，输入域名点击分析即可。{/callout}{card-default label="分析结果" width="90%"}{/card-default}{message type="error" content="优化建议第一项就是图片大小。而博主上传的图片也没有经过压缩过。是应该优化一下了。"/}图片压缩脚本{callout color="#f0ad4e"}参考网上的压缩脚本，改了一下，更适合自己使用。利用tinify模块做图片压缩效果很好，就是每月有500次使用限制。目前博主的内容不多，完全够用。tinify的key申请地址 {/callout}{message type="success" content="压缩脚本内容，"/}隐藏内容，请前往内页查看详情{message type="success" content="运行脚本，自动记录断点，中断后重新运行即可。"/}python3 img_cop.py{card-default label="运行过程" width="75%"}{/card-default}压缩效果{message type="success" content="压缩效果很明显，肉眼也看不出区别"/}{card-default label="大小对比" width="75%"}{/card-default}访问效果对比{message type="success" content="再次运行PageSpeed，对比效果。由9s降到了4s"/}{card-default label="对比效果" width="90%"}{/card-default}

Joe主题导航栏标签添加角标 前言{callout color="#f0ad4e"}Joe主题是一款非常优秀的主题。使用了一段时间，真是太爱了。我在浏览别人的网站的时候发现有的标签有一个小的角标，用来标注重点。自已也想弄一个，一顿折腾，终于搞出来了，特此记录。{/callout}Joe项目地址 {card-default label="效果图" width="75%"}{/card-default}制作方法{message type="success" content="登录后台-->设置外观-->全局设置-->自定义CSS"/}.ff-red { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #efd3b0 0%, #eb4444 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }{message type="success" content="编辑header.php"/}/* 路径: usr/themes/Joe/public/header.php 找到导航栏位置，修改代码 */ <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?> <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?> <?php if ($item['title'] == '服务') : ?> <span class="ff-red">付费</span> <?php endif; ?> </a> <?php endforeach; ?>