簡(jiǎn)潔的雙欄設(shè)計(jì)，恰到好處的細(xì)節(jié)優(yōu)化，多樣實(shí)用的功能，就是外觀可能會(huì)樸素一點(diǎn)，但對(duì)于喜歡折騰的你而言，也不是上面難以接受的事情了。一起來看看這款簡(jiǎn)潔的 Typecho 雙欄博客主題吧。
- 第三方演示：詳情
主題預(yù)覽
主題元素包含圓角和直角兩種風(fēng)格，您可以根據(jù)喜好在主題外觀設(shè)置中切換，下面是直角風(fēng)格的首頁(yè)截圖： 主題還包含了幾套不同風(fēng)格的配色，您可以根據(jù)喜好在主題外觀設(shè)置中切換。
特點(diǎn)和功能
- 響應(yīng)式設(shè)計(jì)
- 無(wú)障礙適配（Accessibility）
- 5 種不同風(fēng)格的配色
- 兩種不同風(fēng)格的元素
- 代碼高亮
- 豐富的設(shè)置選項(xiàng)
- 良好的 SEO 優(yōu)化
- 自帶點(diǎn)贊功能
- 豐富的側(cè)邊欄組件
- 評(píng)論區(qū)自帶 Emoji 表情面板
- 自動(dòng)根據(jù)文章中的標(biāo)題生成章節(jié)目錄
- 長(zhǎng)期維護(hù)
- 詳細(xì)的?使用說明（必看）
主題介紹
外觀設(shè)計(jì)
因?yàn)槲覀€(gè)人比較喜歡兩欄布局，所以這個(gè)主題也使用了兩欄布局的設(shè)計(jì)。
主題依賴
主題主要用到了一下幾個(gè)庫(kù)和框架：
- Bootstrap?外觀和布局
- jQuery?Bootstrap 依賴
- jquery-qrcode?一個(gè)生成二維碼的 jQuery 插件
- highlight.js?代碼高亮
- IcoMoon?字體圖標(biāo)
其中 IcoMoon 的字體圖標(biāo)是可定制的，所以只包含了主題中出現(xiàn)的圖標(biāo)，字體圖標(biāo)的文件體積也很小。
主題的靜態(tài)文件沒有使用任何 CDN 地址，所有文件都放在主題的?assets?目錄中。主題的生成目錄、點(diǎn)贊、快速分享 之類的功能都是自己手動(dòng)編寫的，所以用到的 JS 庫(kù)也比較少。
使用 Webpack 打包的版本前臺(tái)只需要加載一個(gè) CSS 和 一個(gè) JS 文件，所有 JS 庫(kù)都打包到了 JS 中，所有 CSS 和字體圖標(biāo)都打包到了 CSS 中。因?yàn)橛玫降膸?kù)比較少，而且字體圖標(biāo)和部分組件都是按需引入的，所以打包后的 CSS 和 JS 也比較小。
主題安裝
把主題上傳到 Typecho 的?usr/themes/?目錄，然后解壓，你也可以先解壓在上傳。
解壓后需要保證?themes?目錄下 有一個(gè)?MWordStar?目錄。
登錄 Typecho 的后臺(tái)管理，進(jìn)入?控制臺(tái)?->?外觀，如果看到?MWordStar?就點(diǎn)擊?啟用。
代碼高亮
代碼高亮的樣式使用的是 VS2015 的暗色主題，和 Visual Studio Code 的默認(rèn)主題差不多。主題支持 30 多種語(yǔ)言的代碼高亮。詳細(xì)的說明可以查看?使用說明?。
友情鏈接
友情鏈接分為?全站友情鏈接、首頁(yè)友情鏈接、內(nèi)頁(yè)友情鏈接。全站友情鏈接?會(huì)在每個(gè)頁(yè)面的側(cè)邊欄顯示，首頁(yè)友情鏈接?會(huì)在首頁(yè)的側(cè)邊欄顯示，內(nèi)頁(yè)友情鏈接?只會(huì)在 友情鏈接 的頁(yè)面顯示。
如需查看友情鏈接的設(shè)置說明可以訪問：使用說明?。
文章頭圖
文章頭圖可以在 首頁(yè)、文章頁(yè)、側(cè)邊欄 顯示，您可以根據(jù)需求在主題外觀設(shè)置中設(shè)置。文章頭圖來源支持自動(dòng)獲取文章的第一張圖片和手動(dòng)輸入圖片 URL。
側(cè)邊欄
下面是目前可以顯示在側(cè)邊欄的組件：
- 博客信息
- 搜索
- 最新文章
- 最新評(píng)論
- 文章分類
- 標(biāo)簽云
- 日歷歸檔
- 按月份的文章歸檔
- 登錄入口和 RSS
- 友情鏈接
側(cè)邊欄的每個(gè)組件您都可以選擇開啟或關(guān)閉，您還可以自定義側(cè)邊欄的組件排序順序。
無(wú)障礙（Accessibility）
上網(wǎng)對(duì)于大多數(shù)人來說是一件再簡(jiǎn)單不過的事，但是對(duì)于一些身體有缺陷的殘障人士來說卻是一件非常困難的事。
目前國(guó)內(nèi)的很多網(wǎng)站都只注重外觀，忽略了殘障人士的可訪問性。但是想要做好網(wǎng)站的用戶體驗(yàn)，無(wú)障礙?適配肯定是少不了的。
主題針對(duì)屏幕閱讀器做了大量?jī)?yōu)化，并 在?NVDA?和?VoiceOver?這兩款屏幕閱讀器上做過測(cè)試，無(wú)論是 PC 還是移動(dòng)設(shè)備都能完美朗讀。主題能準(zhǔn)確傳達(dá)需要朗讀的內(nèi)容和信息，對(duì)于盲人來說，使用標(biāo)準(zhǔn)的屏幕閱讀器基本可以無(wú)障礙操作。
主題可完美支持鍵盤訪問，顏色對(duì)比度也符合標(biāo)準(zhǔn)。
小提示：如果您是屏幕閱讀器用戶，為了您的瀏覽體驗(yàn)，不建議使用 IE 瀏覽器。
Emoji 表情
主題評(píng)論區(qū)包含一個(gè) Emoji 表情面板，您可以在后臺(tái)啟用或禁用。Emoji 表情面板包含 1466 個(gè)表情，這些表情都是按照分類動(dòng)態(tài)加載的，您不用擔(dān)心性能問題。
Emoji 表情面板也進(jìn)行了無(wú)障礙適配，可支持鍵盤訪問和屏幕閱讀器朗讀。
下面是 Emoji 表情面板的截圖：
兼容性
因?yàn)楸局黝}使用了 HTML5 和 CSS3，需要 IE10 及以上瀏覽器才能完美兼容。IE8 及以下瀏覽器顯示可能會(huì)出現(xiàn)一些問題。
插件適配
因?yàn)楸救撕苌偈褂貌寮阅壳斑m配的插件比較少。
下面是已適配的插件：
已適配的插件不需要到 PHP 文件中添加插件代碼，沒有適配的插件可能需要按照插件說明到 PHP 文件中添加相應(yīng)的插件代碼。
其它
- 主題 Github：https://github.com/changbin1997/MWordStar
- 碼云倉(cāng)庫(kù)地址：https://gitee.com/changbin1997/MWordStar
- 主題使用?MIT License?開源。
如果您在使用這個(gè)主題時(shí)遇到 Bug 或有任何問題和建議都可以在?博客評(píng)論區(qū)?留言，也可以在 Github 的?issues?反饋。
本項(xiàng)目需要感謝?JetBrains?提供的免費(fèi)開發(fā)工具。
