這是我改的第二個 WordPress 主題,前后花了大半年的時間,選擇在博客一周年的時候開源出來算是一個紀(jì)念。從一年前技術(shù)為零走到今天,最該感謝的就是各個開源項目和教程,我深深體會到了開源精神的力量,所以這也算是對開源社區(qū)的微小貢獻(xiàn)吧。主題經(jīng)過測試,WordPress 全新安裝的情況下可直接使用,后臺的設(shè)置面板可滿足正常使用需要,無需手動修改代碼。
- 主題演示:詳情

本主題在 Louie 基于 Fuzzz 的 Akina 主題修改的主題 Siren 基礎(chǔ)上三次修改,顯然與前輩比起來,我唯一的貢獻(xiàn)就是把他們的代碼搞得亂七八糟了吧 =.=
全新重構(gòu)版
I. 特性
隨機(jī)封面圖

內(nèi)帶了一個返回隨機(jī)圖片的 API,把想要展示的圖放到 /cover/gallery
中即可。
Lazyload

使用了開源庫 jQuery-Lazyload,按需加載圖片,優(yōu)先加載縮略圖或占位圖,當(dāng)圖片顯示在 viewport 上時才加載原圖,提升網(wǎng)頁加載速度。 另外首頁文章列表設(shè)計了一個向上浮現(xiàn)的效果,算我最滿意的一個小 trick~
文章封面視頻

可將視頻設(shè)為文章封面,支持 hls 流視頻。使用說明見主題 wiki。
定制登陸及后臺界面
后端登陸界面及 Dashboard 美化(配色方案 Sakura),你也可以自行設(shè)計配色方案(請留意“后臺配置”頁面下的說明),同時也有配合 pjax 實現(xiàn)的前端登陸,前端登陸需自行用模板創(chuàng)建新頁面(page)。
支持 Bilibili 表情
后端請按提示切換后臺為明亮主題(個人資料頁切換),否則評論管理頁將出現(xiàn)表情鬼畜。

QQ/Gravatar 頭像

如果輸入了 QQ 號,留言將拉取 QQ 頭像,如果 QQ 號不存在或者是輸入了郵箱,將拉取 Gravatar 頭像。QQ 頭像接口和 Gravatar 鏡像都由我這邊提供。
評論插圖

該功能支持多個圖床的接口的選擇,目前支持的有 SM.MS、Imgur、Chevereto,使用前請在主題設(shè)置中配置相應(yīng)的代理和API Key。 注意:目前此功能需要 PHP 開啟 curl 支持,同時 Nginx/Apache 需要允許 POST 請求。
用戶 UA 及 IP 定位

使用純真 IP 數(shù)據(jù)庫。對了,還有一個高仿 Bilibili 的等級系統(tǒng),有空還打算再寫一個頭飾模塊。
文章目錄

使用了開源項目 tocbot,在需要目錄的文章任意位置輸入 [toc]
啟用。文章首字的大寫使用方法:把首字放到 [begin]
和 [/begin]
之間。
Mac 風(fēng)格代碼塊

代碼高亮渲染使用的是 highlightjs。代碼塊可全屏,你發(fā)現(xiàn)了嗎? 建議通過 Markdown 語法寫作以便代碼塊正常顯示,代碼高亮支持二十多種常見編程語言。
前端主題切換

這部分函數(shù)寫得有些凌亂,打算以后有空重構(gòu)一下,可留意主題的更新。字體請留意注意事項。
時光軸

使用了?Shawn?的設(shè)計。
相冊

基于 fancybox 實現(xiàn)的相冊功能,使用說明見主題 wiki。
郵件模板

Aplayer/HermitX 支持

修改了 APlayer 的部分樣式,文章內(nèi)插入音樂可使用 Hermit X 插件。
CDN 優(yōu)化
CDN 優(yōu)化 因為自己博客每天訪問量較大(日均 PV 3000左右),所以為了減少請求數(shù)及流量,以此控制 CDN 費用(每天0.2元左右),針對性地做了 CDN 優(yōu)化:主要是合并請求,并把不同類型的資源分配到不同的域名上,這些在后臺界面可以調(diào)整。其他內(nèi)容相對固定的資源,如貼圖和前端庫都放到了 jsDeliver 的公共庫上。
Github Cards

可通過短代碼添加: [github repo=”mashirozx/Sakura”]
移動客戶端
借助 PJAX 異步加載,便于基于 WebView 開發(fā)高性能的移動客戶端,切換頁面時無刷新,可以獲得接近 Native 的響應(yīng)速度。具體可以體驗我的安卓客戶端。
II. 注意事項
重要★★:
主題下載后請把文件夾名字改回 Sakura,也即,保證主題路徑為 wp-content/themes/Sakura/
。
啟用新主題/插件前備份數(shù)據(jù)庫是一個良好的習(xí)慣。雖然我保證主題不可能損壞你的數(shù)據(jù),但是畢竟數(shù)據(jù)無價,對吧?
建議安裝的插件☆
我也在使用的插件
- WP Statistics,統(tǒng)計插件,主題可選擇其接口以作頁面訪問計數(shù)。
- Login LockDown,登陸嘗試限制,避免前端登陸爆破。
- Wordfence Security,避免爆破和評論注入。提醒:該插件將在數(shù)據(jù)庫中記錄訪客信息,數(shù)據(jù)庫體積將略有增大。
- Akismet Anti-Spam,垃圾評論過濾。
- AMP,生成AMP 頁面,效果就是這樣,有利于提升 Google 排名。
- Autoptimize,頁面壓縮。
- Glue for Yoast SEO & AMP,AMP 增強(qiáng),需配合 Yoast SEO 及 AMP 插件使用。
- WP Super Cache,頁面緩存,為訪客自動生成緩存版網(wǎng)頁,提升訪問速度。
- Yoast SEO,搜索引擎優(yōu)化。
其他插件我沒用過,不保證兼容性。
兼容性
- 服務(wù)器端 WordPress 版本:4.8+
- PHP 版本:7.1+
前端
兼容主流 Chromium 內(nèi)核瀏覽器、FireFox 瀏覽器。不兼容 IE (360、QQ 等雙核瀏覽器請關(guān)閉 IE 模式)。
寫作規(guī)范
主題遵循 HTML5 規(guī)范,正文部分樣式完全兼容標(biāo)準(zhǔn) Markdown 語法,因此也建議配合 WP Editor.md 插件使用 Markdown 寫作,可參考《Markdown 編輯器語法指南》。
主題演示站有一篇 Markdown 語法展示,文章源碼在這里。
API
下面是一些主題內(nèi)已經(jīng)帶有的接口,無需重復(fù)構(gòu)建:
Cookie:see https://2heng.xin/2018/05/12/add-a-version-control-for-cookies/ 后續(xù)會考慮添加更多接口。
III. FAQ
1. 為什么開源的主題和這個博客不完全一樣?
我的博客上還有一些個性化的內(nèi)容,因為并不是所有人都會需要,一方面影響主題性能,另一方面為了開源還需為些部分添加開關(guān)和選項,耗費時間且沒意義,所有這些內(nèi)容在開源的主題中都已移除。
如果你有喜歡,f12 隨便抄,我沒意見~ PS. 其實本站主題已經(jīng)很久沒有更新了,開源版主題中反而有更多新功能的。
( ̄▽ ̄)” 標(biāo)準(zhǔn)主題演示在這里。
2. 前端代碼塊/WP 5.3 后臺崩壞?
原先推薦的 WP Editor.md 插件在 WP 5.3 中存在嚴(yán)重的兼容性問題。目前最新版主題已經(jīng)對評論部分做了處理,不再需要依賴該插件,所以如果更新到了 WP 5.3,請停用此插件。至于正文 Markdown 寫作,目前沒有好的方案,可以先用其他 Markdown 編輯器書寫并轉(zhuǎn)成 HTML,再粘貼進(jìn) WordPress。
3. 主題設(shè)置開關(guān)未生效?
啟用主題后先點一次保存。
4. 時差問題
后臺主題設(shè)置界面里添加了一個時差調(diào)節(jié)選項。
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];
}
網(wǎng)站建議都加上 CDN 以避免暴露服務(wù)器IP和被攻擊的風(fēng)險;可以使用 CloudFlare 的免費 CDN。
7. 兼容 IE 及 360 極速瀏覽器
前者太太太太舊啦,不考慮適配,不過 IE 瀏覽器可以看到一個友好的彈窗提醒。后者,明明是 IE 內(nèi)核卻要拼命偽裝成 Chrome 內(nèi)核,我能怎么辦呢?
8. 文章頁頁首裝飾圖(Feature Image)
后臺文章/頁面編輯器中有一個設(shè)置特色圖(Feature Image)的窗口,每篇文章/頁面需要單獨設(shè)置,沒有設(shè)置時默認(rèn)為空白。這不是 bug,因為并不是每篇文章都需要裝飾圖,視頻教程。
最后,關(guān)于 bug 反饋
在提出你認(rèn)為的 bug 之前,可先用這里的 Windows 調(diào)試環(huán)境(里面的主題版本是很早以前的了,請手動更新一下)復(fù)現(xiàn)出該問題;如果愿意幫我修改,歡迎提交 Pull request。除非是 bug,如果僅僅是其他樣式/功能的需求,請自己動手吧,不過 DIY 內(nèi)容也歡迎提交 Pull request。其他使用相關(guān)問題可在下面留言;主題相關(guān)問題不接受微信/郵件私信。
IV. 下載
項目發(fā)布于 GitHub:mashirozx/Sakura,如果下載速度慢可使用國內(nèi)鏡像,Pull Request 和 Issue 請?zhí)峤坏?GitHub。
目前正在重構(gòu)主題,Sakura v3.x 版本人基本不再維護(hù)。重構(gòu)版主題采用 webpack 打包,更易于維護(hù)和 DIY,重構(gòu)項目預(yù)覽(務(wù)必閱讀 README):https://github.com/mashirozx/Sakura2。
# 商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 協(xié)議(License):署名-非商業(yè)性使用-相同方式共享 4.0 國際 (CC BY-NC-SA 4.0)
# 作者(Author):Mashiro
# 鏈接(URL):https://2heng.xin/theme-sakura/
# 來源(Source):櫻花莊的白貓