我之前使用的主题是 handsome ,handsome 也是一款不错的 Typecho 主题。但是因为 handsome 使用的人太多,导致很多博客的外观都差不多,所以我准备开发一套自用的主题。

看了一下 Typecho 的主题开发文档, 发现不是太难。于是花了几天时间开发了这个主题。

这是我第一次开发 Typecho 的主题,可能还有很多地方还不够完善,后续还会有更新。

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

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

下面是主题首页截图:

主题首页截图

主题支持响应式,下面是一些移动设备的截图:

主题iPhone截图

主题iPad截图

主题介绍

外观设计

因为本人不擅长设计,所以外观还是传统的两栏布局。有些地方的设计参考了 WordPress 的一款名为:Wordstar 的主题的设计,Wordstar 也是我在用 WordPress 时比较喜欢的一款主题。

主题依赖

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

其中 IcoMoon 的字体图标是可定制的,所以这里只包含少量的常用图标。

主题文件结构

.
├── 404.php
├── archive.php
├── comments.php
├── css
│   ├── bootstrap.min.css
│   ├── icon.css
│   ├── style.css
│   └── vs2015.css
├── fonts
│   ├── icomoon.eot
│   ├── icomoon.svg
│   ├── icomoon.ttf
│   └── icomoon.woff
├── footer.php
├── functions.php
├── header.php
├── index.php
├── js
│   ├── app.js
│   ├── bootstrap.min.js
│   ├── highlight.pack.js
│   └── jquery-3.4.1.min.js
├── LICENSE
├── page-archive.php
├── page-links.php
├── page.php
├── post.php
├── screenshot.jpg
└── sidebar.php

注意!上面的文件结构是已经打包压缩的文件结构,在 Releases 下载的 zip 包就是经过打包压缩的。

如果要下载未压缩的源代码可以直接克隆项目,未压缩的源代码中还包含 style.scss 文件。

主题安装

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

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

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

代码高亮

代码高亮的样式使用的是 VS2015 的暗色主题,和 Visual Studio Code 的默认主题差不多。

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

  • 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 替换原来的文件。

文章归档

文章归档有两种显示方式,一种是在独立页面显示,如下:

主题文章归档页截图.jpeg

另一种就是侧边栏的按月份的文章归档,如下图:

主题侧边栏文章归档截图

默认使用的是侧边栏的文章归档。

如需使用独立页面的文章归档 可以建立一个独立页面,把 自定义模板 设置为 文章归档

显示社交信息

社交信息会显示在侧边栏的最上方,默认是关闭的。如需开启显示社交信息可以在 设置外观 中选中 显示社交信息,然后在 社交信息 的输入框中输入 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

侧边栏社交信息效果如下:

主题社交信息显示

图标的排列顺序取决于你 JSON 中的顺序。

友情链接

友情链接分为 全站链接内页链接全站链接 会在每个页面的底部显示,内页链接 只会在单独的页面显示。

设置全站链接

在主题外观设置中添加 JSON ,如下:

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

其中 urlname 为必填项。

效果如下:

主题底部友链截图

设置内页链接

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

在主题 外观设置 中添加 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 是必填项。

效果如下:

主题独立页友链截图

文章头图

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

文章版权声明

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

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

主题文章版权声明的截图

无障碍

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

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

本主题已在 NVDAVoiceOver 这两款屏幕阅读器上做过测试,无论是 PC 还是 移动设备 都能完美朗读。主题颜色对比度也符合标准。

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

兼容性

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

其它

我的个人博客:https://www.misterma.com

后续可能会把我的博客作为主题的演示站点。

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

本主题使用 MIT License 开源。

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

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


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