这是一套简洁的 Typecho 双栏博客主题，也是 我的博客 之前使用的主题。

我现在使用的主题是 Facile ，有兴趣的话也可以访问 我的博客 或 Github 查看。

主题在线演示地址：https://changbin1997.github.io/MWordStar/web/

主题演示站的页面都是静态页面，不能发评论和点赞。因为演示站不会随着主题一起更新，所以你在演示站看到的效果可能和最新版本的主题也会有些不一样。

主题下载地址：https://github.com/changbin1997/MWordStar/releases

主题使用说明：https://mwordstar.misterma.com/

目前主题没有相关的交流群，在使用过程中遇到问题可以直接到 我的博客 留言，也可以到主题 Github 的 issues 反馈，我的博客和 Github issues 都有回复邮件通知。

下面是主题首页截图：

主题元素包含圆角和直角两种风格，您可以根据喜好在主题外观设置中切换，下面是直角风格的首页截图：

小头图模式：

也可以给文章设置单独的头图样式：

深色模式：

主题目前包含 18 种配色组合：

• 响应式设计
• 无障碍适配（Accessibility）
• 支持多语言（i18n）
• 18 套不同风格的配色（支持深色模式）
• 两种不同风格的元素
• 多套自定义页面模板，包含时间线的文章归档、分类、标签云、友链、图表统计、Github 项目展示
• 代码高亮
• 支持短代码（Shortcode）
• 支持 MathJax 数学公式渲染
• 丰富的自定义选项
• 详细的图表统计
• 内置文章浏览量统计和点赞功能
• 内置文章置顶功能
• 丰富的侧边栏组件
• 内置 Emoji 表情面板
• 支持显示 QQ 头像和自定义 Gravatar 源
• 评论支持图片验证码和 Cloudflare Turnstile
• 支持自动根据文章中的标题生成章节目录
• 文章支持单独加密某一部分内容，评论后可查看
• 评论支持私密评论，只有评论者和管理员可见
• 支持图片懒加载
• 文章支持分页显示
• 文章列表支持多种排版组合
• 支持添加友情链接
• 支持 PJAX 无刷新跳转
• 支持 Service Worker 缓存
• SEO 友好
• 支持添加自定义 CSS、head 区域 HTML、footer 底部 HTML，可以方便的修改主题样式和添加分析 JS
• 长期维护
• 详细的 使用说明（必看）

因为我个人比较喜欢两栏布局，所以这个主题也使用了两栏布局的设计。

主题支持 18 种配色组合，支持深色模式。

区块和元素支持圆角和直角。

主题主要用到了一下几个库和框架：

• Bootstrap 外观和布局
• jQuery Bootstrap 依赖
• jquery-qrcode 一个生成二维码的 jQuery 插件
• highlight.js 代码高亮
• IcoMoon 字体图标
• ECharts 生成和展示统计图表
• jquery-pjax 用于页面无刷新跳转
• MathJax 数学公式渲染

其中 IcoMoon 的字体图标是可定制的，所以只包含了主题中出现的图标，字体图标的文件体积也很小。ECharts 也只包含饼图和日历图，而且只会在统计页面加载。

主题的静态文件没有使用任何 CDN 地址，所有文件都放在主题的 assets 目录中。主题的生成目录、点赞、快速分享 之类的功能都是自己手动编写的，所以用到的 JS 库也比较少。

使用 Webpack 打包的版本前台只需要加载一个 CSS 和 一个 JS 文件，所有 JS 库都打包到了 JS 中，所有 CSS 和字体图标都打包到了 CSS 中。因为用到的库比较少，而且字体图标和部分组件都是按需引入的，所以打包后的 CSS 和 JS 也比较小。

代码高亮的 JS 模块也是按需加载，只有文章内有代码块才会加载。

MathJax 使用在线 CDN 加载，国内可以正常加载，只有检测到文章内有 MathJax 语言标记才会加载 MathJax 库。

主题支持 Service Worker 缓存，只有第一次会加载完整的 CSS 和 JS，下次访问直接使用缓存的 CSS 和 JS。

如果您没有二次开发需求的话，建议下载 Webpack 打包的版本，也就是后缀包含 bundle 的 zip 文件。前台的 JavaScript 使用了 ES6 语法，IE 系列浏览器和一些较老的浏览器可能无法正常运行，Webpack 打包的版本使用 Babel 转换过代码，可以在 IE 和较老的浏览器上运行。

只有发行版支持 Service Worker 缓存。

把主题上传到 Typecho 的 usr/themes/ 目录，然后解压，您也可以先解压在上传。

解压后需要保证 themes 目录下 有一个 MWordStar 目录。

登录 Typecho 的后台管理，进入 控制台 -> 外观，如果看到 MWordStar 就点击 启用。

代码高亮目前包含三套主题配色，分别是 Stack Overflow（浅色）、Github（深色）、Sunburst（高对比度）。主题支持 30 多种语言的代码高亮，详细的语言支持列表和说明可以查看 使用说明 。

文章头图可以显示在文章列表、文章页顶部、侧边栏最新文章组件。

文章列表支持大图和小图模式，可以统一设置，也可以每篇文章使用不同的方案，文章列表也可以直接显示全文。

文章头图来源可以手动输入图片 URL，也可以自动抓取文章内的第一张图片，也可以设置一堆图片 URL 随机显示。

下面是目前可以显示在侧边栏的组件：

• 博客信息
• 搜索
• 最新文章
• 最新评论
• 文章分类
• 标签云
• 日历归档
• 按月份的文章归档
• 登录入口和 RSS
• 友情链接
• 文章章节目录
• 自定义HTML
• 语言选择

侧边栏的每个组件您都可以选择开启或关闭，您还可以自定义侧边栏的组件排序顺序。

上网对于大多数人来说是一件再简单不过的事，但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。

主题针对屏幕阅读器做了大量优化，并 在 NVDA 、VoiceOver 、TalkBack 这些屏幕阅读器上做过测试，无论是 PC 还是移动设备都能完美朗读。主题能准确传达需要朗读的内容和信息，对于视障人群来说，使用标准的屏幕阅读器基本可以无障碍操作。

主题可完美支持键盘访问，很多地方专门做了键盘适配，颜色对比度也符合标准。

主题后台设置也适配了屏幕阅读器。

评论区支持私密评论，只有评论者和网站管理员可见。

主题内置了用于评论验证的图片验证码和 Cloudflare Turnstile 支持，图片验证码开启就可以使用，Cloudflare Turnstile 注册账号可免费使用。

主题也内置了一个 Emoji 表情面板，包含很多类型的表情。

下面是 Emoji 表情面板的截图：

主题包含一个统计页模板，您可以在后台创建页面，页面的自定义模板选择 网站数据，标题可以随便写，创建完成后就可以在顶部导航栏访问了。

统计页包含基本的数据统计、分类文章占比图、文章更新日历图、评论动态日历图、阅读量排名前 5 的文章、评论量排名前 5 的文章。

基本数据统计如下：

分类占比统计图如下：

下面是评论动态日历图：

文章动态日历图和评论动态的日历图是差不多的，屏幕尺寸不同显示的月份数量也不同。

下面是文章评论排名表格：

文章阅读量排名表格和评论量排名的表格也是差不多的。

统计页面效果可以参考 https://www.misterma.com/data.html ，也可以直接访问 MWordStar 的静态演示站。

主题使用了少量的 CSS3，浏览器需要达到 IE10 才能完美兼容，IE8 和 9 也能使用，但是有些页面的显示 例如代码高亮和时间线显示可能会出现稍微偏移的情况。

MathJax 不一定能在 IE 系列浏览器渲染数学公式。

Github 直接 clone 的开发版 JS 无法在 IE 运行，需要下载发行版。

主题 Github：https://github.com/changbin1997/MWordStar

主题使用 MIT License 开源。

如果感觉主题用着还可以的话，也可以扫描下方的二维码打赏，金额随意：

非常感谢 ❤️

下面是 MWordStar 和 Facile 两个主题的打赏记录：