Typecho 移植自Gridea的主题 Pure

主题简介

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

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

Typecho 移植自Gridea的主题 Pure-国外网赚

主题特色

一款移植 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.使用前先在独立页面启用模板

  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);
        })();

其他

本主题的一些JS css表情包文件,我都存放在github!然后使用cdn加速!

不放心的同学,可以 FORK https://github.com/xiamuguizhi/oss 到自己仓库保存!

阅读全文
资源下载
下载价格免费
如果您想全面提升自己,建议您升级VIP,限时特惠低至68元,即可免费下载全站资源。客服QQ:100089758
只发精品!只发精品!拒绝标题党、滥竽充数,浪费时间=谋财害命!【点此查看VIP项目汇总】凡是本站会员专属项目开通VIP后即可免费下载【点此开通】加入VIP免费下载全站价值超10万以上精选项目课程,一网尽收!小小投入,大大回报!💰💰💰
🔺本站仅提供资源收集与展示,内容的真实性与有效性请自行甄别,本站不承担相关责任!
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录