MWordStar 响应式双栏 Typecho 博客主题

2019年08月07日

Mr. Ma

6865

88 评论

Typecho

博客 Typecho 无障碍

特点和功能

响应式设计
无障碍适配（Accessibility）
5 种不同风格的配色
两种不同风格的元素
代码高亮
丰富的设置选项
良好的 SEO 优化
自带点赞功能
文章可快速分享到社交网站
评论区自带 Emoji 表情面板
自动根据文章中的标题生成章节目录
长期维护
详细的使用说明（必看）

主题介绍

外观设计

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

主题依赖

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

Bootstrap 外观和布局
jQuery Bootstrap 依赖
jquery-qrcode 一个生成二维码的 jQuery 插件
highlight.js 代码高亮
IcoMoon 字体图标

其中 IcoMoon 的字体图标是可定制的，所以只包含了主题中出现的图标，字体图标的文件体积也很小。

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

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

主题安装

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

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

代码高亮

代码高亮的样式使用的是 VS2015 的暗色主题，和 Visual Studio Code 的默认主题差不多。主题支持 30 多种语言的代码高亮。详细的说明可以查看使用说明。

友情链接

友情链接分为 全站友情链接、首页友情链接、内页友情链接。全站友情链接 会在每个页面的侧边栏显示，首页友情链接 会在首页的侧边栏显示，内页友情链接 只会在友情链接的页面显示。

如需查看友情链接的设置说明可以访问：使用说明。

文章头图

文章头图可以在首页、文章页、侧边栏显示，您可以根据需求在主题外观设置中设置。文章头图来源支持自动获取文章的第一张图片和手动输入图片 URL。

无障碍（Accessibility）

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

目前国内的很多网站都只注重外观，忽略了残障人士的可访问性。但是想要做好网站的用户体验，无障碍适配肯定是少不了的。

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

主题可完美支持键盘访问，颜色对比度也符合标准。

小提示：如果您是屏幕阅读器用户，为了您的浏览体验，不建议使用 IE 浏览器。

Emoji 表情

主题评论区包含一个 Emoji 表情面板，您可以在后台启用或禁用。Emoji 表情面板包含 1466 个表情，这些表情都是按照分类动态加载的，您不用担心性能问题。

Emoji 表情面板也进行了无障碍适配，可支持键盘访问和屏幕阅读器朗读。

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

兼容性

因为本主题使用了 HTML5 和 CSS3，需要 IE10 及以上浏览器才能完美兼容。IE8 及以下浏览器显示可能会出现一些问题。

插件适配

因为本人很少使用插件，所以目前适配的插件比较少。

下面是已适配的插件：

Sticky 文章置顶插件

其它

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

码云仓库地址：https://gitee.com/changbin1997/MWordStar

主题使用 MIT License 开源。

如果您在使用这个主题时遇到 Bug 或有任何问题和建议都可以在博客评论区留言，也可以在 Github 的 issues 反馈。

本项目需要感谢 JetBrains 提供的免费开发工具。

版权声明：本文为原创文章，版权归 Mr. Ma's Blog 所有，转载请联系博主获得授权！
本文地址：https://www.misterma.com/archives/812/
如果您对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。

发表评论

评论内容

姓名

电子邮件地址

网站（选填）

已有 88 条评论

龙魂 5天前
回复

希望下次更新，把评论人的头像改成自动获取QQ头像😀
1. Mr. Ma 作者 5天前
  回复
  
  @龙魂
  这个会考虑增加的
  1. 龙魂 5天前
    回复
    
    @Mr. Ma
    楼主大大，评论通知插件能分享下吗
    
    Mr. Ma 作者 5天前
    回复
    
    @龙魂
    评论通知插件的话可以看看 CommentToMail。我的评论回复邮件通知其实没有用插件，是手动回复邮件的。
moniko 5天前
回复

是否可以增加评论回复可见功能？
1. Mr. Ma 作者 5天前
  回复
  
  @moniko
  你说的评论回复可见指的是？
  1. moniko 4天前
    回复
    
    @Mr. Ma
    博文内容回复可见
    
    Mr. Ma 作者 4天前
    回复
    
    @moniko
    会考虑增加的
a 7天前
回复

有没有这个功能：下滑页面的时候，自动隐藏顶栏，上滑的时候显示顶栏。
1. Mr. Ma 作者 7天前
  回复
  
  @a
  暂时没有，目前的顶栏是固定的。
a 9天前
回复

置顶要怎么操作啊？
1. a 9天前
  回复
  
  @a
  哦不用回了看到了嘤嘤嘤
大星派 11天前
回复

博主您好，请教一下，我把主题复制到usr/themes/文件夹下，改名为MWordStar，在控制台 -> 外观里什么都没有显示，只是有默认主题。我是用树莓派做服务器搭建了LAMP环境，apache2.4，PHP7.0，M10，不知道怎么样解决这个问题，请教博主。
1. Mr. Ma 作者 11天前
  回复
  
  @大星派
  你解压了吗？如果是正常解压到当前文件夹的话，解压后的文件夹名称就是 MWordStar，不需要改名。还有你是直接克隆仓库还是在 Releases 中下载？
  1. 大星派 11天前
    回复
    
    @Mr. Ma
    解压了，我是克隆仓库，在usr/themes/文件夹中解压出来是MWordStar-master，然后我改名为MWordStar了，但是在控制台 -> 外观中没有显示，然后我试了其他的主题，也是不能显示，博主有没有遇到过这种情况，怎么解决，谢谢回复！
    
    Mr. Ma 作者 11天前
    回复
    
    @大星派
    看一下你的 Typecho 程序的版本，如果版本太老也可能无法使用，还有 usr 和 themes 目录是否可以读取。
    
    大星派 11天前
    回复
    
    @Mr. Ma
    Typecho 版本 1.1 (17.10.30), 我最近刚刚安装的， usr 和 themes 目录，都是全部777权限，可读可写可执行，在网上搜索这个问题，也没有找到类似的，很困惑
    
    Mr. Ma 作者 11天前
    回复
    
    @大星派
    会不会是你的 Typecho 程序不完整？你可以把当前的 Typecho 程序删了重下试一下。如果还不能解决的话，我也暂时没办法，还没遇到过这种情况。
    
    大星派 11天前
    回复
    
    @Mr. Ma
    找到问题了，我把文件放到/build/usr/themes/文件夹中了，应该放到/html/usr/themes/文件夹中，现在可以了，谢谢帮助！
    
    大星派 11天前
    回复
    
    @Mr. Ma
    好的，谢谢了
2. 大星派 11天前
  回复
  
  @大星派
  usr的权限已经设置成chmod 777，依然不行
emiyakaito 12天前
回复

不好意思，打扰了。
点赞失灵了。
只要使用Qplayer就会这样。地址：https://github.com/Jrohy/QPlayer-Typecho-Plugin
请问有办法解决吗？如果不行，我只能换其他插件了。
因为我觉得这个还蛮好的。cPlayer太深奥，这个软件已经会放歌曲了。
1. Mr. Ma 作者 11天前
  回复
  
  @emiyakaito
  QPlayer 和我主题中用到的一个生成二维码的库有冲突，目前除了删除分享功能外暂时没有好的解决方法。
  1. emiyakaito 11天前
    回复
    
    @Mr. Ma
    好的，谢谢。
emiyakaito 12天前
回复

谢谢大神的辛勤劳作。
我试了很多音乐插件。Aplayer可以网页内置播放器，但cplayer，地址https://github.com/journey-ad/cPlayer-Typecho-Plugin。特别是YoduBGM，亲测，基础版本是可以使用的，地址https://github.com/jrotty/YoduBGM。
请问大神，有没有意向下次更新写入插件之类的，或者怎么让这两个插件生效在你的主题里？😀
1. 龙魂 5天前
  回复
  
  @emiyakaito
  可以试试梨花带雨播放器，百度就可以搜到
2. Mr. Ma 作者 12天前
  回复
  
  @emiyakaito
  cPlayer https://github.com/journey-ad/cPlayer-Typecho-Plugin 可以正常使用。YoduBGM https://github.com/jrotty/YoduBGM 这个播放按钮显示在网站的右上方，我的主题的导航栏的层级比播放按钮高，这就会导致播放按钮被导航栏挡住，解决方法就是在主题外观设置的自定义CSS 中加入 .ymusic {z-index: 1030;} 。
  1. emiyakaito 12天前
    回复
    
    @Mr. Ma
    感谢，就是可不可以设置颜色呢？在css里面，将YoduBGM 图标改成黑色。
    或者要是把它放在右下角。不在是置顶（是不可也可以通过css实现？）
    
    Mr. Ma 作者 12天前
    回复
    
    @emiyakaito
    样式之类的都可以通过 CSS 更改，可以直接在主题设置的自定义 CSS 中设置。
    
    emiyakaito 12天前
    回复
    
    @Mr. Ma
    非常感谢。
3. emiyakaito 12天前
  回复
  
  @emiyakaito
  补充一点，我是想实现网页端的音乐播放，不仅仅是文章内置音乐播放器（虽然Aplayer确实蛮好用的）。最好是左下角这类的。🧑
BK小小 15天前
回复

博主你好，我想问一下，如果你在上面创建比如留言板，他是不是一个a标签，如果要修改别的标签，应该去哪个文件修改，求回复，十分感谢！
1. Mr. Ma 作者 15天前
  回复
  
  @BK小小
  你说的是顶部的导航栏？
  1. BK小小 15天前
    回复
    
    @Mr. Ma
    对的，就是首页，文档归类，这部分，我想增加一个比如你的留言板，但是想改变这个跳转，让他调到我自己写的a标签
    
    Mr. Ma 作者 15天前
    回复
    
    @BK小小
    导航栏文件在 components 文件夹中的 header.php 中，其中导航栏就在 class 为 navbar-nav 的 ul 中。你增加自定义链接的时候，如果要保持样式一致性可以同时增加 li。
    
    BK小小 15天前
    回复
    
    @Mr. Ma
    博主。是这个地方吗。这应该怎么替换别的a标签啊。看不明白啊
    
    Mr. Ma 作者 15天前
    回复
    
    @BK小小
    你不需要替换，只需要把 li 列表项加入到 ul 中。例如 <li class="nav-item><a href="#">链接</a></li>，你可以把这个包含 li 和 a 的代码加入到 ul 中。
    
    BK小小 15天前
    回复
    
    @Mr. Ma
    而且我试了，a标签不能点击，就是不能跳转
    
    BK小小 15天前
    回复
    
    @Mr. Ma
    博主，我加上了这一条，但是它跑到上面去了，不和其他的几个导航一条线，我的站vwlin.top
    
    Mr. Ma 作者 15天前
    回复
    
    @BK小小
    你只加了 li 标签，在 li 标签中还需要加 a 标签，还有如果要保持样式一致还需要给 li 标签加 nav-item 的 class。
    
    BK小小 15天前
    回复
    
    @BK小小
    :-(，不能复制代码吗。。。。。
    
    Mr. Ma 作者 15天前
    回复
    
    @BK小小
    在我的博客评论区中如果要插入代码需要用 Markdown 语法，直接粘贴代码是无法显示的。
    
    BK小小 15天前
    回复
    
    @Mr. Ma
    我的那个a标签在最后
    
    Mr. Ma 作者 15天前
    回复
    
    @BK小小
    a 标签也需要加一个 nav-link 的 class
    
    BK小小 15天前
    回复
    
    @Mr. Ma
    博主博主，，，我调好了，但是怎么让他去最后一个位置呢
    <li class="nav-item dropdowna"> <a class="nav-link dropdowna-toggle" href="https://vwlin.top/usr/themes/toolspage/"> 工具站</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> </div> </li>
    vwlin.top
    
    Mr. Ma 作者 15天前
    回复
    
    @BK小小
    你把添加的 li 和 a 放到列表的最后面，也就是放到 </ul> 的前面。
    
    bk小小 15天前
    回复
    
    @Mr. Ma
    可以了，感谢博主，谢谢谢谢！！！！！😁😁😁
    
    BK小小 15天前
    回复
    
    @Mr. Ma
    <nav class="navbar navbar-expand-lg <?php echo $color['bar'] ?>">
    <div class="container"> <a class="navbar-brand" href="<?php $this->options->siteUrl(); ?>" title="<?php $this->options->title(); ?> 首页"><?php $this->options->title(); ?></a> <button class="navbar-toggler border-0 px-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-l
    abel="导航菜单"> <span class="navbar-toggler-icon"></span>
    </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item <?php echo $this->is('index')?'active':''; ?>"> <a class="nav-link" <?php if($this->is('index')): ?> <?php endif; ?> href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a> </li> <?php if ($this->options->navbar && in_array('showClassification', $this->options->navbar)): ?> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="javascript:;" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 文章分类 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <?php $this->widget('Widget_Metas_Category_List')->parse('<a class="dropdown-item" href="{permalink}">{name}</a>'); ?> </div> </li> <li class="nav-item><a href="https://vwlin.top/usr/themes/toolspage/">工具站</a></li>
x47b 25天前
回复

图片无法显示编辑时[]里写的介绍文字
1. Mr. Ma 作者 25天前
  回复
  
  @x47b
  图片说明只会通过 alt 和 title 属性显示。
10082009 33天前
回复

Amazing😆
小飞 38天前
回复

Url 可以美化下吗
https://www.misterma.com/archives/812/ 变成 https://www.misterma.com/blog/xxxxxxx-title-wenzhang
1. Mr. Ma 作者 38天前
  回复
  
  @小飞
  URL 不归主题管，你可以在 Typecho 的永久链接设置中设置。
svip 38天前
回复

发布时间和最后编辑是不是可以设置为 Y-m-d H:i:s 这种时间日期格式
1. Mr. Ma 作者 38天前
  回复
  
  @svip
  我看了一下，大多数博客的文章发布时间都只精确到日。
adgjm531 43天前
回复

现在Typecho的插件是不是都用不了了，随便启用一个插件首页都会出现这种，删掉也没用
Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'BaiduLinkSeo_Plugin' does not have a method 'post' in /www/wwwroot/blog.888lab.cn/var/Typecho/Plugin.php on line 489
Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'Sticky_Plugin' not found in /www/wwwroot/blog.888lab.cn/var/Typecho/Plugin.php on line 489
1. Mr. Ma 作者 43天前
  回复
  
  @adgjm531
  从报错信息来看，可能是插件的问题。你切换到其它主题看看插件是否能正常使用。
adgjm531 43天前
回复

请问下开发板和发行版啥区别的，开发板友情链接需要 JSON 格式数据，不知道发行版用不用
1. Mr. Ma 作者 43天前
  回复
  
  @adgjm531
  发行版的前端静态资源是使用构建工具打包过的，开发板没有。友情链接无论是开发板还是发行版都是一样的 JSON。
a 45天前
回复

大佬请教下，怎么设置每页的文章条数啊？
1. Mr. Ma 作者 45天前
  回复
  
  @a
  在顶部设置的下拉菜单中选择阅读，进入阅读设置后可以更改每页文章数目。
  1. a 45天前
    回复
    
    @Mr. Ma
    谢谢大佬
svip 60天前
回复

主题很好，文章或文章列表的那个框框，在高分辨率屏幕下，能不能设置成按照百分比自动拉伸的。
1. Mr. Ma 作者 60天前
  回复
  
  @svip
  自动拉升的话，文章头图的尺寸和比例不太好控制。
美图博客 72天前
回复

反馈一个bug在手机端访问的，我在头图还没加载完毕的时候进入文章内容页面，然后返回到列表后，会发现列表头图都无法加载出来了。只能刷新页面才可以。
1. Mr. Ma 作者 72天前
  回复
  
  @美图博客
  这应该是一些浏览器的特性吧，我目前暂时还没有遇到过这个问题。
  1. 美图博客 72天前
    回复
    
    @Mr. Ma
    我在很多手机浏览器测试都是这样，可能你需要清理以下图片缓存，然后最好在点击下一页的时候，图片还没加载出来之前点进内容页。然后再返回出来，就会发现了。
    
    Mr. Ma 作者 72天前
    回复
    
    @美图博客
    这应该是浏览器停止加载后缓存了上一个页面，当你返回后浏览器就直接显示缓存内容。只要不是用 img 加载都会有这个问题。
听听 112天前
回复

大佬我又来了。在正文里插入图片的话，比如说是4:3的比例，在电脑上显示正确，在手机上显示则会被拉长变形。不知是否有什么设置上的奥妙？🖖
1. Mr. Ma 作者 112天前
  回复
  
  @听听
  我测试了一下，4 比 3 的图片在手机上不会变形，下面是使用 Safari 和 Chrome 测试的截图，你可以复制图片地址到浏览器中看一下。
  https://s1.ax1x.com/2020/03/20/8cziqK.png
  1. 听听 112天前
    回复
    
    @Mr. Ma
    嗯嗯，谢谢及时回复，我又重新测试了，禁用了之前加载的一个编辑器插件，用原生编辑器，图片就不会变形了。真是，唉。好难取舍。
夜雨 114天前
回复

请问作者底部ICP备案链接怎么改？因为有些服务器提供商要求ICP备案要正确链接到备案官网
1. Mr. Ma 作者 114天前
  回复
  
  @夜雨
  你可以直接在 ICP备案号的输入框中填写链接，比如 <a href="http://xxx.com">京ICP备XXX</a>，在 href 中填写链接地址。
泉来 126天前
回复

请问大佬，为什么用您的主题我的插件就失效了呢？
1. Mr. Ma 作者 126天前
  回复
  
  @泉来
  什么插件？
  1. 泉来 124天前
    回复
    
    @Mr. Ma
    不好意思，没有看到回复。就是雪花效果的Snow插件地址：https://github.com/journey-ad/Snow-Typecho-Plugin/，和音乐播放器APlayer for Typecho | Meting插件，地址：https://github.com/MoePlayer/APlayer-Typecho，谢谢！
    
    Mr. Ma 作者 123天前
    回复
    
    @泉来
    这应该是插件冲突的问题，不是主题的问题，即便我把主题切换到 typecho 的默认主题，启用插件的时候还是会出现 Server Error 的错误。在 APlayer-Typecho 的 Issues 也有人在反馈这个问题。https://github.com/MoePlayer/APlayer-Typecho/issues/75
    
    泉来 123天前
    回复
    
    @Mr. Ma
    播放器插件启用出现Server Error的错误是因为没有把插件的名称该为Meting，这个在github的readme中提到，我的typecho中一共安装了三个插件，使用默认主题三个插件都能正常工作，使用你的主题三个插件都不能工作（这里的情况是没有显示效果）。我只是作为体验者提出我使用中的问题，并不是对您的主题而抱怨不止。谢谢你可以理解，希望你可以关注一下这个问题，谢谢大佬🐶🐶！！
    希望大佬的主题越做越好！
    
    Mr. Ma 作者 123天前
    回复
    
    @泉来
    关于插件兼容性的问题目前已经修复，可以到 Github 仓库克隆最新的主题。
    
    泉来 123天前
    回复
    
    @Mr. Ma
    谢谢！大佬的主题确实很棒的，简洁，美观，清晰，明了！在找了这么多主题中，最喜欢这一款！👍👍👍
jclser大人 164天前
回复

😀无意中点进来的，主题做的很不错，不过不喜欢你的这个配色，太灰了。构造简单，相信要实现JS换色不难，不过看你几乎都没有什么特效呀，连go to top都是那么的硬核。表情太多，眼都看花了。
p.s.你的主题我下载了，当然我提的建议都是我自己要改的。感谢分享
1. Mr. Ma 作者 164天前
  回复
  
  @jclser大人
  哈哈，设计和配色方面我确实不太擅长。
我很中意您哟 269天前
回复

用了2天提几个建议啊不要嫌弃我啰嗦，
1.缩列图可以抓取就好了
2.可以设置首页帖子数量，
3.文章归类能精简一点就好了，可以显示12个月的加历史的，有些博主如果做5-6年的博客就翻不完了，
4.标签可以随机展示，每个页面都不同，
5.文章上或下放可以加分享功能
6.个人觉得把原来的巨幕大图改成沉浸式轮播也可以更加美观实用一点
7.手机版出现的东西太多了，评论/最新文章/归档其实都可以不要的，还有手机版顶栏也有点大不秀气。
8.后台可以设置前台的色就更加完美了。
加几个功能就可以付费主题了，我已经开始存钱了
1. Mr. Ma 作者 268天前
  回复
  
  @我很中意您哟
  非常感谢你的建议，你提的一些功能后面会增加的。不过因为这个主题只能在业余时间开发，所以开发这些功能可能需要很长时间。
网赚博客 335天前
回复

交换链接吗
1. Mr. Ma 作者 335天前
  回复
  
  @网赚博客
  要交换链接的话可以到友情链接页面留言。
  1. 网赚博客 334天前
    回复
    
    @Mr. Ma
    交换的是首页链接吗？
    
    Mr. Ma 作者 334天前
    回复
    
    @网赚博客
    交换链接之类的可以到友情链接页面或留言板留言，首页和内页都可以交换。