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