Skip to content
This repository has been archived by the owner on Aug 27, 2024. It is now read-only.

这是一款移植 Gridea For Pure 的 Typecho 主题。

License

Notifications You must be signed in to change notification settings

xiamuguizhi/typecho-for-Pure

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2a6e04b · Oct 10, 2022

History

19 Commits
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Feb 21, 2021
Feb 22, 2021
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Oct 6, 2022
Feb 21, 2021

Repository files navigation

前言

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

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

声明

主题作者: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.使用前先在独立页面启用模板

请输入图片描述

  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 到自己仓库保存!

下载地址

Github: https://github.com/xiamuguizhi/typecho-for-Pure 本站下载: Pure.zip

主题更新

2021.2.21 感谢 臭蛋 添加 mermaid的支持(一个在 markdown 下画图标的库)

效果如下:

Loading
graph LR;
  Portal-->|发布/更新配置|Apollo配置中心;
  Apollo配置中心-->|实时推送|App;
  App-->|实时查询|Apollo配置中心;