构造你独一无二的博客美化：typecho joe主题优化日志

清疚 2023-09-27 14:04 113阅读 0赞

博主使用了typecho进行博客网站的建立，也进行了一定程度上的修改优化。配置为 1 核 2g 轻量服务器  
效果可看博客主页：[yumuing‘s blog][yumuing_s blog]  
如下：

![在这里插入图片描述][113e0472da964481bb9ac18c269acf2c.png]

网站加载效果（无全站CDN）：

![image.png][]

建议使用最新 Joe7.7.1 版本，较以往版本带来了更快的网站加载速度

### 去除首页前台登录按钮，登陆后，显示登录状态，不登录即消失 ###

/usr/themes/Joe/public/header.php  
注释第 217 行到 218 行的 html 代码  
即包含登录注册的 `<?php else : ?>` 代码

如下：  
![在这里插入图片描述][9b911397f48e4d2a85a8455d1abbba91.png]

### 修复文章未收录，却仍显示已收录的 Bug ###

本博客使用的是Joe主题，7.3.3就存在这个问题了，现在升级到了最新版7.7.1，发现此问题仍未解决  
问题详情:无论什么文章都会显示已收录，但实际未收录。  
解决办法：  
修改主题目录下core/route.php文件  
在第143行加入  
代码：

$header[] = "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9";
    $ch = curl_init();

### 添加手机端公告 ###

效果  
![手机端公告][8ff777a2a61e502b68bc6913a38a055b.png]  
添加手机端代码位置：  
/usr/themes/Joe/public/header.php  
在 310 行处添加改代码即可  
即在以下代码后添加

<div class="joe_header__slideout-author">
        <img width="50" height="50" class="avatar lazyload" src="<?php _getAvatarLazyload(); ?>" data-src="<?php $this->options->JAside_Author_Avatar ? $this->options->JAside_Author_Avatar() : _getAvatarByMail($this->authorId ? $this->author->mail : $this->user->mail) ?>" alt="博主昵称" />
        <div class="info">
          <a class="link" href="<?php $this->options->JAside_Author_Link() ?>" target="_blank" rel="noopener noreferrer nofollow"><?php $this->options->JAside_Author_Nick ? $this->options->JAside_Author_Nick() : ($this->authorId ? $this->author->screenName() : $this->user->screenName()); ?></a>
          <p class="motto joe_motto"></p>
        </div>
     </div>

添加手机端代码:

<div class = item style="height:30px">
         <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
           <path d="M656.261 347.208a188.652 188.652 0 1 0 0 324.05v-324.05z" fill="#F4CA1C"></path>
           <path d="M668.35 118.881a73.35 73.35 0 0 0-71.169-4.06l-310.01 148.68a4.608 4.608 0 0 1-2.013.46h-155.11a73.728 73.728 0 0 0-73.728 73.636v349.64a73.728 73.728 0 0 0 73.728 73.636h156.554a4.68 4.68 0 0 1 1.94.43l309.592 143.196a73.702 73.702 0 0 0 104.668-66.82V181.206a73.216 73.216 0 0 0-34.453-62.326zM125.403 687.237v-349.64a4.608 4.608 0 0 1 4.608-4.608h122.035v358.882H130.048a4.608 4.608 0 0 1-4.644-4.634zm508.319 150.441a4.608 4.608 0 0 1-6.564 4.193L321.132 700.32V323.773l305.97-146.723a4.608 4.608 0 0 1 6.62 4.157v656.471zM938.26 478.72H788.01a34.509 34.509 0 1 0 0 69.018H938.26a34.509 34.509 0 1 0 0-69.018zM810.01 360.96a34.447 34.447 0 0 0 24.417-10.102l106.245-106.122a34.524 34.524 0 0 0-48.84-48.809L785.587 302.08a34.509 34.509 0 0 0 24.423 58.88zm24.417 314.609a34.524 34.524 0 1 0-48.84 48.814L891.832 830.52a34.524 34.524 0 0 0 48.84-48.809z" fill="#595BB3"></path>
         </svg>
         <a href="https://yumuing.top/" target="_blank" rel="noopener noreferrer nofollow"display: inline-block;>网安备案！关闭本站评论功能！</a>
     </div>

### 添加来访信息 ###

效果：  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvf8iPp3-1682661508454)(null)\]][img-uvf8iPp3-1682661508454_null]

教程：  
复制下方代码  
粘贴到网站底部代码区  
Joe主题可以直接放到全局设置—js里  
代码：

<div id="fps" style="z-index:5;position:fixed;bottom:3px;left:3px;color:#2196F3;font-size:10px;-webkit-pointer-events: none;    -moz-pointer-events: none;    -ms-pointer-events: none;    -o-pointer-events: none;"></div>    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kaliisra/myblogstatic/kehuduan-js/fetch.min.js"></script>    <script src="https://cdn.gmit.vip/layer/3.1.1/layer.js" type="text/javascript" charset="utf-8"></script>    <script>    /*网站打开提醒代码开始*/    $(function(){
                if(/*getCookie('msg') !=*/ 1){
                    var t = document.createElement("a");            t.href = document.referrer;            var msgTitle = t.hostname;            var name = t.hostname.split(".")[1];            if("" !== document.referrer){
                        switch (name) {
                            case 'bing':                        msgTitle = '必应搜索';                        break;                    case 'baidu':                        msgTitle = '百度搜索';                        break;                    case 'so':                        msgTitle = '360搜索';                        break;                    case 'google':                        msgTitle = '谷歌搜索';                        break;                    case 'sm':                        msgTitle = '神马搜索';                        break;                    case 'sogou':                        msgTitle = '搜狗搜索';                        break;                    default:                        msgTitle =  t.hostname;                };            };            var time = (new Date).getHours();            var msg = '';            23 < time || time <= 5 ? msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？":            5< time && time <= 7 ? msg = "早上好！一日之计在于晨，美好的一天就要开始了！":            7< time && time <= 11 ? msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！":            11< time && time <= 14 ? msg = "中午了，工作了一个上午，现在是午餐时间！":            14< time && time <= 17 ? msg = "午后很容易犯困呢，今天的运动目标完成了吗？":            17< time && time <= 19 ? msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~":            19< time && time <= 21 ? msg = "晚上好，今天过得怎么样？":            21< time && time <= 23 && (msg = "已经这么晚了呀，早点休息吧，晚安~");            $.ajax({
                        type:"get",                url:"https://api.gmit.vip/Api/UserInfo/",                async:true,                success:function(data){
                            window.info = data;                    layer.msg("Hi~ 来自"+ data.data.location + '~<br/>通过 '+msgTitle+' 进来的朋友！<br/>使用 '+ data.data.os +"<br/>"+ data.data.browser +' 访问本站！' + '<br/>' + msg);                    var showFPS = (function(){
                                var requestAnimationFrame =                            window.requestAnimationFrame ||                            window.webkitRequestAnimationFrame ||                            window.mozRequestAnimationFrame ||                            window.oRequestAnimationFrame ||                            window.msRequestAnimationFrame ||                            function(callback) {
                                        window.setTimeout(callback, 1000/60);                            };                        var e,pe,pid,fps,last,offset,step,appendFps;                         fps = 0;                        last = Date.now();                        step = function(){
                                    offset = Date.now() - last;                            fps += 1;                            if( offset >= 1000 ){
                                    last += offset;                            appendFps(fps);                            fps = 0;                            };                            requestAnimationFrame( step );                        };                        appendFps = function(fps){
                                    var settings = {
                                        timeout: 5000,                                logError: true                            };                            $('#fps').html('<span style="float:left;">'+fps+'FPS</span><br/><span style="float:left">'+window.info.data.os+'</span><br/><span style="float:left;margin-top:1px;">'+window.info.data.browser+'</span><br/><span style="float:left;margin-top:1px;">'+window.info.data.location+'</span><br/><span style="float:left;margin-top:1px;"></span>');                        };                        step();                    })();                }            });        };    });    </script>

### 设置复制文本版权说明 ###

效果：  
著作权归作者所有。  
商业转载请联系作者获得授权，非商业转载请注明出处。  
作者：yumuing 博客：做技术的朝拜者  
来源：https://yumuing.top/archives/7.html  
链接：https://yumuing.top/

教程：  
只要在主题里的页脚文件 foot.php 或者 footer.php 最下面放入以下代码就可以了。  
然后就完成了，别人复制你网站的东西就会有版权说明了，记得把上面代码中的名字以及网站网址，修改成你自己的至此就可以实现了。  
在 joe 中代码位置为 /usr/themes/Joe/public/footer.php  
修改位置为 footer.php `<script>` 前  
代码如下：

function setClipboardText(event) {
        
        var clipboardData = event.clipboardData || window.clipboardData;
        if (clipboardData) {
        
            event.preventDefault();
     
            var htmlData = ''
                + '著作权归作者所有。<br>'
                + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
                + '作者：yumuing 博客：做技术的朝拜者<br>'
                + '来源：' + window.location.href + '<br>'
                + '链接：https://yumuing.top/<br><br>'
                + window.getSelection().toString();
            var textData = ''
                + '著作权归作者所有。\n'
                + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
                + '作者：yumuing 博客：做技术的朝拜者\n'
                + '来源：' + window.location.href + '\n'
                + '链接：https://yumuing.top/\n\n'
                + window.getSelection().toString();
     
            clipboardData.setData('text/html', htmlData);
            clipboardData.setData('text/plain',textData);
        }
    }

### 网站设置 ###

博主头像、Favicon 设置：网站标签页名字前方的图标

1.  使用 https://tool.lu/favicon 制作图标，建议原 Favicon 图片为透明背景的 PNG 图片。
2.  使用[图片转 BASE64 编码 | 菜鸟工具 runoob.com][BASE64 _ _ _ runoob.com] 进行图标 Base64 地址化
3.  上传至后台

图片压缩建议使用：[图片压缩 - 在线工具 - OKTools][- _ - OKTools]，其他网站无法随意定义压缩质量。  
由于图标展示面较小，可以使用压缩质量为 10

静态资源cdn:

1.  将joe目录下静态资源，即主题目录中joe下的assets推送至github，设置公开并发布版本，方便静态资源管理。
2.  在joe全局设置下的自定义静态资源cdn地址填写：https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径，如：https://cdn.jsdelivr.net/gh/yumuing/typecho@1.0/

开启gzip压缩：  
打开typecho目录下的 index.php，并在开头添加 ob\_start(‘ob\_gzhandler’); 即可。

在网站根目录下创建并设置 robots.txt,方便搜索引擎爬虫爬取。

User-agent: *
    Allow: /*.html$
    Allow: /usr
    Allow: /*.png$
    Allow: /*.jpg$
    Allow: /*.jepg$
    Allow: /*.gif$
    Allow: /*.bmp$
    Disallow: /admin/
    Disallow: /install/
    Disallow: /var/
    Disallow: /config.inc.php
    Disallow: /install.php
    Disallow: /.js
    Disallow: /.css
    Disallow: /feed
    Sitmap: 你的域名/sitemap.xml

可借助 你的域名/robots.txt 查看是否设置成功。之后在百度收录平台完成 robots.txt 的更新。  
![robots][]

### 站点伪静态 ###

Nginx Web服务器设置伪静态规则是通过调用.conf后缀结尾的文件来实现的，Typecho Nginx伪静态如下：

if !−e$requestfilename {
        rewrite ^.∗/index.php1 last;
    }

复制粘贴上方伪静态规则，保存为typecho.conf文件，然后在网站配置文件调用，由于Nginx安装路径不同等影响，实际请以当前Web环境设置为准。

开启地址重写功能：  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IK4jL9R0-1682661508484)(null)\]  
若提示“重写功能检测失败, 请检查你的服务器设置”。无需理会，直接开启即可。在开启地址重写功能之后，记得修改自定义文章路径为带html结尾的规则。  
地址栏会自动重写为以 html 为结尾的，方便百度等搜索引擎收录。

### 插件列表 ###

*  字体库插件：FontLibs
    
    包含以下字体：
    
    1.  HarmonySanc鸿蒙字体
    2.  方正像素
    3.  方正兰亭细黑
    4.  方正北魏楷书简体
    5.  方正细俊黑简体
    6.  汉仪中楷简
    7.  汉仪劲楷简
    8.  汉仪粗仿宋简
    9.  造字工房典黑超细体
    10. 造字工房尚黑常规体
    11. 造字工房悦圆
    12. 潮玩嬉戏体
    13. 快乐灵影体

本博客采用 HarmonySanc 鸿蒙字体，加载速度快，样式美观。

*  LaTeX插件：TypechoLaTeX

由于 typecho 较为简洁，并没有自带 LaTeX 的解析，无法很好地呈现美观的数学公式，故采用本插件解决问题。插件支持两个风格的渲染方式：MathJax 和 KaTex。博客采用 MathJax 风格。

*  站点地图插件：Sitemap

虽然 Joe 自带站点地图功能，但其功能较为简单，无法满足需求，建议使用本插件完成设置。  
功能列表：

1.  开启 Sitemap.xml
2.  百度自动推送
3.  设置推送优先级、更新频率、显示控制

![image.png][image.png 1]

*  外链转内链及短链接插件：ShortLinks

博客网站内不属于网站域名的链接越多，越可能不被百度所收录，所以必须将网站内的外部链接转换成与本网站域名相关的链接，通过 Nginx 进行转发，可采用本插件快速实现，效果可前往 [yumuing‘s blog][yumuing_s blog] 查看，当然，有时某些推广链接时常发生变化，自身又需要长期推广，但推广链接分布位置较多，修改麻烦，所以，采用自定义短链接的方式，即可实现一次修改，处处修改。

![image.png][image.png 2]

*  补充蜘蛛插件加强版

可以记录搜索引擎蜘蛛的种类、爬行时间、爬行的页面、来源的IP。有利于监控站点的被蜘蛛抓取的情况，了解蜘蛛的习惯。可以为站点的SEO提供很多参考数据。

*  PostToBingIndexNow：必应 seo 提交插件

需要使用必应 indexNow 服务，请先自行进入对应网站的 [必应站长工具][Link 1] ，保证能够手动提交网址。再进入 [IndexNow][] 查看密钥，如下：  
![密钥][a883f2d050342cca2889277bba508ebb.png]  
复制密钥，再下载密钥文件，并上传到服务器对应网站根目录，保证能够使用域名/密钥名.txt访问到即可。www.example.com：你的网站域名  
在浏览器地址栏输入  
https://www.bing.com/indexnow?url=http://www.example.com/product.html&key=刚刚复制的密钥文本  
发送即可。  
使用 postman 进行 post 提交。如下：  
![postman][]  
提交成功后在站长后台 index 处即可查看到提交的 url。  
具体复制信息如下：

Content-Type: application/json; charset=utf-8
    {
      "host": "www.example.org",
      "key": "894de253b7fd4c8fa75c7367d70f5ec3",
      "keyLocation": "https://www.example.org/894de253b7fd4c8fa75c7367d70f5ec3.txt",
      "urlList": [
          "https://www.example.org/url1",
          "https://www.example.org/folder/url2",
          "https://www.example.org/url3"
          ]
    }

将复制的密钥输入到对应插件的 key 中，并把日志选项输入为 1 即可。

本文所提到的所有资源均可在[typecho joe主题优化日志 - yumuing‘s blog][typecho joe_ - yumuing_s blog]获得。

![求点赞转发][5f8d005825c0b9f6fc4b83513b0b0811.png]

[yumuing_s blog]: https://yumuing.top/
[113e0472da964481bb9ac18c269acf2c.png]: https://img-blog.csdnimg.cn/113e0472da964481bb9ac18c269acf2c.png
[image.png]: https://img-blog.csdnimg.cn/img_convert/5566af0f9af366694a560b3f295ff0e2.png
[9b911397f48e4d2a85a8455d1abbba91.png]: https://img-blog.csdnimg.cn/9b911397f48e4d2a85a8455d1abbba91.png
[8ff777a2a61e502b68bc6913a38a055b.png]: https://img-blog.csdnimg.cn/img_convert/8ff777a2a61e502b68bc6913a38a055b.png
[img-uvf8iPp3-1682661508454_null]: https://img-blog.csdnimg.cn/d0c9680dc7354079846fb128fdf090a2.png
[BASE64 _ _ _ runoob.com]: https://c.runoob.com/front-end/59/#:~:text=Base64%20%E5%B8%B8%E7%94%A8%E4%BA%8E%E5%9C%A8%E9%80%9A%E5%B8%B8%E5%A4%84%E7%90%86%E6%96%87%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%9A%84%E5%9C%BA%E5%90%88%EF%BC%8C%E8%A1%A8%E7%A4%BA%E3%80%81%E4%BC%A0%E8%BE%93%E3%80%81%E5%AD%98%E5%82%A8%E4%B8%80%E4%BA%9B%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8C%85%E6%8B%AC%20MIME%20%E7%9A%84%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6%E5%8F%8A%20XML,%E7%9A%84%E4%B8%80%E4%BA%9B%E5%A4%8D%E6%9D%82%E6%95%B0%E6%8D%AE%E3%80%82%20%E5%9B%BE%E7%89%87%E7%9A%84%20BASE64%20%E7%BC%96%E7%A0%81%E5%B0%B1%E6%98%AF%E5%8F%AF%E4%BB%A5%E5%B0%86%E4%B8%80%E5%B9%85%E5%9B%BE%E7%89%87%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81%E6%88%90%E4%B8%80%E4%B8%B2%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%AF%A5%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%BB%A3%E6%9B%BF%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80%EF%BC%8C%E4%BB%8E%E8%80%8C%E4%B8%8D%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E5%9B%BE%E7%89%87%E7%9A%84%20URL%20%E5%9C%B0%E5%9D%80%E3%80%82
[- _ - OKTools]: https://oktools.net/tinyimg
[robots]: https://img-blog.csdnimg.cn/img_convert/94c2ab35f494a37b987e4b4af0e03754.png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/a789a68724f45836f9a81174535c64d8.png
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/5dbcc7d6ba71320a82642f1d29e55e8f.png
[Link 1]: https://www.bing.com/webmasters/home
[IndexNow]: https://www.bing.com/indexnow
[a883f2d050342cca2889277bba508ebb.png]: https://img-blog.csdnimg.cn/img_convert/a883f2d050342cca2889277bba508ebb.png
[postman]: https://img-blog.csdnimg.cn/img_convert/a8afb96497f728a9d538b7b90852d799.png
[typecho joe_ - yumuing_s blog]: https://yumuing.top/archives/7.html
[5f8d005825c0b9f6fc4b83513b0b0811.png]: https://img-blog.csdnimg.cn/img_convert/5f8d005825c0b9f6fc4b83513b0b0811.png