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主题独立页文章归档截图.jpeg

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

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

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

导航栏

导航栏配色

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

导航栏毛玻璃效果

导航栏毛玻璃效果可以在主题外观设置中开启。开启后会根据您选择的导航栏配色显示亮色或暗色的毛玻璃效果。

注意!目前 Firefox 和 IE 不支持毛玻璃效果,其它 WebKit 和 Chromium 内核的浏览器都可以使用毛玻璃效果。

对于不支持毛玻璃效果的浏览器,开启导航栏毛玻璃效果后,导航栏会显示为半透明。

导航栏分类下拉菜单

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

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

友情链接

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

设置全站友情链接

设置外观全站友情链接 的输入框中填写 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主题内页友链截图

巨幕

巨幕 就是导航条下方的站点标题和站点副标题,您可以选择 开启 或 关闭。您还可以自己设置巨幕的背景图片,如果背景图片为空会使用默认图片。

显示社交信息

社交信息 会显示在巨幕站点副标题的下方,默认是关闭的。如需开启 显示社交信息 可以在外观设置中的 社交信息 输入框输入 JSON 格式的信息。

社交信息 JSON 如下:

[
    {
        "name": "facebook",
        "url": "https://www.facebook.com"
    },
    {
        "name": "twitter",
        "url": "https://twitter.com"
    },
    {
        "name": "weibo",
        "url": "https://weibo.com"
    }
]

其中 name 就是社交网站的名称,url 就是社交网站中你的主页的 url,社交网站名称需要用 英文小写

下面是支持的社交网站和英文小写名称:

网站名称英文小写
Facebookfacebook
Twittertwitter
微博weibo
Instagraminstagram
Githubgithub
Telegramtelegram
Linkedinlinkedin
Steamsteam

社交信息效果如下:

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 备案号会显示在网站的底部。

文章头图

如果需要显示文章头图的话,在编辑文章的时候在下方的 文章头图 字段中输入图片的 url 。图片尺寸比例建议使用 8 比 3 的图片。

文章版权声明

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

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

MWordStar主题文章版权信息截图

Emoji 表情

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

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

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

emoji面板截图

代码高亮

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

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

  • Apache
  • AppleScript
  • Bash
  • C#
  • C++
  • CSS
  • CoffeeScript
  • Diff
  • D
  • Delphi
  • Dockerfile
  • Excel
  • GO
  • HTML/XML
  • HTTP
  • Ini/TOML
  • JSON
  • Java
  • JavaScript
  • Kotlin
  • Less
  • Makefile
  • Markdown
  • Nginx
  • Objective-C
  • PHP
  • Python
  • Perl
  • Properties
  • PowerShell
  • Rust
  • Ruby
  • SQL
  • Shell Session
  • Swift
  • SCSS
  • TypeScript
  • VB.NET
  • 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/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

已有 10 条评论

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

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

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

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

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

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

        1. 我很中意您哟
          我很中意您哟 2019年10月15日 13:31
          回复

          那再等等反正不急

  3. 挺简洁的主题,Mark。

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

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

发表评论

正在加载 Emoji