【Typecho主题】Pinghsu – 一个Typecho主题

Pinghsu是一款以前端性能优化为出发点而制作的Typecho主题，同时又兼顾设计美学和视觉传达。主题命名取自作者姓名和其女朋友姓名的最后一个字的港式英文，挣扎于Hsuping还是Pinghsu，最后取为Pinghsu，意为一切都是Ping先Hsu后，即系要听女朋友的话。

官网|介绍|演示： https://www.linpx.com/p/pinghsu-a-typecho-theme.html

Github： https://github.com/chakhsu/pinghsu

[zrz_file link="https://n.getimg.net/file/2019/typecho/pinghsu-v1.5.4.zip" name="pinghsu-v1.5.4.zip" code=""]

主题亮点

• 页面预加载与DNS预解析保证极快访问速度
• 无JQuery，无前端框架，无webfont
• 几乎零代码冗余，几乎每句代码都是有意义的
• HighlightJS代码高亮，支持22种编程代码
• 响应式设计，支持平板与手机，访问体验甚至优于桌面
• 支持图片CDN镜像，支持多种文章缩略图设置
• 支持首页三栏和单栏选择，文章题图和色块
• 支持文章目录、相关文章与数学公式渲染
• 支持文章个性化标徽设置，10种标徽选择
• 支持个人社交按钮，社交分享
• 主题设置添加XSS检测，评论提交防止触发多次
• 还有更多亮点等你去发现~

主题使用

到 Github 下载，点击”Download ZIP”下载，解压后将文件夹改名为pinghsu后上传到 /usr/themes，并启用主题

如果需要更新主题，则先下载最新文件，然后覆盖原文件即可完成更新，部分新增加的功能需要到后台开启才会生效

注意事项：目前主题仅在 typecho 开发版，PHP7.0 下测试通过，其他情况未作太多测试

外观设置

外观设置主要分为四部分，分别为 logo、icon 的设置，功能开关，社交按钮设置，图片CDN镜像

使用注意事项都在设置里写得比较清楚了，如果遇到不明白的地方，可以给我留言反馈

下面有几点补充

• CDN设置部分仅仅测试了七牛的，理论上也支持有镜像服务的CDN
• 创建模板归档页，无论选择了哪个模板都要加上自定义字段archive

独立搜索页

设置方法看这里：Here（此页底部也有）

文章缩略图

文章设置缩略图方法有四种，自定义字段thumb，文章附件第一张图片，文章内图片，默认缩略图

优先级顺序 ：自定义字段 thumb -> 附件第一张图片 -> 文章图片 -> 默认缩略图 -> 随机图片 -> 无

缩略图尺寸大小，高度至少有250px，宽度大于高度，推荐高度为400px的

个性化标徽

个性化标徽出现的地方有首页、分类页，标签页，作者页和相关文章

设置方法是在文章编辑内填写自定义字段，支持的字段如下

book 、 game 、 note 、 chat 、 code 、 image 、 web 、 link 、 design 、 lock

个性化色块

个性化色块需要到外观设置那开启才能激活使用，色块出现的地方有首页，分类页，标签页，独立搜索页等等

设置方法是在文章编辑内填写自定义字段，支持的字段如下

blue、purple、green、yellow、red

友情链接

如果你想获取跟我一样的友情链接页面，因为是 typecho 开发版，支持在页面内写

• 所以你可以直接在
• 内联一个class="flinks",然后在插入你的友链，即可更多设置教程 : Here

需要注意的是，创建归档页，选择页面模板的时候，还需要填写archive字段

功能开关部分，建议开启的有 Pjax加速，DNS预解析，其他就根据你的需要去启用吧

如果你想获取跟我一样的友情链接页面，因为是typecho开发版，支持在页面内写

• 所以你可以直接在
• 内联一个class="flinks",然后在插入你的友链，即可

浏览器兼容情况

• 这个····现代浏览器都兼容····

创建搜索页

• 创建搜索页有三个步骤
• 1、新建页面
• 2、选择模板Template Page of Search
• 3、添加自定义字段archive
• 注意事项：无论选择哪个模板都是需要添加自定义字段archive，才能保证你的模板页跟我的一样

设置菜单

• 创建完搜索页还有一道工序，那就是隐藏这个页面，隐藏后的这个页面将不再出现在菜单
• 设置方式：
• 1、在创建搜索页当页，右边的sidebar的“高级选项”，在“公开度”那，选择“隐藏”
• 2、复制你的搜索页的访问地址，不要有空格，记得带上http://或https://
• 2、到外观设置那，在搜索页设置的输入框内，复制访问地址
• 一顿操作之后，点击菜单上的搜索图标，即可跳转到搜索页~
• 访问成功代表设置完成~ ?

添加语句

• 如果你想跟我一样有一段这样的话：? The following tabs can help you!
• 则直接在当页的编辑器内输入你自己想要话，记得不要带有回车和空格，然后发布文章
• 当然你也可以不设置独立搜索页，那么菜单上的搜索图标将维持原有的外观和功能

补充

• 版本已经更新到了v1.5.3，如你所见增加了个文章底部的bar
• bar的左边是分享按钮，右边是文章上下篇切换和返回顶部或尾部
• 以前我一直想如何优雅地去解决文章返回顶部和尾部的问题，如你所见，这个底部的bar算是个优雅的解决方法，虽然不怎么新鲜
• 关于分享按钮这部分，只有Facebook、Twitter和二维码，也没有做成模态窗。那为什么不做微博分享？因为微博分享接口对https不友好，虽然可以访问，但丢失了样式，如果用http的话，就不满足HSTS了，所以就干脆不弄。
• 所以，关于底部的bar，动手能力强的你，可以加强它，例如加一个喜欢❤️按钮等等
• 内容不多，至此~