本主题在 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 条评论
博主 qiao7
主题很不错,可惜自己Pull下来应用之后页面基本一片空白,必要的插件也都装了,连调试页面也是惨白
博主 劫
为什么我的热度哪里没起作用呢?改装的插件也已经装了的呀
博主 ソ穹ヲ
好主题,
已转载并注明出处
博主 Mashiro
@ソ穹ヲ 谢谢❤
博主 Defectink
大佬你好,很喜欢你的主题呢。但是他貌似无法运行在最新版的Wordpress上呢。
这里是我的测试地址:https://test.defect.ink/
直接在github clone下来了,没有任何修改直接启用的。
博主 Defectink
@Defectink 抱歉地址有误,地址为https://test.defect.ink
博主 Mashiro
@Defectink
刚刚更新的,似乎并没有什么问题
https://sakura.2heng.xin/
博主 Defectink
@Mashiro 好吧,可能是我的环境哪里出了问题,蟹蟹
博主 snowy
视频调试页面第一次进入页面出现
Uncaught ReferenceError: reloadHermit is not defined
at pjaxInit (sakura-app.js?ver=3.0.7:60)
at Object.pjax (sakura-app.js?ver=3.0.7:3)
at HTMLDocument. (sakura-app.js?ver=3.0.7:154)
at HTMLDocument.dispatch (lib.min.js?ver=3.0.7:7)
at HTMLDocument.y.handle (lib.min.js?ver=3.0.7:7)
at Object.trigger (lib.min.js?ver=3.0.7:7)
at HTMLDivElement. (lib.min.js?ver=3.0.7:7)
at Function.each (lib.min.js?ver=3.0.7:7)
at w.fn.init.each (lib.min.js?ver=3.0.7:7)
at w.fn.init.trigger (lib.min.js?ver=3.0.7:7)
pjaxInit @ sakura-app.js?ver=3.0.7:60
pjax @ sakura-app.js?ver=3.0.7:3
(anonymous) @ sakura-app.js?ver=3.0.7:154
dispatch @ lib.min.js?ver=3.0.7:7
y.handle @ lib.min.js?ver=3.0.7:7
trigger @ lib.min.js?ver=3.0.7:7
(anonymous) @ lib.min.js?ver=3.0.7:7
each @ lib.min.js?ver=3.0.7:7
each @ lib.min.js?ver=3.0.7:7
trigger @ lib.min.js?ver=3.0.7:7
n @ lib.min.js?ver=3.0.7:7
e.complete @ lib.min.js?ver=3.0.7:7
u @ lib.min.js?ver=3.0.7:7
fireWith @ lib.min.js?ver=3.0.7:7
k @ lib.min.js?ver=3.0.7:7
(anonymous) @ lib.min.js?ver=3.0.7:7
load (async)
send @ lib.min.js?ver=3.0.7:7
ajax @ lib.min.js?ver=3.0.7:7
r @ lib.min.js?ver=3.0.7:7
n @ lib.min.js?ver=3.0.7:7
(anonymous) @ lib.min.js?ver=3.0.7:7
dispatch @ lib.min.js?ver=3.0.7:7
y.handle @ lib.min.js?ver=3.0.7:7
但是刷新一下就没了,这个时候直接点击菜单栏有时候会不显示页面。你的测试页面我没看到视频所以不知道有没有这种问题
博主 snowy
@snowy ..
博主 Mashiro
@snowy https://github.com/mashirozx/Sakura/issues/13
这个问题需要改动的地方有点多,暂时先装个hermit x插件吧
博主 snowy
@Mashiro 装了hermit,音频视频也能加载。但是后台会疯狂报错,大都是404,还有一些脚本未定义
博主 Mashiro
@snowy 这样子是吗?
Adobe Typekit 自己的问题,似乎没什么影响
博主 snowy
@Mashiro 并不是这个报错,是js跟cssnotfound,还有未定义的具体的你可以看一下我的网站,加载了音频或者视频之后点击左上角的
博主 Mashiro
@snowy hemit-x,不是hermit
https://blog.lwl12.com/read/hermit-x.html
博主 snowy
@Mashiro
(⌒▽⌒)
好啦~果然是插件的问题~3Q博主 snowy
@Mashiro 你可以去一下我的网站,rainxyz.me。点视频测试或者音频测试文章,再刷新加载,这时候点博客名rain100%进不去主页
博主 北冥有鱼,其名为咸
菜鸟表示不懂console,前几周就出现了这问题了。插件我只装了wp统计和一个看板娘插件,网页加有爱心点击的特效。我查看源代码查看图片的链接一切正常,打开链接都能正常的显示图片出来,就是不懂怎么回事就是用你的主题突然会这样子,大佬能帮改一下吗
博主 snowy
请问这个怎么解决,我改了自己的CDN还是这样。加载不出来
博主 rainy
@snowy 默默地f12了一下博主的
网站……cdn抽了~23333
博主 Mashiro
@rainy 现在可以访问了吗
博主 snowy
@Mashiro 我浙江金华电信的100M光纤,MacOS10.12.6,所有的cdn资源都是404,进主页只有首图没有文章,我现在临时的解决办法是把cdn资源下载下来放回本地。但是现在主页偶尔还是会进不去,报错就是上面的截图跟记录
博主 11033468
3.07 BUG反馈 主页视频设置好了,卡在视频第一针 不能播放,同样的视频链接Siren原版主题可以
博主 Mashiro
@11033468 演示站我加上了视频 https://sakura.2heng.xin/
可能是你视频的编码问题
先试试这个视频文件:https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.3/The Pet Girl of Sakurasou.mp4
博主 二十二
欢迎使用WordPress。这是您的第一篇文章。编辑或删除它,然后开始写作吧!
1 条评论
Fatal error: Uncaught Error: Call to undefined function wp_statistics_pages() in /www/wwwroot/www.enmm.top/wp-content/themes/Sakura/tpl/content.php:37 Stack trace: #0 /www/wwwroot/www.enmm.top/wp-includes/template.php(690): require() #1 /www/wwwroot/www.enmm.top/wp-includes/template.php(647): load_template(‘/www/wwwroot/ww…’, false) #2 /www/wwwroot/www.enmm.top/wp-includes/general-template.php(155): locate_template(Array, true, false) #3 /www/wwwroot/www.enmm.top/wp-content/themes/Sakura/index.php(58): get_template_part(‘tpl/content’, ”) #4 /www/wwwroot/www.enmm.top/wp-includes/template-loader.php(74): include(‘/www/wwwroot/ww…’) #5 /www/wwwroot/www.enmm.top/wp-blog-header.php(19): require_once(‘/www/wwwroot/ww…’) #6 /www/wwwroot/www.enmm.top/index.php(17): require(‘/www/wwwroot/ww…’) #7 {main} thrown in /www/wwwroot/www.enmm.top/wp-content/themes/Sakura/tpl/content.php on line 37
怎么办
博主 Mashiro
@ 二十二 没有安装 wp_statistics插件
博主 北冥有鱼,其名为咸
最近博客一些小图片一直转圈加载不出来,大图片就一直可以加载,我把之前搞的一些东西全部搞回来也不得。后来换了一下别的主题那些小图片也正常了,我也把主题删掉重新安装回来也是这样子,访问我的博客就可以发现了,博主咋办呢?
博主 北冥有鱼,其名为咸
@北冥有鱼,其名为咸 截图
博主 Mashiro
@北冥有鱼,其名为咸 “最近”,所以我猜是你自己又修改过主题吧。可能是 js 文件中出现了错误导致剩下代码无法执行,请检查 console 里的报错信息,可以先在 console 里执行一条
lazyload()
试试。当然也可能是你的其他插件有问题。博主 阿慧
以为是我的文件出错了,我又重装了次,又重GitHub下载了主题,换了个服务器装上
点开文章就出错
Fatal error: Call to undefined function wp_statistics_pages() in D:\wwwroot\xiri.cf\z\wp-content\themes\Sakura\functions.php on line 469
博主 Mashiro
@阿慧 插件wp_statistics没有安装
博主 阿慧
@Mashiro 问题己解决!十分感谢,这还真没注意到!居然是缺了插件。
博主 阿慧
@Mashiro 还有个问题,大佬,请问下文章上方的图片是特色图片么?还是后台开的随机图片?
博主 Mashiro
@阿慧 是的,特色图片
博主 沧水
这个自适应的高度太高了……用户要翻很久才能翻到文章
博主 折纸
@沧水 沧水中国还是太小
博主 沧水
style=”height: 3900px; 首页图片为什么高度这么大….在哪改…
博主 Mashiro
@沧水 不太清楚为什么这样,我的演示站在你那里也是这样吗?
https://sakura.2heng.xin/
博主 1922792698
博主你的主题有一个bug,我不知道咋改,你能改一下吗,就是ajax的时候,在后台设置了一下可以异步刷新,但是再在后台设置一下就又不起作用了,就是说有时候开启异步刷新可以,但有时候又不可以了,你能看看吗
博主 Mashiro
@1922792698 你是说这两个吗
博主 wa
呜呜呜楼主 你的回复模板好可爱呀,我激活了这个模板之后 怎么才能回复别人的时候系统自动发送 这样的邮件通知呀。。。
博主 wa
@wa 那个Easy WP SMTP Settings 设置的126的邮箱,不知道有没有什么其他要求,然后我可以收到系统发来的审核通知邮件,但是给别人回复的时候别人收不到 通知邮件QAQ
博主 Mashiro
@wa Easy WP SMTP 可以发送测试邮件的,你再看看
博主 魂隐
又翻了四百条评论还是没搞定,,,鼠标指针那个该怎么修改啊或者去掉
博主 Mashiro
@魂隐 改css