typecho 移植主题 Pure ,适合文艺生活类博客

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1371 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

这是一款移植 Gridea For Pure 的 Typecho 主题。第一眼看到这款主题就被她所吸引,简洁美观大气很适合我文艺生活类博客写作。我花了一天就移植好了，但是我博客图片比较多为了用户体验增加了 pjax 和 AJAX 评论这花了我大部分时间。所以在今天我准备发布了，希望你们喜欢（拖延症无解）~

我是小白很多代码很乱，很多细节不懂优化。有问题请自行完善哈 😅

声明

主题作者：imhanjie

原项目地址：Github

感谢期间小赵同学的友情测试和大力支持再次非常感谢！

介绍

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

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

预览

示例站点：https://xiamuyourenzhang.cn/

请输入图片描述

主题设置

看图参考没什么特别的，就是手动文章置顶看后面详解~！

请输入图片描述

文章置顶

哈哈这是我搞静态博客的时候的一大特色，我知道 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>

这是我的单图和多图的排版习惯，可以参考以下！

请输入图片描述