是我改的第二个 WordPress 主题,前后花了大半年的时间,选择在博客一周年的时候开源出来算是一个纪念。从一年前技术为零走到今天,最该感谢的就是各个开源项目和教程,我深深体会到了开源精神的力量,所以这也算是对开源社区的微小贡献吧。主题经过测试,WordPress 全新安装的情况下可直接使用,后台的设置面板可满足正常使用需要,无需手动修改代码,这里是一个演示站 这是一个 Windows 演示环境;不过也想以自己小白的经历,善意地提醒这个主题可能不适合新手折(xué)腾(xí),因为我的代码写得太乱了啊。

效果展示

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

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

I. 特性

随机封面图

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

Lazyload

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

PS. 因为不熟悉 WordPress 的后台界面函数,所以后台管理界面中评论图片无法自动 lazyload,已经在后台引入了相应的库,如果要加载图片,有两种方法:a. 简单粗暴地在浏览器 console 手动输入 lazyload();b. 注意到 WordPress 自带的插件 Hello Dolly 了吗?在其将显示到 dashboard 的 <p> 标签上加上一个属性 onclick=(lazyload();),在 dashboard 中点击那句话就可以了,这是我现在使用的方法。

另外首页文章列表设计了一个向上浮现的效果,专业地说是叫交互式还是响应式吗?反正这是我最满意的一个小 trick~

定制登陆界面

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

支持 Bilibili 表情

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

QQ/Gravatar 头像

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

评论插图

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

用户 UA 及 IP 定位

用户 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。代码块可全屏,你发现了吗?

前端主题切换

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

时光轴

时光轴
使用了 Shawn 的设计。

邮件模板

邮件模板

Aplayer/HermitX 支持

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 用于评论”,否则评论插入的颜文字将无法转义。如果你实在不想用这个插件,颜文字转义的问题请自己解决。

建议安装的插件☆

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 的,我已经删掉了,应该不会有兼容问题吧。

Adobe Typekit 字体

切换字体功能中的 Serif 字体使用的是开源字体 思源宋体,请 在此 登陆并选择"ADD TO KIT"将整个 font-family 导入你的 kit,后台界面要填写的 ID 是你获得的 Embed code 中的 js 文件名,如以下的就需要填写 yqo7yxr。注意每个 ID 都是与域名绑定的,所以我的 ID 在你那里自然用不了。免费账号有每月 25,000 PV 的使用次数限制,不过经过我几天的使用发现,开启了主题的 pjax 异步加载后似乎只会计算到第一次着陆时的访问,所以猜测 Adobe 应该是用 yqo7yxr.js 这个文件的下载次数计数的。

<script src="https://use.typekit.net/yqo7yxr.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

如果你认为首页加载字体影响了网页加载速度,或者很介意 console 里的404信息(这实际是 Adobe 那边的问题),那么三个 ID 都空着就可以了,就像我的演示站那样。你也可以选择本地安装思源宋体以免去加载网络字体。

API

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

III. FAQ

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

2. 左下角的看板娘如何实现?
看板娘仅仅是个人喜好,实际上放在网页上既不美观又影响性能,所以开源的主题中没有放入激活脚本,不过 Live2d.jslib.min.js 中已经引入;如要添加看板娘,请自行参考这篇添加 HTML 容器以及激活脚本,但是无需重复引入 Live2d.js

3. 左下角播放器 bug?
参见这里

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

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

5. 主题设置开关未生效?
个别开关,比如评论是否折叠,如果选择不折叠后没生效请先选择一次折叠并保存,然后再选择不折叠,方可生效。

6. 时差问题
如果遇到了显示的文章发布时间和评论提交时间时差问题,请把这里添加的 _gmt 字段都删掉。

7. 插入全屏浏览的图片?

[![图片标题](../example.th.png)](../example.png)

第一个括号是页面上直接显示的图,可以放一个缩略图;第二个括号是点击后展示的大图。效果点击本文任意图片即可见。

提醒:有添加自动生成预览图功能的打算,想法是将普通的 ![title](url) 形式的图片自动转换为 [![title]](url_th)(url) 的形式,虽然到时候可以加一个是否启用自动转换功能的选项,但是想要在启用后直接兼容现有 [![title]](url_th)(url) 格式是不太可能的。所以,为了今后的兼容性,现在先预留一个标识符:#old,添加方法:[![图片标题](../example.th.png#old)](../example.png)# 标识不同于 ? 所添加的参数,其后的标识符不会影响图片的拉取和缓存。如果今后希望使用自动转换功能,且不想大规模修改文章中插图格式的,请在现有每张需要预览的图上加入此标识。

8. 使用了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

9. 兼容 IE 及 360 极速浏览器
前者太太太太旧啦,不考虑适配,不过 IE 浏览器可以看到一个友好的弹窗提醒。后者,明明是 IE 内核却要拼命伪装成 Chrome 内核,我能怎么办呢?

最后,关于 bug 反馈
在提出你认为的 bug 之前,请先用这里的 Windows 调试版复现出该问题;如果愿意帮我修改,欢迎提交 Pull request除非是 bug,如果仅仅是其他样式/功能的需求,请自己动手吧,不过 DIY 内容也欢迎提交 Pull request。其他使用相关问题可在下面留言;主题相关问题不接受微信/邮件私信。

IV. 下载

GitHub stars   GitHub watchers   GitHub forks   GitHub followers

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