本主题在 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 条评论
博主 Mark_Wood
该评论为私密评论
博主 mikusa
开源了好棒!!
博主 Mashiro
@mikusa
博主 heroyf
白喵大佬的editor.md插件有没有在重新编辑已经发布的文章的时候无法加载插件的情况,然而新编辑文章没有问题(゚ペ?)???,不知道这是不是插件的bug
博主 Mashiro
@heroyf 这个可以到淮城一只猫那里问问
博主 heroyf
@Mashiro 最后发现是editor.md和wp statistic插件出现了不兼容性,但是停用statistic插件,主题就会出现这样子的状况,什么都不显示,请问白喵大佬这个该怎么去解决
博主 Mashiro
@heroyf 不兼容?我没遇到;而且两个插件功能完全不相关,出现兼容性问题的可能性很低
博主 Mashiro
@heroyf 白屏是因为没有装wp statistic插件
最好先把两个必装插件以外的插件停用掉试试
博主 heroyf
@Mashiro 我也很奇怪,我把除了这两个插件都停用了,然后进文章编辑界面还是这样
,一停用那个statistic插件,再编辑文章就发现好了,我也一脸懵逼
博主 heroyf
@Mashiro 一停用那个插件就好了
博主 Mashiro
@heroyf 这是我的配置:WP Editor.md、WP Statistics,其他插件自身的问题抱歉我无法解决
博主 heroyf
@Mashiro 行的,我自己再看看是哪里出问题了,谢谢大佬
博主 dayt
这套主题是没开放新用户注册是嘛,发现输入注册的地址,显示新用户注册暂未开放
(’;ω;‘)
博主 Mashiro
@dayt 喵喵喵?可以注册的呀。演示主题:https://sakura.2heng.xin/wp-login.php?action=register
博主 dayt
@Mashiro 后台是只需要开始允许新用户注册是吗,上面注册得地址需不需要填上
博主 Mashiro
@dayt 只能设置这个地方的登陆地址
可以像我这样添加一个前端登陆模板https://2heng.xin/login/,但是前端注册因为缺少验证不安全,所以已经删掉了,如果你想用的话请自己修改这行的登陆路径。
建议使用
wp-login.php?action=register
的注册界面。博主 dayt
@Mashiro 好滴啦~
博主 Mark_Wood
该评论为私密评论
博主 Mark_Wood
@Mark_Wood 该评论为私密评论
博主 Mashiro
@Mark_Wood 可以发个演示链接给我吗
博主 Mark_Wood
@Mashiro 该评论为私密评论
博主 Mashiro
@Mark_Wood 菜单和排版和样式问题是因为 CSS 库没加载出来,CDN 页这里填入 latest
QQ 你那儿没有评论框我没法测试
博主 Mark_Wood
@Mashiro 该评论为私密评论
博主 Mashiro
@Mark_Wood QQ 这样填:tencent://message/?uin=QQ号,比如 tencent://message/?uin=123456
博主 Mashiro
@Mark_Wood 版本号先填上 3.4.0 试试吧
博主 Mark_Wood
@Mashiro 该评论为私密评论
博主 Mashiro
@Mark_Wood 很奇怪你这段为什么没有出来
源码长这样的
猜测可能是和其他插件冲突了,因为一样的代码在我的演示站上是正常的:https://sakura.2heng.xin。
临时的解决办法是修改
/Sakura/inc/swicher.php
:20-24行删掉,换成
博主 Mark_Wood
@Mashiro 该评论为私密评论
博主 Mashiro
@Mark_Wood 要使用随机图的话在 gallery 目录里面放多张图,不使用随机图的画就只放一张图,开关没必要吧,开关越多 bug 越多
博主 东南枝上的猫儿”
dalao喜欢改bug么
博主 Mashiro
@东南枝上的猫儿” 咦,为什么会说那个文件不存在呢?检查一下第一行那张图片在吗?
博主 东南枝上的猫儿”
@Mashiro 从上面的错误来看 是在themes/Sakura/ 文件夹下没有找到数据,我在主题文件夹那里看到解压后的主题文件夹名字是 Sakura-master ,然而当我改成Sakura的时候 ,虽然不报错了,主题也只是加载出了一部分功能
博主 Mashiro
@东南枝上的猫儿” 确认过 GitHub 上的数据是完整的了;你需要检查一下你那边的这个文件夹路径是否正确、内容是否完整:https://github.com/mashirozx/Sakura/tree/master/images/smilies/bili
建议直接
git clone
,不必下载压缩包。博主 Mashiro
@东南枝上的猫儿” 另外主题的设置都在
Sakura Options
下博主 东南枝上的猫儿”
@Mashiro 麻烦了,检查了一下并没有发现文件缺失,想想更有可能路径的问题.刚才在GitHub中重新下载了主题,直接解压到主题目录下依然是原来的错误,如果是通过上传压缩文件安装会报错,对了,我使用的是本地的WordPress.
博主 东南枝上的猫儿”
@Mashiro 嗯请问有这套纯HTML主题页面么?PHP还是不会,或许我可以用其他语言做一些数据交互
博主 Mashiro
@东南枝上的猫儿” 看起来你用的是 Windows,并没有在 Windwos 上跑过 PHP,不知道会不会是和路径的
/
、\
方向有关。没有单独的 html,因为一开始就是用 PHP 写的。博主 东南枝上的猫儿”
@Mashiro 对的 win10,HTML的话倒是可以直接在这里下载,就是整理累点
_(:3」∠)_
博主 东南枝上的猫儿”
@Mashiro 另外关于 Sakura Options 的主题设置,其实现在连仪表盘都没法加载出来
博主 Mashiro
@东南枝上的猫儿” 可能你的WordPress安装就有问题
博主 东南枝上的猫儿”
@Mashiro 其他主题倒是没毛病的
博主 Mashiro
@东南枝上的猫儿” emmmm,多半是兼容性问题了,这些是建议的环境
博主 东南枝上的猫儿”
@Mashiro 谢啦,我再继续调试,嗯不过我直接使用你的页面设计可以不dalao
博主 Mashiro
@东南枝上的猫儿” 可以的,也不全是我的设计;遵从原主题的 GPL2 协议就 OK
博主 heroyf
我用hermit x插件为什么插入音乐都不显示,网易云音乐的cookie也填写了呀,博主有遇到这个问题吗
博主 Mashiro
@heroyf 没有遇到啊,是哪种不显示,播放器都出不来还是音乐出不来?
博主 heroyf
@Mashiro 播放器都不出来,不知道哪里出了问题,F12看div标签有加载,但就是没出来播放器的影子
博主 Mashiro
@heroyf 把hermit x的全局加载打开
博主 heroyf
@Mashiro 有毒,还是没加载出来,不会是服务器在国外的原因吧
博主 Mashiro
@heroyf 讲道理我的也是外国服务器。
你看一下这两个出来了吗
以及这是我的配置
博主 heroyf
@Mashiro 好滴我看一下
博主 heroyf
@Mashiro 出来了,好像是因为我再折腾Aplayer的原因有关,谢谢白喵大佬,主题在用很好看
博主 Mashiro
@heroyf
博主 慕容狗蛋
昨天这个页面没关,回家想研究下博主的主题,然后今天页面崩溃的,崩溃来源是WebGL。
博主 Mashiro
@慕容狗蛋 小萝莉崩溃了吗?
这部分在开源的主题里面没有加入,看板娘确实挺影响网页性能的
博主 慕容狗蛋
精美的主题,回去把我破烂主题换了。
博主 Mashiro
@慕容狗蛋 期待
博主 persilee
来个 白描 dalao 的 Sakura 主题点个赞
Sakura 是博客界 WP 最美主题
博主 Mashiro
@persilee 谢谢你~
博主 Siphils
最近又在忙考试,所以又双叒叕鸽代码和邮件了
迟来了 给大佬点赞
博主 Mashiro
@Siphils
(〜 ̄△ ̄)〜
博主 LCG
…路易哭晕在厕所
博主 Mashiro
@LCG 难道不是应该说 Fuzzz 哭晕在厕所吗?
(`・ω・´)
博主 836145633
请问纯真IP库用的哪家的?
博主 Mashiro
@836145633 就是纯真啊
博主 蝉時雨
白喵我要反馈个问题,你首页文章的预览图加载完成后闪一下,而文章里面的图片就不会,不知道是不是如此设计的,但我感觉体验不好~~~
(。・ω・。)
博主 Mashiro
@蝉時雨 是的。首页用的是
<img src="xxx">
,文章页用的是<div style="background-image:xxx">
,切换图片 url 的时候出现了这样的现象。还有你可以用 Edge 试试,两个现象正好反过来博主 蝉時雨
看到白喵主题辣么好看我都手痒了,按耐不住想换主题了
我之前也用过 SM.MS 图床,但感觉速度不快也不好管理,不过白喵这里速度还可以
博主 Mashiro
@蝉時雨 快换快换 ,以后就可以拿出来吹牛说“大佬都在用的主题”了
SM图床国内加载速度确实很慢,所以我这里做了镜像
博主 Mashiro
@蝉時雨 恭喜升级 Lv3
博主 蝉時雨
@Mashiro 最终我也会成为 lv6 的
博主 Mashiro
@蝉時雨 161条留言即可
博主 Mashiro
@Mashiro 忽然发现上面的代码有个bug
博主 Phower
啊哈,前段时间还在寻思着开源主题结果太懒就放弃了。新字体很不错先盗走了另外中文字体可以考虑用 ‘ 有字库 ‘ ,用起来比Typekit方便不少
博主 Mashiro
@Phower 喂不要歪楼呀
反正一样有次数限制,懒得折腾了… 不过如果你电脑上安装过思源宋体的话就可以免加载网络字体了
博主 2343452423414566789
@Mashiro