目录

这是一套简洁的 Typecho 双栏博客主题,也是 我的博客 正在使用的主题。

主题演示地址:https://www.misterma.com

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

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

下面是主题首页截图:

MWordStar主题首页截图1

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

MWordStar直角风格首页截图

主题还包含了几套不同风格的配色,您可以根据喜好在主题外观设置中切换。

MWordStar不同配色的截图

扫描下面的二维码可在手机上预览

博客二维码

特点和功能

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

主题介绍

外观设计

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

主题依赖

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

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

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

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

主题安装

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

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

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

代码高亮

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

友情链接

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

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

文章头图

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

无障碍(Accessibility)

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

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

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

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

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

Emoji 表情

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

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

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

emoji面板截图

兼容性

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

插件适配

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

下面是已适配的插件:

其它

主题 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/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年05月16日 ©著作权归作者所有

发表评论

正在加载 Emoji

已有 88 条评论

  1. 希望下次更新,把评论人的头像改成自动获取QQ头像😀

    1. @龙魂

      这个会考虑增加的

      1. @Mr. Ma

        楼主大大,评论通知插件能分享下吗

        1. @龙魂

          评论通知插件的话可以看看 CommentToMail。我的评论回复邮件通知其实没有用插件,是手动回复邮件的。

  2. 是否可以增加评论回复可见功能?

    1. @moniko

      你说的评论回复可见指的是?

      1. @Mr. Ma

        博文内容 回复可见

        1. @moniko

          会考虑增加的

  3. 有没有这个功能:下滑页面的时候,自动隐藏顶栏,上滑的时候显示顶栏。

    1. @a

      暂时没有,目前的顶栏是固定的。

  4. 置顶要怎么操作啊?

    1. @a

      哦 不用回了 看到了 嘤嘤嘤

  5. 大星派
    大星派 11天前
    回复

    博主您好,请教一下,我把主题复制到usr/themes/文件夹下,改名为MWordStar,在控制台 -> 外观里什么都没有显示,只是有默认主题。我是用树莓派做服务器搭建了LAMP环境,apache2.4,PHP7.0,M10,不知道怎么样解决这个问题,请教博主。

    1. @大星派

      你解压了吗?如果是正常解压到当前文件夹的话,解压后的文件夹名称就是 MWordStar,不需要改名。还有 你是直接克隆仓库还是在 Releases 中下载?

      1. 大星派
        大星派 11天前
        回复
        @Mr. Ma

        解压了,我是克隆仓库,在usr/themes/文件夹中解压出来是MWordStar-master,然后我改名为MWordStar了,但是在控制台 -> 外观中没有显示,然后我试了其他的主题,也是不能显示,博主有没有遇到过这种情况,怎么解决,谢谢回复!

        1. @大星派

          看一下你的 Typecho 程序的版本,如果版本太老也可能无法使用,还有 usr 和 themes 目录是否可以读取。

          1. 大星派
            大星派 11天前
            回复
            @Mr. Ma

            Typecho 版本 1.1 (17.10.30), 我最近刚刚安装的, usr 和 themes 目录,都是全部777权限,可读可写可执行,在网上搜索这个问题,也没有找到类似的,很困惑

            1. @大星派

              会不会是你的 Typecho 程序不完整?你可以把当前的 Typecho 程序删了重下试一下。如果还不能解决的话,我也暂时没办法,还没遇到过这种情况。

              1. 大星派
                大星派 11天前
                回复
                @Mr. Ma

                找到问题了,我把文件放到/build/usr/themes/文件夹中了,应该放到/html/usr/themes/文件夹中,现在可以了,谢谢帮助!

              2. 大星派
                大星派 11天前
                回复
                @Mr. Ma

                好的,谢谢了

    2. 大星派
      大星派 11天前
      回复
      @大星派

      usr的权限已经设置成chmod 777,依然不行

  6. 不好意思,打扰了。
    点赞失灵了。
    只要使用Qplayer就会这样。地址:https://github.com/Jrohy/QPlayer-Typecho-Plugin
    请问有办法解决吗?如果不行,我只能换其他插件了。
    因为我觉得这个还蛮好的。cPlayer太深奥,这个软件已经会放歌曲了。

    1. @emiyakaito

      QPlayer 和我主题中用到的一个生成二维码的库有冲突,目前除了删除分享功能外暂时没有好的解决方法。

      1. @Mr. Ma

        好的,谢谢。

  7. 谢谢大神的辛勤劳作。
    我试了很多音乐插件。Aplayer可以网页内置播放器,但cplayer,地址https://github.com/journey-ad/cPlayer-Typecho-Plugin。特别是YoduBGM,亲测,基础版本是可以使用的,地址https://github.com/jrotty/YoduBGM。
    请问大神,有没有意向下次更新写入插件之类的,或者怎么让这两个插件生效在你的主题里?😀

    1. @emiyakaito

      可以试试梨花带雨播放器,百度就可以搜到

    2. @emiyakaito

      cPlayer https://github.com/journey-ad/cPlayer-Typecho-Plugin 可以正常使用。YoduBGM https://github.com/jrotty/YoduBGM 这个播放按钮显示在网站的右上方,我的主题的导航栏的层级比播放按钮高,这就会导致播放按钮被导航栏挡住,解决方法就是在主题外观设置的自定义CSS 中加入 .ymusic {z-index: 1030;}

      1. @Mr. Ma

        感谢,就是 可不可以设置颜色呢?在css里面,将YoduBGM 图标改成黑色。
        或者要是把它放在右下角。不在是置顶(是不可也可以通过css实现?)

        1. @emiyakaito

          样式之类的都可以通过 CSS 更改,可以直接在主题设置的自定义 CSS 中设置。

    3. @emiyakaito

      补充一点,我是想实现网页端的音乐播放,不仅仅是文章内置音乐播放器(虽然Aplayer确实蛮好用的)。最好是左下角 这类的。🧑

  8. 博主你好,我想问一下,如果你在上面创建 比如留言板,他是不是一个a标签,如果要修改别的标签,应该去哪个文件修改,求回复,十分感谢!

    1. @BK小小

      你说的是顶部的导航栏?

      1. @Mr. Ma

        对的,就是首页 ,文档归类,这部分,我想增加一个比如你的留言板,但是想改变这个跳转,让他调到我自己写的a标签

        1. @BK小小

          导航栏文件在 components 文件夹中的 header.php 中,其中导航栏就在 class 为 navbar-nav 的 ul 中。你增加自定义链接的时候,如果要保持样式一致性可以同时增加 li。

          1. @Mr. Ma

            博主。是这个地方吗。这应该怎么替换别的a标签啊。看不明白啊

            1. @BK小小

              你不需要替换,只需要把 li 列表项加入到 ul 中。例如 <li class="nav-item><a href="#">链接</a></li>,你可以把这个包含 li 和 a 的代码加入到 ul 中。

              1. @Mr. Ma

                而且我试了,a标签不能点击,就是不能跳转

              2. @Mr. Ma

                博主,我加上了这一条,但是它跑到上面去了,不和其他的几个导航一条线,我的站vwlin.top

                1. @BK小小

                  你只加了 li 标签,在 li 标签中还需要加 a 标签,还有如果要保持样式一致还需要给 li 标签加 nav-item 的 class。

            2. @BK小小

              :-(,不能复制代码吗。。。。。

              1. @BK小小

                在我的博客评论区中如果要插入代码需要用 Markdown 语法,直接粘贴代码是无法显示的。

                1. @Mr. Ma

                  我的那个a标签在最后

                  1. @BK小小

                    a 标签也需要加一个 nav-link 的 class

                    1. @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

                      1. @BK小小

                        你把添加的 li 和 a 放到列表的最后面,也就是放到 </ul> 的前面。

                        1. @Mr. Ma

                          可以了,感谢博主,谢谢谢谢!!!!!😁😁😁

                2. @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>
  9. 图片无法显示编辑时[]里写的介绍文字

    1. @x47b

      图片说明只会通过 alt 和 title 属性显示。

  10. Url 可以美化下吗

    https://www.misterma.com/archives/812/ 变成 https://www.misterma.com/blog/xxxxxxx-title-wenzhang

    1. @小飞

      URL 不归主题管,你可以在 Typecho 的永久链接设置中设置。

  11. 发布时间和最后编辑 是不是可以设置为 Y-m-d H:i:s 这种时间日期格式

    1. @svip

      我看了一下,大多数博客的文章发布时间都只精确到日。

  12. 现在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. @adgjm531

      从报错信息来看,可能是插件的问题。你切换到其它主题看看插件是否能正常使用。

  13. 请问下开发板和发行版啥区别的,开发板友情链接需要 JSON 格式数据,不知道发行版用不用

    1. @adgjm531

      发行版的前端静态资源是使用构建工具打包过的,开发板没有。友情链接无论是开发板还是发行版都是一样的 JSON。

  14. 大佬请教下,怎么设置每页的文章条数啊?

    1. @a

      在顶部设置的下拉菜单中选择阅读,进入阅读设置后可以更改每页文章数目。

      1. @Mr. Ma

        谢谢大佬

  15. 主题很好,文章或文章列表的那个框框,在高分辨率屏幕下,能不能设置成按照百分比自动拉伸的。

    1. @svip

      自动拉升的话,文章头图的尺寸和比例不太好控制。

  16. 反馈一个bug在手机端访问的,我在头图还没加载完毕的时候进入文章内容页面,然后返回到列表后,会发现列表头图都无法加载出来了。只能刷新页面才可以。

    1. @美图博客

      这应该是一些浏览器的特性吧,我目前暂时还没有遇到过这个问题。

      1. @Mr. Ma

        我在很多手机浏览器测试都是这样,可能你需要清理以下图片缓存,然后最好在点击下一页的时候,图片还没加载出来之前点进内容页。然后再返回出来,就会发现了。

        1. @美图博客

          这应该是浏览器停止加载后缓存了上一个页面,当你返回后浏览器就直接显示缓存内容。只要不是用 img 加载都会有这个问题。

  17. 大佬我又来了。在正文里插入图片的话,比如说是4:3的比例,在电脑上显示正确,在手机上显示则会被拉长变形。不知是否有什么设置上的奥妙?🖖

    1. @听听

      我测试了一下,4 比 3 的图片在手机上不会变形,下面是使用 Safari 和 Chrome 测试的截图,你可以复制图片地址到浏览器中看一下。
      https://s1.ax1x.com/2020/03/20/8cziqK.png

      1. @Mr. Ma

        嗯嗯,谢谢及时回复,我又重新测试了,禁用了之前加载的一个编辑器插件,用原生编辑器,图片就不会变形了。真是,唉。好难取舍。

  18. 请问作者底部ICP备案链接怎么改?因为有些服务器提供商要求ICP备案要正确链接到备案官网

    1. @夜雨

      你可以直接在 ICP备案号的输入框中填写链接,比如 <a href="http://xxx.com">京ICP备XXX</a>,在 href 中填写链接地址。

  19. 请问大佬,为什么用您的主题我的插件就失效了呢?

    1. @泉来

      什么插件?

      1. @Mr. Ma

        不好意思,没有看到回复。就是雪花效果的Snow插件 地址:https://github.com/journey-ad/Snow-Typecho-Plugin/,和音乐播放器APlayer for Typecho | Meting插件,地址:https://github.com/MoePlayer/APlayer-Typecho,谢谢!

        1. @泉来

          这应该是插件冲突的问题,不是主题的问题,即便我把主题切换到 typecho 的默认主题,启用插件的时候还是会出现 Server Error 的错误。在 APlayer-Typecho 的 Issues 也有人在反馈这个问题。https://github.com/MoePlayer/APlayer-Typecho/issues/75

          1. @Mr. Ma

            播放器插件启用出现Server Error的错误是因为没有把插件的名称该为Meting,这个在github的readme中提到,我的typecho中一共安装了三个插件,使用默认主题三个插件都能正常工作,使用你的主题三个插件都不能工作(这里的情况是没有显示效果)。我只是作为体验者提出我使用中的问题,并不是对您的主题而抱怨不止。谢谢你可以理解,希望你可以关注一下这个问题,谢谢大佬🐶🐶!!

            希望大佬的主题越做越好!

            1. @泉来

              关于插件兼容性的问题目前已经修复,可以到 Github 仓库克隆最新的主题。

              1. @Mr. Ma

                谢谢!大佬的主题确实很棒的 ,简洁,美观,清晰,明了!在找了这么多主题中,最喜欢这一款!👍👍👍

  20. 😀无意中点进来的,主题做的很不错,不过不喜欢你的这个配色,太灰了。构造简单,相信要实现JS换色不难,不过看你几乎都没有什么特效呀,连go to top都是那么的硬核。表情太多,眼都看花了。
    p.s.你的主题我下载了,当然我提的建议都是我自己要改的。感谢分享

    1. @jclser大人

      哈哈,设计和配色方面我确实不太擅长。

  21. 我很中意您哟
    我很中意您哟 269天前
    回复

    用了2天提几个建议啊不要嫌弃我啰嗦,
    1.缩列图可以抓取就好了
    2.可以设置首页帖子数量,
    3.文章归类能精简一点就好了,可以显示12个月的加历史的,有些博主如果做5-6年的博客就翻不完了,
    4.标签可以随机展示,每个页面都不同,
    5.文章上或下放可以加 分享功能
    6.个人觉得把原来的巨幕大图改成沉浸式轮播也可以 更加美观实用一点
    7.手机版出现的东西太多了,评论/最新文章/归档其实都可以不要的,还有手机版顶栏也有点大不秀气。
    8.后台可以设置前台的色 就更加完美了。
    加几个功能就可以付费主题了,我已经开始存钱了

    1. @我很中意您哟

      非常感谢你的建议,你提的一些功能后面会增加的。不过因为这个主题只能在业余时间开发,所以开发这些功能可能需要很长时间。

    1. @网赚博客

      要交换链接的话可以到友情链接页面留言。

      1. @Mr. Ma

        交换的是首页链接吗?

        1. @网赚博客

          交换链接之类的可以到友情链接页面或留言板留言,首页和内页都可以交换。