是我改的第二个 WordPress 主题,前后花了大半年的时间,选择在博客一周年的时候开源出来算是一个纪念。从一年前技术为零走到今天,最该感谢的就是各个开源项目和教程,我深深体会到了开源精神的力量,所以这也算是对开源社区的微小贡献吧。主题经过测试,WordPress 全新安装的情况下可直接使用,后台的设置面板可满足正常使用需要,无需手动修改代码,这里是一个演示站

本主题在 Louie 基于 Fuzzz 的 Akina 主题修改的主题 Siren 基础上三次修改,显然与前辈比起来,我唯一的贡献就是把他们的代码搞得乱七八糟了吧 =.=

GitHub 地址在文末(从而确保你看到了注意事项)。

I. 特性

随机封面图


内带了一个返回随机图片的 API,把想要展示的图放到 /cover/gallery 中即可。

Lazyload


使用了开源库 jQuery-Lazyload,按需加载图片,优先加载缩略图或占位图,当图片显示在 viewport 上时才加载原图,提升网页加载速度。

另外首页文章列表设计了一个向上浮现的效果,算我最满意的一个小 trick~

文章封面视频

Demo

可将视频设为文章封面,支持 hls 流视频。使用说明见主题 wiki

定制登陆界面



后端登陆界面及 Dashboard 美化(明亮主题),同时也有配合 pjax 实现的前端登陆,前端登陆需自行用模板创建新页面(page)。

支持 Bilibili 表情


后端请按提示切换后台为明亮主题(个人资料页切换),否则评论管理页将出现表情鬼畜。

QQ/Gravatar 头像


如果输入了 QQ 号,留言将拉取 QQ 头像,如果 QQ 号不存在或者是输入了邮箱,将拉取 Gravatar 头像。QQ 头像接口和 Gravatar 镜像都由我这边提供。

评论插图


该功能使用了 SM.MS 图床的接口。

用户 UA 及 IP 定位


使用纯真 IP 数据库。对了,还有一个高仿 Bilibili 的等级系统,有空还打算再写一个头饰模块。

文章目录


使用了开源项目 tocbot,在需要目录的文章任意位置输入 [toc] 启用。文章首字的大写使用方法:把首字放到 [begin][/begin] 之间。

Mac 风格代码块

import matplotlib
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import sklearn

# Load the data
oecd_bli = pd.read_csv("oecd_bli_2015.csv", thousands=',')
gdp_per_capita = pd.read_csv("gdp_per_capita.csv",thousands=',',delimiter='t',
                            encoding='latin1', na_values="n/a")

# Prepare the data
country_stats = prepare_country_stats(oecd_bli, gdp_per_capita)
X = np.c_[country_stats["GDP per capita"]]
y = np.c_[country_stats["Life satisfaction"]]

代码高亮渲染使用的是 highlightjs。代码块可全屏,你发现了吗?
建议通过 Markdown 语法写作以便代码块正常显示,代码高亮支持二十多种常见编程语言。

前端主题切换


这部分函数写得有些凌乱,打算以后有空重构一下,可留意主题的更新。字体请留意注意事项。

时光轴


使用了 Shawn 的设计。

相册


基于 fancybox 实现的相册功能,使用说明见主题 wiki

邮件模板

Aplayer/HermitX 支持


修改了 APlayer 的部分样式,文章内插入音乐可使用 Hermit X 插件。

CDN 优化

因为自己博客每天访问量较大(日均 PV 3000左右),所以为了减少请求数及流量,以此控制 CDN 费用(每天0.2元左右),针对性地做了 CDN 优化:主要是合并请求,并把不同类型的资源分配到不同的域名上,这些在后台界面可以调整。其他内容相对固定的资源,如贴图和前端库都放到了 jsDeliver 的公共库上。

移动客户端*

借助 PJAX 异步加载,便于基于 WebView 开发高性能的移动客户端,切换页面时无刷新,可以获得接近 Native 的响应速度。具体可以体验我的安卓客户端

II. 注意事项

重要★★:

主题下载后请把文件夹名字改回 Sakura,也即,保证主题路径为 wp-content/themes/Sakura/

启用新主题/插件前备份数据库是一个良好的习惯。虽然我保证主题不可能损坏你的数据,但是毕竟数据无价,对吧?

务必安装下面的必装插件。

必须安装的插件★

WP Statistics,统计插件,主题需要页面访问计数。

建议安装的插件☆

WP Editor.md,Markdown 编辑器,请开启“将 Markdown 用于评论”,否则评论插入的颜文字将无法转义。作为替代方案,你也可以选择使用官方插件Jetpack by WordPress.com,同样启用“将 Markdown 用于评论”功能。
Hermit X,基于 Aplayer 的播放器。
Easy WP SMTP,邮件支持。
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,搜索引擎优化。

其他插件我没用过,不保证兼容性。

系统兼容性

仅列出我的开发环境:

# PHP 版本
$ php -v
PHP 7.1.15-0ubuntu0.17.10.1 (cli) (built: Mar 14 2018 22:30:42) ( NTS )
# MySQL 版本
$ mysql -V
mysql  Ver 14.14 Distrib 5.7.21, for Linux (x86_64) using  EditLine wrapper
# Nginx 版本
$ nginx -v
Tengine version: Tengine/2.2.2 (nginx/1.8.1)
# 系统版本
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 17.10
Release:        17.10
Codename:       artful
# WordPress 版本
$ grep wp_version wp-includes/version.php
* @global string $wp_version
   $wp_version = '4.9.6';
  • 已兼容 PHP 7.2;PHP 最低版本要求为 7.1,否则你会看到莫名其妙的报错;
  • 可兼容 Windows(Wnmp),可在这里下载 Windows 调试版
  • Apache 我没用过,不清楚,不过有用过几个请求头(request header)相关的 PHP 函数好像是仅针对 Nginx 的,我已经删掉了,应该不会有兼容问题吧。

写作规范

主题遵循 HTML5 规范,正文部分样式完全兼容标准 Markdown 语法,因此也建议配合 WP Editor.md 插件使用 Markdown 写作,可参考《Markdown 编辑器语法指南》

API

下面是一些主题内已经带有的接口,无需重复构建:
Cookie:see https://2heng.xin/2018/05/12/add-a-version-control-for-cookies/

后续会考虑添加更多接口。

III. FAQ

1. 为什么开源的主题和这个博客不完全一样?
我的博客上还有个别页面后端混合使用了其他语言,以及有些地方使用了私有 API,这些部分在开源的主题中都已移除。所以开源的主题与本站的主题个别地方略有不同,标准主题演示在这里

2. 主题必装的插件异常怎么办?
因为上面列出来的插件我也在用,那么如果我这边插件和主题出现了兼容性问题,自然会想办法修复的,尤其是两个必装插件;然而开源主题并没有看到相应的更新,那就说明我这边没有遇到你认为的问题,请自己尝试禁用其他插件(必要的时候卸载,因为我也遇到过禁用后仍然导致异常的插件),或者试试全新安装 WordPress。

插件相关的问题还请联系插件开发者。我唯一能做的是提供自己的两个必装插件的配置:WP Editor.mdWP Statistics

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. 下载

更新记录:
2018/12/28 v3.0.9: 修复分享插件;不再使用 Adobe Typekit,改用 Google Fonts。
2019/01/02 v3.1.0: 修复主题配色功能。
2019/01/24 v3.1.1: 重要更新,引入 fancybox,新增视频封面,移除了前端库中的 live2d.js
2019/01/25 v3.1.3: 支持切换文章主题,其他细节修复。
2019/02/16 v3.1.4: 细节修复,后台评论插图 lazyload 修复、后台任意主题下都支持小电视表情啦~

广告加载失败了呢,你用了什么广告过滤插件是吧?QAQ *这是一则由 Google AdSense 自动推荐的广告,不代表本站立场

GitHub stars   GitHub watchers   GitHub forks   GitHub followers

项目发布于 GitHub:mashirozx/Sakura,如果下载速度慢可使用国内镜像,Pull Request 和 Issue 请提交到 GitHub。

另有 hexo 版主题分支:honjun/hexo-theme-sakura

需要服务器吗?我现在在用的这家最低 $3.5/月($2.5 版没有 IPv4),下面的邀请链接可以获得 $10 的奖励~
WordPress 主题 Sakura 🌸

若有幸您采用了我的主题,欢迎交换友链。您若喜欢,打赏一下也是极吼的~