Pinghsu - 简洁优雅的Typecho主题

一款以前端性能优化为出发点而制作的Typecho主题,同时又兼顾设计美学和视觉传达

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

本站下载:

隐藏内容,您需要满足以下条件方可查看
Pinghsu - 简洁优雅的Typecho主题-Npcink

主题亮点

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

Pinghsu - 小清新范的响应式WordPress主题

简约清新装逼范的Wordpress 主题

主题使用

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

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

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

外观设置

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

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

下面有几点补充

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

文章缩略图

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

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

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

个性化标徽

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

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

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

个性化色块

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

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

bluepurplegreenyellowred

友情链接

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

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

需要注意的是,创建归档页,选择页面模板的时候,还需要填写archive字段
功能开关部分,建议开启的有 Pjax加速,DNS预解析,其他就根据你的需要去启用吧
如果你想获取跟我一样的友情链接页面,因为是typecho开发版,支持在页面内写<ul><li>
所以你可以直接在<ul>内联一个class="flinks",然后在<li>插入你的友链,即可

浏览器兼容情况

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

创建搜索页

创建搜索页有三个步骤

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,动手能力强的你,可以加强它,例如加一个喜欢❤️按钮等等

内容不多,至此~

最后更新: 2020-02-17
Typecho

Materiality - 基于 MDUI 的漂亮、强大的Typecho主题

2019-10-26 1:46:00

Typecho

Typecho 评论邮件提醒插件

2019-10-30 0:51:42

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,未经Npcink作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1355471563 或 点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索