Typecho 移植自Gridea的主题 Pure

Typecho维基君 • 主题列表 • 2321次浏览 • 发布 2023-06-22 • 更新 2023-06-22 • 立即下载

极致加速的V2Ray 助您畅享全球网络 & 搬瓦工VPS最新优惠码

🛜自用大流量超低月租手机卡推荐榜单 #拒绝流量焦虑

主题简介

Pure是一款由叶开移植自Gridea For Pure的Typecho主题。

第一眼看到这款主题就被她所吸引,简洁美观大气很适合我文艺生活类博客写作。我花了一天就移植好了，但是我博客图片比较多为了用户体验增加了pjax和AJAX评论。

主题特色

一款移植 Gridea For Pure 的主题，默认内置 "简约白"、"暗夜黑"、"银光灰"、"墨草绿" 4 种配色方案。另外还：

支持自定义配色。
移动端页面适配。
图片幻灯片预览。
文章图片懒加载。
无刷新PJAX支持。
AJAX评论支持。
手动文章置顶。
内置访客访问自动推送文章到百度。

主题教程

文章置顶

哈哈这是我搞静态博客的时候的一大特色，我知道typecho有置顶插件或者非置顶插件实现置顶的办法。但是我感觉太有麻烦还要查询数据库添加一大堆代码，其实无非就是复制粘贴的事情！！

步骤如下:

1.找到要置顶文章，右键查看源代码

2.添加 <span class="sticky-top-flag gt-bg-accent-color-first">置顶</span> 插入到A链接前面，粘贴到主题外挂设置 文章手动置顶 就行

<div class="post gt-bg-theme-color-second">
               <div class="post-left">
                              <div>
                                     <span class="sticky-top-flag gt-bg-accent-color-first">置顶</span> 

                                             <a href="https://xiamuyourenzhang.cn/article/20.html"> <span class="post-title gt-c-content-color-first">漳州龙海南太武爬山游记</span> 
                                             </a>
                              </div>
                              <div class="gt-post-content post-abstract gt-c-content-color-second">
                                             <p>阿辉那天问我要不要去爬山，他每周天休息都会去爬山风雨无阻。我一想他每次都叫我去，我总拒绝不好（ps：我太懒了）于是就答应约好这周天一起去“漳州南太武”一起爬山。声明本文图片拍摄于：2019年11月24号 文章均为回忆，有些细节记得不是很清楚了本文出现人物：啊辉 开泰 两个我的好朋友 <夜爬滚蛋谷>就是和他们一起去的！本人没有文笔，就...</p>
                              </div>
                              <div class="post-info">
                                             <time class="post-time gt-c-content-color-first">发布于 · 2020-03-15 ·</time>#    <a href="https://xiamuyourenzhang.cn/category/article/">生活记录</a> 
                                             <!-- printTag($this); php 自定义标签样式-->
                              </div>
               </div>
               <a href="https://xiamuyourenzhang.cn/article/20.html" class="post-feature-image" style="background-image: url('https://xiamu-1251327481.cos.ap-guangzhou.myqcloud.com/img/18/2020-0310-1652-50.jpg?imageMogr2/format/webp')"></a>
</div>

百度自动推送

介绍

原来是有个js版本的访客访问百度自动推送，现在百度关闭了。于是我参考PHP版本的折腾了一个,先查询是百度否以收录文章没有收录就推送~

推送效果还是很NICE的,推多少就看你有多少人访问了!!!

使用

使用前先修改 comments.php 140行的API 接口为你自己的~！修改后在去主题设置开启自动推送，否则访问文章将卡死无法访问！！

申请地址 https://ziyuan.baidu.com/linksubmit/index?site=

友情链接页面

以前用的友情链接插件，后面感觉很麻烦！于是百度到了 "无插件实现 typecho 独立友链页面" 不需要插件，只需按以下格式就能使用！

1.使用前先在独立页面启用模板

按以下格式添加到<ul id="flinks"></ul>即可，单数的时候会错位需要添加一个占位！

<ul id="flinks">

<li>博客名称</li>
<li>博客地址</li>
<li>博客头像</li>
<li>博客简介</li>

<li>博客名称</li>
<li>博客地址</li>
<li>博客头像</li>
<li>博客简介</li>

<!-- 单数使用以下 占位 -->

<li>暂无</li> 
<li>#</li>
<li>https://secure.gravatar.com/avatar/b513908e94857882cebbcc74d18843d3?s=60&d=mm&r=G</li>
<li>待添加</li>

</ul>

3.快捷插入

在主题面板提供了一个快捷插入,点击即可使用

图片排版

<div class="tp">
<div><img src="https://xiamu-1251327481.cos.ap-guangzhou.myqcloud.com/img/19/2020-0318-1517-29.jpg?imageMogr2/format/webp"></div>
<div><img src="https://xiamu-1251327481.cos.ap-guangzhou.myqcloud.com/img/19/2020-0318-1517-34.jpg?imageMogr2/format/webp"></div>
<div>你可以根据选则添加</div>
</div>

个人建议 4- 5 图 一嵌套

<div class="tp">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

PJAX百度统计

百度统计pjax失效解决,修改 Pure\js\moment.min.js 84行代码

改成自己的百度统计,重新加载一次就正常了！

        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?8af9735d76b164d50dfc42e09a5c5633"; //替换为自己的百度统计地址
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();