本主题在 Louie 基于 Fuzzz 的 Akina 主题修改的主题 Siren 基础上三次修改,显然与前辈比起来,我唯一的贡献就是把他们的代码搞得乱七八糟了吧 =.=
GitHub 地址在文末(从而确保你看到了注意事项)。
I. 特性
随机封面图
内带了一个返回随机图片的 API,把想要展示的图放到 /cover/gallery
中即可。
Lazyload
使用了开源库 jQuery-Lazyload,按需加载图片,优先加载缩略图或占位图,当图片显示在 viewport 上时才加载原图,提升网页加载速度。
另外首页文章列表设计了一个向上浮现的效果,算我最满意的一个小 trick~
文章封面视频
可将视频设为文章封面,支持 hls 流视频。使用说明见主题 wiki。
定制登陆及后台界面
后端登陆界面及 Dashboard 美化(配色方案 Sakura),你也可以自行设计配色方案(请留意“后台配置”页面下的说明),同时也有配合 pjax 实现的前端登陆,前端登陆需自行用模板创建新页面(page)。
支持 Bilibili 表情
后端请按提示切换后台为明亮主题(个人资料页切换),否则评论管理页将出现表情鬼畜。
QQ/Gravatar 头像
如果输入了 QQ 号,留言将拉取 QQ 头像,如果 QQ 号不存在或者是输入了邮箱,将拉取 Gravatar 头像。QQ 头像接口和 Gravatar 镜像都由我这边提供。
评论插图
该功能支持多个图床的接口的选择,目前支持的有 SM.MS、Imgur、Chevereto,使用前请在主题设置中配置相应的代理和API Key。
注意:目前此功能需要 PHP 开启 curl 支持,同时 Nginx/Apache 需要允许 POST 请求。
用户 UA 及 IP 定位
使用纯真 IP 数据库。对了,还有一个高仿 Bilibili 的等级系统,有空还打算再写一个头饰模块。
文章目录
使用了开源项目 tocbot,在需要目录的文章任意位置输入 [toc]
启用。文章首字的大写使用方法:把首字放到 [begin]
和 [/begin]
之间。
Mac 风格代码块
import banana
class Monkey:
# Bananas the monkey can eat.
capacity = 10
def eat(self, n):
"""Make the monkey eat n bananas!"""
self.capacity -= n * banana.size
def feeding_frenzy(self):
self.eat(9.25)
return "Yum yum"
代码高亮渲染使用的是 highlightjs。代码块可全屏,你发现了吗?
建议通过 Markdown 语法写作以便代码块正常显示,代码高亮支持二十多种常见编程语言。
前端主题切换
这部分函数写得有些凌乱,打算以后有空重构一下,可留意主题的更新。字体请留意注意事项。
时光轴
使用了 Shawn 的设计。
相册
基于 fancybox 实现的相册功能,使用说明见主题 wiki。
邮件模板
Aplayer/HermitX 支持
修改了 APlayer 的部分样式,文章内插入音乐可使用 Hermit X 插件。
CDN 优化
因为自己博客每天访问量较大(日均 PV 3000左右),所以为了减少请求数及流量,以此控制 CDN 费用(每天0.2元左右),针对性地做了 CDN 优化:主要是合并请求,并把不同类型的资源分配到不同的域名上,这些在后台界面可以调整。其他内容相对固定的资源,如贴图和前端库都放到了 jsDeliver 的公共库上。
Github Cards
可通过短代码添加: [github repo="mashirozx/Sakura"]
移动客户端*
借助 PJAX 异步加载,便于基于 WebView 开发高性能的移动客户端,切换页面时无刷新,可以获得接近 Native 的响应速度。具体可以体验我的安卓客户端。
II. 注意事项
重要★★:
主题下载后请把文件夹名字改回 Sakura
,也即,保证主题路径为 wp-content/themes/Sakura/
。
启用新主题/插件前备份数据库是一个良好的习惯。虽然我保证主题不可能损坏你的数据,但是毕竟数据无价,对吧?
建议安装的插件☆
Hermit X,基于 Aplayer 的播放器。
我也在使用的插件
Easy WP SMTP,邮件支持。
WP Statistics,统计插件,主题可选择其接口以作页面访问计数。
Login LockDown,登陆尝试限制,避免前端登陆爆破。
Wordfence Security,避免爆破和评论注入。提醒:该插件将在数据库中记录访客信息,数据库体积将略有增大。
Akismet Anti-Spam,垃圾评论过滤。
AMP,生成AMP 页面,效果就是这样,有利于提升 Google 排名。
Autoptimize,页面压缩。
Glue for Yoast SEO & AMP,AMP 增强,需配合 Yoast SEO 及 AMP 插件使用。
WP Super Cache,页面缓存,为访客自动生成缓存版网页,提升访问速度。
Yoast SEO,搜索引擎优化。
其他插件我没用过,不保证兼容性。
兼容性
服务器端
WordPress 版本:4.8+
PHP 版本:7.1+
前端
兼容主流 Chromium 内核浏览器、FireFox 浏览器。不兼容 IE (360、QQ 等双核浏览器请关闭 IE 模式)。
写作规范
主题遵循 HTML5 规范,正文部分样式完全兼容标准 Markdown 语法,因此也建议配合 WP Editor.md 插件使用 Markdown 写作,可参考《Markdown 编辑器语法指南》。
主题演示站有一篇 Markdown 语法展示,文章源码在这里。
API
下面是一些主题内已经带有的接口,无需重复构建:
Cookie:see https://2heng.xin/2018/05/12/add-a-version-control-for-cookies/
后续会考虑添加更多接口。
III. FAQ
1. 为什么开源的主题和这个博客不完全一样?
我的博客上还有一些个性化的内容,因为并不是所有人都会需要,一方面影响主题性能,另一方面为了开源还需为些部分添加开关和选项,耗费时间且没意义,所有这些内容在开源的主题中都已移除。如果你有喜欢,f12 随便抄,我没意见~
PS. 其实本站主题已经很久没有更新了,开源版主题中反而有更多新功能的。 ( ̄▽ ̄)"
标准主题演示在这里。
2. 前端代码块/WP 5.3 后台崩坏?
原先推荐的 WP Editor.md 插件在 WP 5.3 中存在严重的兼容性问题。目前最新版主题已经对评论部分做了处理,不再需要依赖该插件,所以如果更新到了 WP 5.3,请停用此插件。至于正文 Markdown 写作,目前没有好的方案,可以先用其他 Markdown 编辑器书写并转成 HTML,再粘贴进 WordPress。
3. 主题设置开关未生效?
启用主题后先点一次保存。
4. 时差问题
后台主题设置界面里添加了一个时差调节选项。
5. 插入全屏浏览的图片?
参见 主题 wiki。
6. 使用了CDN后评论定位不正确?
如果使用了 CDN 请在 WordPress 根目录的配置文件 wp-config.php
最后加上这段:
if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$list = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}
网站建议都加上 CDN 以避免暴露服务器IP和被攻击的风险;可以使用 CloudFlare 的免费 CDN。
7. 兼容 IE 及 360 极速浏览器
前者太太太太旧啦,不考虑适配,不过 IE 浏览器可以看到一个友好的弹窗提醒。后者,明明是 IE 内核却要拼命伪装成 Chrome 内核,我能怎么办呢?
8. 文章页页首装饰图(Feature Image)
后台文章/页面编辑器中有一个设置特色图(Feature Image)的窗口,每篇文章/页面需要单独设置,没有设置时默认为空白。这不是 bug,因为并不是每篇文章都需要装饰图,视频教程。
最后,关于 bug 反馈
在提出你认为的 bug 之前,可先用这里的 Windows 调试环境(里面的主题版本是很早以前的了,请手动更新一下)复现出该问题;如果愿意帮我修改,欢迎提交 Pull request。除非是 bug,如果仅仅是其他样式/功能的需求,请自己动手吧,不过 DIY 内容也欢迎提交 Pull request。其他使用相关问题可在下面留言;主题相关问题不接受微信/邮件私信。
IV. 下载
项目发布于 GitHub:mashirozx/Sakura,如果下载速度慢可使用国内镜像,Pull Request 和 Issue 请提交到 GitHub。
目前正在重构主题,Sakura v3.x 版本人基本不再维护。重构版主题采用 webpack 打包,更易于维护和 DIY,重构项目预览(务必阅读 README):https://github.com/mashirozx/Sakura2。
主题交流群:860262481
另有 hexo 版主题分支:honjun/hexo-theme-sakura
需要服务器吗?我现在在用的这家最低 $3.5/月($2.5 版没有 IPv4),下面的邀请链接可以获得 $10 的奖励~
若有幸您采用了我的主题,欢迎交换友链。您若喜欢,打赏一下也是极吼的~
Comments | 1,964 条评论
博主 希瓜果汁
非常喜欢博主的主题,我用Elementor写的博文,加入“[toc]”之后,文章的二级目录显示不出来,一级标题正常。这是为什么呀?
具体情况我发了邮件了~希望博主能指点一下
博主 希瓜果汁
@希瓜果汁 请问tocbot的代码放在哪一块了?我先自己处理试试。谢谢博主
博主 希瓜果汁
@希瓜果汁 原来是插件不支持 换用默认编辑器就可以了
博主 希瓜果汁
请问怎么做到标题栏是博主这样的效果呢?
可以加小图标~羡慕
博主 Mashiro
@希瓜果汁 CSS伪元素实现的~
博主 花落、自成冢
哈哈,发现大神的小秘密了。
(=・ω・=)
老实说DEMO也有这个问题,我用Edge浏览器的结果说是这个
我用的Demo还没进行大改动的时候是提示的这个
希望对大神有帮助~
博主 Mashiro
@花落、自成冢 谢谢!我再看看
博主 kaname
这个
博主 Mashiro
@kaname Demo在你那边也这样吗?
博主 kaname
@Mashiro 浏览器缩放的关系,恢复缩放为100%之后就好了
博主 kaname
请问博主这个是怎么回事
博主 Mashiro
@kaname ?
博主 花落、自成冢
大神,我是昨天接触了您的WordPress模板,十分喜欢,于是下载试用了,因为刚接触WordPress和您的模板,有些地方不是很懂,发现实际显示的效果部分无法达到您Demo的预期效果 我在文章内设置了“特色图片”之后,发现点开文章后,标题栏并没有特色图片作为背景,标题是空白居中的,与Demo不一样,不知道是还有什么地方需要设置么?
博主 Mashiro
@花落、自成冢 你是不是勾选了基本设置里的头部装饰图?
博主 花落、自成冢
@Mashiro 啊!~是的是的,我看错了,勾选算取消这个我理解错了勾选上了,已经解决了。谢谢大神~
博主 花落、自成冢
@Mashiro 大神大神,还有一个问题想请教您一下。就是目前这个版本有多少资源是使用的外链形式。
目前模板内JD的那个CDN我这边网络访问有时候很慢(首次打开首页的时候),影响到主页的打开速度,我观察到都是在JD的外链资源卡住,所以打算将所有外链的CDN资源等全部储存到本地服务器和自有的CDN,就是不清楚有多少资源是外链的形式存在的。
另外还有目前评论区截图是上传到了SM.MS图床,我想将这个修改为上传到自有的对象存储服务器,或者在上床SM.MS图床的同时,能在本地服务器生成一份备份,防止SM.MS网络问题导致资源丢失,我该着手修改哪些文件呢?
谢谢大神能抽空回复我,感谢!
博主 Mashiro
@花落、自成冢 jsDelivr的资源其实挺多的,算是历史遗留吧,CSS和页面内都直接写入了好多:https://github.com/mashirozx/Sakura/search?q=cdn.jsdelivr.net&unscoped_q=cdn.jsdelivr.net
如果不想要只能一处一处改喽(感觉没必要吧,jsDelivr国内用是网宿的节点,应该很稳的呀)
对象储存改这里https://github.com/mashirozx/Sakura/blob/master/functions.php#L900
博主 Mashiro
@Mashiro 还有这里https://github.com/mashirozx/Sakura/blob/master/functions.php#L948
博主 花落、自成冢
@Mashiro 嗯嗯,明白了大神,谢谢谢谢~
(`・ω・´)
我慢慢折腾去了先。
jsDelivr感觉挺奇怪的,可能我自己网站优化的原因吧。公司电信网络打开你的网页很快,打开自己的稍微慢一点点,家里是移动网络,打开你的网页很正常,但是首次打开自己的网页就。。。大概加载了二十多秒,看左下角是一直卡在jsDelivr的资源加载上,反复清理浏览记录后对比测试了好几次,都是一样的结果。
我的服务器架设的是IIS,可能也是个原因,伪静态这块遇到好多麻烦。固定链接去掉index.php都试了好多办法。所以页面缓存一直落下了没去折腾。改天我开启静态缓存试试。
不管怎样,感谢大神的指点了。等我做好了再来跟大神交换友链哈。
博主 Mashiro
@花落、自成冢 网站可以整体做一下cdn
博主 后宫学长
哈哈,好久不见,我来偷窥了。
新年好 ~
博主 Mashiro
@后宫学长 学长好!
开坑新主题啦
https://dev.2heng.xin
博主 后宫学长
@Mashiro 精神可嘉,横滑主题真棒!
但是建议对PJAX做处理,而不是假PJAX,请求加载的还是整个页面。
建议参考这位大佬自己写的PJAX。
https://github.com/Archeb/Candy-Rebirth
博主 Mashiro
@后宫学长 技术能力有限,而且header和footer其实也没几行,无所谓啦
博主 千玖夜
提交一个小BUG
手机端Chrome浏览器显示长代码不全
博主 Mashiro
@千玖夜 谢谢反馈,之前也发现了,不过那个是highlight.js的bug,而且仅在chrome安卓版上出现这样的问题
博主 希瓜果汁
@Mashiro 现在手机上好像可以显示长代码了,左右可以拖动,但不会显示水平的滑块…
电脑端也是这样,可以拖动,但是看不到底端滑块,很容易看成显示不全..
博主 Mashiro
@希瓜果汁 配色的问题,换成GitHub主题会好一点
博主 周可乐
这主题真好看
博主 希瓜果汁
博主博主
您的h标签挺漂亮的,主题中只保留了h3标签
可以提供下别的吗
博主 Mashiro
@希瓜果汁 before伪元素实现的,CSS扒一下就可以啦~
博主 希瓜果汁
@Mashiro 谢谢博主
博主 lin1heart
大佬,刚开始用wordpress和你的主题,有好些问题…
1.主题设置里面第一屏我加的是自己站内的文章链接,我看你的好像也是,但是怎么我的点图片后是打开了一个新的窗口,你的是站内跳转。
2.我想搞个像你那个歌单一样,(这个是加了Hermit X这个插件后,在写文章的时候点添加音乐吧?)可是我复制一个链接
点插入文章都没反应,预览也看不出多了什么东西。然后我第二次加链接的时候,把下面出现的那串代码手动拷到文章里
最后发布还是又问题,如图:
(ps:我的wordpress版本是5.0.3,插件都是最新的,不过我还用WP Downgrade这个插件把wordpress版本降到4.几了,音乐播放那个还是不行)
博主 Mashiro
@lin1heart hermit x现在好像必须设置一下cookie,抓一下云音乐客户端的包,把自己的cookie填进去试试
博主 lin1heart
@Mashiro 好的,大佬。还有必须要用app的cookie吗,网易云网页版的cookie不行?我偷懒取了网页版的cookie,貌似没用。(ps.才发现我之前用的插件是hermit,不是X,直接通过wordpress搜索hremit X竟然找不到,还是手动下载后上传服务器的…)
博主 lin1heart
@lin1heart 搞定啦,网页版的cookie也是可以的,就是莫名其妙昨天竟然不行,今天貌似没改什么,又可以了,可能是又缓存吧
博主 yannis
喵,发现icon都显示不出来欸,应该怎么破?
博主 */Mr.hao/*
functions.php的981行报错,我windows server的iis,php版本是7.1
博主 呆到自然萌あ
不过这个地方我不知道为什么黑屏…
博主 呆到自然萌あ
@呆到自然萌あ 还有就是手机端有很大的显示问题。。
博主 Defectink
@呆到自然萌あ 将这个“世界,您好!”这篇文章添加一张特色图片这里就会显示特色图片了。
博主 呆到自然萌あ
用了博主的主题,突然感觉自己还有那么多要学的东西,感谢博主让我知道了这么多。
博主 希瓜果汁
请问博主的图片灯箱是怎么弄的呢..
疯狂请教中..
博主 Mashiro
@希瓜果汁 不是灯箱啦,就是一个随机图接口https://api.2heng.xin/cover/
博主 希瓜果汁
@Mashiro 不是这个~是那个文章中的图片点开可以放大~
博主 Mashiro~
@希瓜果汁 https://github.com/mashirozx/Sakura/wiki/Fancybox