MWordStar 是一个基于 Bootstrap4 开发的响应式双栏 Typecho 博客主题。

之前的使用说明都是放在 README.md中,在 Github 的仓库首页就能看到使用说明。但是随着功能的增加,使用说明也越来越长,对于只想看主题介绍的人来说也不方便阅读。所以这里就把主题介绍和使用说明分开。

主题介绍:https://www.misterma.com/archives/812/

Github 项目首页:https://github.com/changbin1997/MWordStar

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

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

Releases 中打包的主题可能不是最新版本,如果您需要下载最新版本的主题可以直接克隆项目。

如果您对下面的使用说明有什么疑问或建议都可以在 博客评论区 留言。

安装

在 Github 的 Releases 下载的主题是一个 zip 格式的压缩包,把压缩包上传到您的 Typecho 目录下的 usr/themes/ 目录,上传完成后解压。

注意,需要直接解压到 themes 目录下,在 themes 目录下必须保证有一个 MWordStar 目录。

登录 Typecho 的后台管理,进入 外观,如果之前没有错误的话就能看到 MWordStar ,点击 启用

站点 Logo & 副标题

设置外观 中可以设置 Logo 和 副标题。进入设置外观的方法可以看下图:

Typecho进入主题设置的截图

站点 Logo 会显示在浏览器标签页 网站名称的前面。

站点副标题 会显示在浏览器标签页 网站名称的后面。

文章归档

文章归档分为按月份的侧边栏显示 和 按时间线的独立页面显示,默认为 侧边栏显示

侧边栏显示的效果如下:

MWordStar主题侧边栏文章归档截图

独立页面文章归档效果如下:

MWordStar主题独立页文章归档截图

上面的截图可能不是最新版本的样式,要查看最新版本的样式可以直接访问我的博客。

如需开启 独立页文章归档 可以创建一个独立页面,把 自定义模板 设置为 文章归档 ,然后 发布页面

侧边栏文章归档 和 独立页文章归档 可以同时开启。

目前 独立页文章归档 和 侧边栏的 最新文章 会有一些冲突,所以进入 文章归档 的时候侧边栏的 最新文章 就不会显示。

导航栏

导航栏配色

目前导航栏配色包含 亮色暗色 两种配色。您可以在主题外观设置中选择。

导航栏分类下拉菜单

导航栏分类下拉菜单可以在主题外观设置中开启。导航栏分类下拉菜单和侧边栏的分类列表可以同时使用。

导航栏的分类下拉菜单可支持键盘操作。

侧边栏

侧边栏的每个区域您都可以选择开启或关闭,还可以单独设置移动设备的侧边栏:

MWordStar侧边栏设置

博客信息显示

博客信息区块会显示在侧边栏,您可以在侧边栏显示设置中开启或关闭。

如果要显示正确的博客信息您还需要填写 博主头像地址、博主昵称、博主简介、站点创建时间。

如下:

MWordStar博客信息设置

博客信息效果如下:

MWordStar博客信息效果

友情链接

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

设置全站友情链接

设置外观全站友情链接 的输入框中填写 JSON 数据,如下:

[
    {
        "url": "https://www.baidu.com",
        "name": "百度",
        "title": "百度一下,你就知道。"
    },
    {
        "url": "https://www.misterma.com",
        "name": "Mr Ma`s Blog",
        "title": "我的编程学习笔记和一些计算机的实用教程"
    }
]

其中 urlname 是必填项。

全站友情链接的效果如下:

MWordStar主题全站友链截图

设置首页友情链接

设置 首页友情链接 的方法和 全站友情链接 差不多,在 首页友情链接 的输入框中输入JSON 数据,数据格式和 全站友情链接 是一样的。

首页友情链接 的效果和 全站友情链接 的效果差不多,只是 首页友情链接 只会在首页显示。

设置内页友情链接

新建一个独立页面,把 自定义模板 设置为 友情链接

设置外观独立页友情链接 填写 JSON 数据,如下:

[
    {
        "url": "https://www.baidu.com",
        "name": "百度",
        "title": "百度一下,你就知道。",
        "logoUrl": "https://tupp.xyz/2019/08/05/15650063025d4819debebc6.jpg"
    },
    {
        "url": "https://www.misterma.com",
        "name": "Mr Ma`s Blog",
        "title": "我的编程学习笔记和一些计算机的实用教程",
        "logoUrl": "https://www.misterma.com/img/%E5%8D%9A%E5%AE%A2Logo.png"
    }
]

其中 urlname 是必填项。

下面是内页友情链接的效果:

MWordStar主题内页友链截图

自定义 CSS

通过自定义 CSS 您可以很方便的设置页面样式,自定义 CSS 不会影响网站源代码。

自定义 HTML

自定义 HTML 分为 自定义 head 区域的 HTML 和 自定义 body 区域的 HTML。

自定义 head 区域的 HTML

自定义 head 区域的 HTML 会在 </head> 之前输出。您可以用来定义网站统计的 JS 或者 自定义 JS。

自定义 body 区域的 HTML

自定义 body 区域的 HTML 会在 </footer> 之后 </body> 之前输出。。您可以用来定义网站统计的 JS 或者 自定义 JS。

ICP 备案号

如果您的博客需要显示 ICP 备案号 的话,可以在主题的外观设置中的 ICP 备案号 的输入框内输入 ICP 备案号。ICP 备案号会显示在网站的底部。

文章头图

单篇文章的文章头图

默认情况下会使用文章中的第一张图片作为文章头图,如果文章中没有图片就不会显示文章头图。您也可以在文章编辑页手动设置文章头图。文章头图的图片尺寸比例建议使用 8 比 3 的图片。

文章头图设置

文章头图可以在首页、侧边栏的最新文章区域、文章页 显示,您可以在主题外观设置中设置哪些区域需要显示。

章节目录

主题可以根据文章中的标题生成章节目录,章节目录会显示在文章的开头,默认是关闭的,您可以在主题外观设置中开启。

章节目录的效果大致如下:

章节目录

评论者头像

评论者头像使用的是圆形头像,如果您需要使用方形头像可以在主题外观设置中的 自定义CSS 中加入如下代码:

.avatar{
    border-radius: 0px !important;
}

如果您需要使用圆角方形的头像可以加入如下代码:

.avatar{
    border-radius: 4px !important;
}

文章版权声明

文章版权声明会显示在文章的底部,在文章的编辑页面可以选择 显示不显示,默认为 显示

下面是文章版权声明的截图:

MWordStar主题文章版权信息截图

Emoji 表情

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

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

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

emoji面板截图

代码高亮

代码高亮的样式使用的是 VS2015 的暗色主题,和 Visual Studio Code 的默认主题差不多。目前支持 30 多种语言的代码高亮。

下面是支持代码高亮的语言:

  • Apache
  • Bash
  • C#
  • C / C++
  • CSS
  • CoffeeScript
  • Dart
  • Dockerfile
  • Go
  • HTML, XML
  • HTTP
  • JSON / JSON with Comments
  • Java
  • JavaScript
  • Kotlin
  • Less
  • Lua
  • Makefile
  • Markdown
  • Matlab
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • PowerShell
  • Ruby
  • Rust
  • SCSS
  • SQL (Structured Query Language)
  • Shell Session
  • Swift
  • TOML, also INI
  • TypeScript
  • YAML

如需更改代码高亮的样式可以上 https://github.com/highlightjs/highlight.js/tree/master/src/styles 下载 css 样式,下载完成后复制到主题的 css 文件夹,重命名为 vs2015.css 替换原来的文件。

如果您需要自己定制代码高亮的语言可以参考 highlight.js 一个在网页上实现代码高亮的JS库 这篇文章,下载后直接替换 js 目录中的 highlight.pack.js

主题更新

更新主题可以直接下载或克隆最新版本的主题来替换老版本的主题,这样可以保证主题外观设置中的设置信息不会丢失,不过一些选项的默认设置可能不会生效,需要手动设置。

其它

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

一般情况下在博客留言可以很快得到回复。


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/819/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年02月20日 ©著作权归作者所有

发表评论

正在加载 Emoji

已有 81 条评论

  1. 感谢作者分享

  2. 刚才发现一个问题,你看看,正常编辑的段落,为什么就出现代码框了。https://myblogs.micalun.website/index.php/archives/8/

    1. @阿道夫

      你的文章中确实包含 pre 和 code 代码快,但这并不是主题转换的,这是 Typecho 博客程序转换的。主题主要是负责美化方面的工作,主题检测到你文章中有代码标签才会进行美化。

      1. @Mr. Ma

        开头是不是不能空两格啊?

        1. @阿道夫

          开头可以空格的,不过可能无法显示空格。其实段落开头不一定非要用空格,段落之间可以用空行来分隔。如果你的段落开头需要空格的话,可以在主题设置的 自定义CSS 中加入 .post-content p{text-indent:2em},加入后每个段落开头都会空两格。

          1. @Mr. Ma

            有点麻烦,就不用空格了吧。有个问题请教下,文章中的图片怎么点击放大。用了一个插件,很老的,没用来了。

            1. @阿道夫

              目前直接点击图片可以显示图片的原始大小,对于比文章区域宽的图片可以放大,比文章区域窄的图片还不能放大。

              1. @Mr. Ma

                刚发现一个主题比较好看的网站,可以参考参考。https://pincong.rocks,可能需要fq

              2. @Mr. Ma

                好的,之前没注意,我去。typecho插件有点旧啊,下了几个 都不好用或者没用。

      2. @Mr. Ma

        但是撰写里面确实没插入代码啊

        1. @阿道夫

          你文章中确实包含 code 标签,你可以切换到其它主题看一下还会不会显示代码块。

  3. 能在侧边栏增加一个邮件订阅就好了,RSS现在基本没人用了。。。

    1. @1

      因为 typecho 包含了 RSS 接口,可以直接调用,所以顺便就作了 RSS 订阅。邮件订阅需要插件才能实现,主题不太方便作邮件订阅。

      1. @Mr. Ma

        大佬奥利给!其实友情连接imhan.com这里有个插件很好用。另外,文章分享这里,能不能直接分享到QQ或者微信或者Telgram的对话框。。。生成一个文章小海豹一样的东东。

        1. @1

          哈哈,我的习惯是能用代码解决的就尽量不装插件,关于分享之类的有时间我再研究一下。

          1. @Mr. Ma

            期待~另外,配色可以自定义选择就爽了。感觉黑色时间长了会有点压抑。你看sf.gg,居然盯着个绿色得~

            1. @1

              主题提供了自定义 CSS 的设置项,如果了解 CSS 的话,完全可以通过自定义 CSS 的方式来设置颜色。

              1. @Mr. Ma

                难度太大了。。。😩

  4. 还有就是图标感觉用fontawesome更漂亮些

    1. @1

      图标的话,免费的都差不多,而且 Font Awesome 免费版也不太方便定制。

  5. 比如类似https://www.echo.so/php/62.html这个文章页,写作效果好一些。

  6. 文章页内的写作效果再优化下就好了。现在看起来有点乱。而且能支持多用户标签文章就好了。

  7. 哇,太感谢了!一万个赞!

  8. 超棒的主题~
    就是想请教一下,如果想取消赞和分享,应该改动什么地方呢?太谢谢了!👻

    1. @听听

      你是想隐藏这两个按钮还是直接删除功能?

      1. @Mr. Ma

        最优的是直接删除功能。(不方便的话,隐藏按钮亦可。)

        1. @听听

          隐藏按钮的话可以在主题设置的自定义CSS中加入下面的CSS:

          #agree-btn {
              display: none;
          }
          #share-btn {
              display: none;
          }

          要删除功能的话需要改很多个地方,打开 post.php 删除 idagree-btnshare-btn 的两个按钮,再删除:

          if (isset($_POST['agree'])) {
              if ($_POST['agree'] == $this->cid) {
                  exit(agree($this->cid));
              }
              exit('error');
          }

          再删除 <?php $agree = $this->hidden?array('agree' => 0, 'recording' => true):agreeNum($this->cid); ?>

          再删除 idshare-box 的元素及其子元素。

          打开 app.js 删除 idagree-btn 的事件和绑定的函数。

          打开 function.php 删除名为 agreeNumagree 的两个函数。

          1. @Mr. Ma

            再请教一下,emoji是使用的外挂的服务吗?有时候它会变成黑白的,好像就无法使用呢。

            1. @听听

              Emoji 没有使用任何服务,Emoji 就在主题目录中的 emoji.php 中。点击 Emoji 表情后会通过 AJAX 的方式从你的服务器加载表情,加载速度和你的服务器网络相关。

              1. @Mr. Ma

                原来如此,看来我的服务器网络真的有点慢。感谢答疑!

  9. 很漂亮的主题啊

  10. 很久没折腾博客了,刚才偶然看到,真的好看!板块分明,简洁大方。emoji亮点。点赞👍👍

  11. 请问一下老哥 此主题 文章/页面缩略图 是有默认的吗

    1. @xiaobo

      文章头图默认会使用文章中的第一张图片作为头图,如果文章中没有图片就不会显示文章头图。

  12. 看着不错,支持!

    1. @八方

      感谢支持😊

  13. emoji表情是亮点,杯具色看起来很舒服~主题很有质感,感谢分享。

    1. @Mr.Chou

      第一次开发 Typecho 主题,可能还有很多地方还不够完善。

    1. @Erhecy

      哈哈😊你的网站也很好看

  14. 建议改一个文章分类直接显示到导航栏,链接、归档感觉没必要放到导航栏上

    1. @oooz

      目前分类和归档都可以显示在导航栏,你可以按需选择开启或关闭。

      1. @Mr. Ma

        目前最新的模板只能够设置文章分类吗?好像目前不能设置和贵博一样的友情链接,留言板,归档之类的了,后台设置只有分类菜单,主要想把分类都显示出来,而不是下拉形式!

        1. @YYY

          文章归档、友情链接、留言板 这些都是独立页面,你需要先创建页面,然后选择相关的自定义模板。

  15. 你好,博主。
    我使用了您的主题,但是发现友情链接无法使用,无论是全局友情链接或是独立页首页友情链接都无法显示。我确定我使用了您给的json格式添加友链。方便的话,可以邮箱告诉我如何解决吗?不胜感激。附图片 https://pic.downk.cc/item/5e48cfe648b86553eecb6a75.png

    1. @Rein

      你可以复制我文章中演示用的 JSON 试一下,看能不能正常显示,还有 友情链接是完全不能显示还是显示了错误的内容?

      1. @Mr. Ma

        是这样的 https://pic.downk.cc/item/5e49004d48b86553eed66151.png
        找到原因了
        1.首页友情链接只能加两个
        2.多个友链json代码中漏掉了”,“ 如图 https://pic.downk.cc/item/5e49062948b86553eed762fa.png

        顺便求换博主友链(已加博主友链)
        网站名称:ReinのNote
        网站地址:https://rein.best/
        网站介绍:一个爱折腾各种事务的bloger。
        网站logo:https://pic.downk.cc/item/5e49088648b86553eed7e013.png

        1. @Rein

          友情链接目前是没有数量限制的,只要 JSON 和数组的语法正确就能显示。
          已添加友链。

  16. 置顶怎么设置啊?

    1. @zz

      置顶需要使用 Sticky 插件,地址 https://plugins.typecho.me/plugins/sticky.html

  17. lixianhua点com 这个的换色你有空可以扒来换给你的主题貌似不错。 😁

  18. 你好,请问我想让主页上显示更多的文章项该怎么弄呀,显示五个太少了😂

    1. @deltaqin

      在后台的设置中选择 阅读,进入 阅读设置后可以在 每页文章数目 的输入框中输入文章数量。

  19. 😂 可以设置选项关闭代码高亮吗,用其他插件代替。还有就是以前会显示markdown的目录信息,用了这个后不显示目录信息了。

    1. @ww

      如果要关闭自带的代码高亮的话,需要修改文件。
      删除 header.php 里的 <link rel="stylesheet" href="<?php $this->options->themeUrl('css/vs2015.css'); ?>" type="text/css"><script type="text/javascript" src="<?php $this->options->themeUrl('js/highlight.pack.js'); ?>"></script> 这两行代码。
      删除 js/app.js 里的 hljs.initHighlightingOnLoad();

      1. @Mr. Ma

        改了,然后用原来的代码高亮插件还是有冲突,就没折腾了。能否开发一个显示markdown目录的toolbar.

        1. @ww

          目录显示会考虑开发的。

  20. 非常感谢,模板很好,很喜欢,有个小bug。
    https://plugins.typecho.me/plugins/smilies-1.html
    Smilies 评论表情插件,不能使用。请作者检查一下。

    1. @萱萱

      这个插件目前还暂时没有适配,我会在后续的版本中适配。

  21. 挺简洁的主题,Mark。

  22. 能否实现 导航栏 设置显示分类栏目。

    1. 我很中意您哟
      我很中意您哟 2019年10月15日 09:59
      回复
      @小白1223

      我也是在找导航栏调用分类呢,,,单页都不重要没必要放那么明显

      1. @我很中意您哟

        在导航栏中显示分类的功能其实已经有了,但还没有打包到 Releases 中 ,需要直接克隆项目才能看到。

        1. @Mr. Ma

          这个功能现在实现了嘛?

          1. @t

            第一张图片作为头图的设置可能只对本地上传的图片生效。
            我的文章图片都是外链的,所以也不会显示。

            1. @贝露

              外链的图片是可以显示的,不过使用

              ![请输入图片描述][1][1]: http://xxx.com/xxx.jpg

              这种语法插入的图片是不能显示的,目前只能显示 Markdown 和 img 的外链图片。

              1. @Mr. Ma

                这个问题我会在后续的版本中适配的。

              2. @Mr. Ma

                原来是这样的,因为默认编辑器用的就是这种语法,我之前用EditorMD应该也是这种语法。为了用这个主题放弃了EditorMD这个强大的编辑器,但是自带的真的挺弱的,希望后续有时间能安排一下适配,谢谢您。

          2. @t

            导航栏显示分类可以在主题外观设置中的导航栏下方选中 显示文章分类 。文章头图我测试了一下 没问题啊。

          3. @t

            另外文中插入了图片,并且在下方设置了使用第一张作为头图,但好像不显示,非要在下方输入图片的url连接,是个bug嘛?

          4. @t

            分类展开显示

          5. @t

            该如何设置?我想在导航栏上显示分类。

          6. @t

            如果是导航栏显示分类的话已经实现了。

        2. 我很中意您哟
          我很中意您哟 2019年10月15日 13:31
          回复
          @Mr. Ma

          那再等等反正不急

  23. 我是第一个留言的吗?万分荣幸,正在本地测试中,妄作者继续努力。

    1. @茶茶

      哈哈,第一次开发 Typecho 的主题,可能还有很多地方还不够完善,如果遇到什么问题都可以在此处留言。

×