本主题在 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 条评论
博主 樱花落舞
以前使用过这个主题,更新到最新版之后,Dashboard没有美化了。是取消了还是我设置不对啊??
博主 Mashiro
@樱花落舞 只修改过【明亮】的样式,把后台主题切到明亮就可以了
博主 樱花落舞
@Mashiro 大佬回复的邮件居然跑到垃圾箱了,确实是明亮主题了,但感觉没有生效。
。
博主 北熙宝宝°
话说你们是怎么把某个页面给隐藏的,想新建一个页面,然后不希望他出现在导航栏,又不要密码访问和私密访问,通过文章调用打开?
在线求解~
博主 spirit1431007
@北熙宝宝° 取消勾选外观-菜单中的“自动添加新的顶级页面到此菜单”
博主 北熙宝宝°
@spirit1431007 非常感谢~
博主 Mashiro
@spirit1431007 哈哈,谢谢你,帮我回复了很多问题呢~最近事多都好久没看博客了
博主 希瓜果汁
请问自定义的css应该放在哪个css文件里呢~
博主 spirit1431007
@希瓜果汁 主题设置可以添加,也可以自己写进style.css
博主 bobi
怎样把文章页面里的图片lazyload关掉,不是很喜欢这个功能啦
博主 liu
@bobi 把那行代码屏蔽就可以吧
博主 Mashiro
@bobi 把图片class里的lazyload删掉、把data-src的url改回src就可以了,不过应该有好多处要改,可以用github在整个项目中检索
博主 @_@ 默沫丶
感谢大佬分享,我是个小白,我想问一下怎么在主题的 Pjax 回调函数中加入:
reloadHermit();
看不懂代码..哭,
博主 石泉
@@_@ 默沫丶 主题是正常在wordpress上直接上传安装得嘛 为什么我的一直提示出现了问题 您点击的链接已过期。
请重试。
博主 @_@ 默沫丶
@石泉 可以在wp后台已经安装插件上传主题zip,或者进入你服务器wp的目录/wp-content/themes下将主题解压。
两者都要从新把文件夹名为为Sakura。
博主 Mashiro
@@_@ 默沫丶 这个函数主题里面默认已经添加过了
博主 北熙宝宝°
已经邮件反馈问题了,❀.(´▽`)❀.
还麻烦博主看一下邮箱的问题呐✔看看可不可以兼容修改一下或者有什么其他好的意见避开这个~
博主 ぺ還冷﹎☆
我想问一下 我的网站装了您的主题 结果显示为这样,请问怎么能解决呢?
配置如下:
系统:Ubuntu 16.04.1 LTS
php:7.1
Nginx 1.8.1
MySQL 5.6.43
错误信息是配图
希望能得到您的答复
博主 Mashiro
@ぺ還冷﹎☆ 安装一下统计插件
博主 ぺ還冷﹎☆
@Mashiro 安装完后还是这样
博主 1522575015
@ぺ還冷﹎☆ 我的也是 ,把那个白猫推荐的编辑器插件关掉就没有好了 ,不知道一不一样
博主 ぺ還冷﹎☆
@1522575015 我没有装编辑器唉
博主 花落、自成冢
大神,不好意思,忘了评论区支持HTML标签了。。这里接上一条。
《ul》《h2》…《/h2》《/ul》或者ul换成其他的《div》《span》等标签
因为诗名是必须H级标签,内容是正文样式,加起来是一个块结构,单独要设置样式来与另外一首诗区分开。
所以考虑到使用《ul》《div》《span》等标签将H标题和正文去包裹到一起设置样式(比如边框),
但是结果就是TOCBOT锚失效。。。。
博主 Mashiro
@花落、自成冢 问题一我没太看明白,能提供一个demo吗?问题二,tocbot不是我的项目,不妨在那边提个issue问问看(看过tocbot的代码,感觉要实现折叠,listener都得大改一番,不容易),基于现状的建议是控制文章长度。写诗的话姑且就避免看toc了吧
还有,这里是自动为h标签生成id的代码,这里是tocbot的初始化函数,若果需要可自行参照tocbot的说明调整参数。
博主 花落、自成冢
@Mashiro 汗~主要是我之前有个合集,单独一篇篇发太麻烦,然后就想合在一起发,诗词这种东西不像普通的文章那么好排版嘛,就用到很多块元素标签去分隔一首首诗,于是TOCBOT就失效了。
不过这个问题已经解决了,谢谢大神了。解决办法这边也分享下,以后有需要的朋友可以参考下。
在建立H级标签的时候默认是《H2》..《/H2》,剩下的建立目录和锚连接都是TOCBOT处理,现在《DIV》《H2》…《/H2》《/DIV》这种形式插入代码后,TOCBOT能正常建立目录,但是锚链接会失效。
可以在插入类似代码的时候给H级标签手动建立锚ID就好了。代码修改为《DIV》《H2 id=”toc-head-1″》…《/H2》《/DIV》,其中toc-head-是固定格式必须这样,不然还是会失效。最后一位是序列数值,这个就按照你文章的H级标签数下来,是第几个H标签就写几,默认序号从1开始。只要保证后面的序号比前面的大,锚链接就会正常建立,你可以 1 2 3 4 5标下去,也可以 1 3 5 7 9标记下去。
至于显示长度的问题,还在研究,暂时没时间想了。。。这几天装电脑,把电脑上几个工作软件的代码给误删了,熬夜重写,泪奔。
博主 花落、自成冢
大神~你好~
关于TOCBOT,我发现了一个目录锚索引的BUG,也不算BUG,应该算是功能上的缺陷吧。
1、就是一旦H级标签不是直接暴露在HTML标签的最外层,TOCBOT建立的锚链接就会空锚#,而不是预期的#toc-head-* 的锚链接。比如“
…
”或者
<
div>等都试过了,一旦嵌套就失效。不过目录是完整生成了,就是所有的锚都是空锚#。
2、另外对于长文章,在同一H2标签内,存在过多H3标签时,多余的目录会。。。超出最大范围显示不全。(因为我有一篇文是作为一个合集,所以内容比较多),试过文章插分页符的方法,但是分页符的Page1 2 3是没有样式的,很丑,而且即使分页后,目录只会显示当前页的H标签。。。有没有办法实现手动点击折叠目录?而不是现在这种单一的超出浏览范围后自动折叠的方式?
期待大神能忙中抽空看看,能告之下折中的方法就太好了。 不甚感激。
因为我写诗词较多,诗词合集里会有大量的H级标签,排版上也会多标签嵌套使用。
博主 ソ初ヲ
电脑端,百度浏览器和360安全浏览器也不适配,这两款浏览器属于比较流行的浏览器,属于大众化浏览器,望修复
博主 ソ初ヲ
dalao,我折腾了许久,终于找到原因了,固定链接不能是文章名,其余未测,朴素可以,这个算是个bug吧,
博主 ソ初ヲ
dalao,为什么分类目录是404鸭,求告知
博主 花落、自成冢
@ソ初ヲ 你那个原因是因为WP的固定链接不支持中文字符,而默认文章标题和标签还有个人介绍页面的链接都是直接指向其命名的,所以要么改链接,要么开启WP的中文字符支持。百度有开启的教程,在WP的配置文件改几个字符就行了。
博主 ソ初ヲ
@花落、自成冢 英文也不行,我试过了,只能把固定链接改成朴素链接,
博主 花落、自成冢
@ソ初ヲ 文章能用固定链接嘛? 如果文章也只有朴素格式才能打开,或者必须通过www.XXX.com/index.php/文章链接/这种形式打开,是因为服务器不支持伪静态。。。
我只遇到过中文链接的404这种情况。
我是IIS搭建的,配置好伪静态后,现在一切正常。。
博主 Mashiro
@花落、自成冢 建议url里不要用中文啦,人家如果想分享一下网页结果复制出一大段中文转义的链接多不方便
博主 Mashiro
@ソ初ヲ 确定这是主题的问题吗?虽然每太看明白问题,但感觉是你的WP配置有问题?
博主 ソ初ヲ
@Mashiro 应该就是主题问题吧,我还专门用新主机重新安装了一遍,WordPress博客程序,和主机,主题都是最新的,你去后台-设置-固定链接-换成文章名,看看会不会报错,麻烦博主了
博主 yulinluo
大神大神,为什么封面图一直都是那三张默认的图,我在那个目录里放了图片的
博主 任
@yulinluo wordpress删了自带的图试试
博主 金闪闪
@任 删了呀,不行的说
博主 任
@金闪闪 封面的路径
/cover/gallery
和默认特色图的路径/wp-content/themes/Sakura/feature/gallery/
都正确吗?博主 金闪闪
@任 弄好了,谢谢大佬指点
博主 任
@金闪闪 哈哈哈,不客气,我也是自己折腾过来的。
博主 花落、自成冢
大神大神~我可以搬走左下角这只小可爱嘛?实在是太喜欢了
博主 ソ初ヲ
@花落、自成冢 话说,你那个live2d,配置成功了没,我也喜欢那个诶,成功的话,分享一下
博主 花落、自成冢
@ソ初ヲ 大神没有回复。。不敢搬
_(:3」∠)_
代码是找到了。。
博主 ソ初ヲ
@花落、自成冢 那个,关于樱花主题的live2d看板娘你部署了吗?,可否把代码发给我一下2984922017@qq.com
博主 花落、自成冢
@ソ初ヲ 搬了,然后发现并不能正常使用。。。。大佬主题的代码集成度太高了,还有好多资源在CDN
博主 Mashiro
@花落、自成冢 随意
博主 任
白猫大大,非常感谢你做出sakura这么棒的主题!捣鼓了段时间终于差不多了。
但是编辑器好像不支持思维导图,编辑器可以预览,但是不显示。
不知道白猫大大之后会做这块。