MWordStar 浅灰色响应式双栏typecho主题
下面是主题首页截图:
主题元素包含圆角和直角两种风格,您可以根据喜好在主题外观设置中切换,下面是直角风格的首页截图:
主题还包含了几套不同风格的配色,您可以根据喜好在主题外观设置中切换。
主题特点
响应式设计
无障碍适配
代码高亮
丰富的设置选项
良好的 SEO 优化
长期维护
主题介绍
外观设计
传统的两栏布局。
主题依赖
主题主要用到了一下几个库和框架:
Bootstrap 外观和布局
jQuery DOM 操作
highlight.js 代码高亮
IcoMoon 字体图标
其中 IcoMoon 的字体图标是可定制的,所以只包含了主题中出现的图标。
主题安装
把主题上传到 Typecho 的 usr/themes/
目录,然后解压,你也可以先解压在上传。
解压后需要保证 themes
目录下 有一个 MWordStar
目录。
登录 Typecho 的后台管理,进入 控制台
-> 外观
,如果看到 MWordStar 就点击 启用
。
代码高亮
代码高亮的样式使用的是 VS2015 的暗色主题,和 Visual Studio Code 的默认主题差不多。主题支持 30 多种语言的代码高亮。详细的说明可以查看 使用说明 。
友情链接
友情链接分为 全站友情链接
、首页友情链接
、内页友情链接
。全站友情链接
会在每个页面的侧边栏显示,首页友情链接
会在首页的侧边栏显示,内页友情链接
只会在 友情链接 的页面显示。
无障碍
上网对于大多数人来说是一件再简单不过的事,但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。
目前国内的很多网站都只注重外观,忽略了残障人士的可访问性。但是想要做好网站的用户体验,无障碍 适配肯定是少不了的。
本主题专门为 屏幕阅读器 做了特别优化,并 在 NVDA 和 VoiceOver 这两款屏幕阅读器上做过测试,无论是 PC 还是 移动设备 都能完美朗读。主题颜色对比度也符合标准。
小提示:如果您是屏幕阅读器用户,为了您的浏览体验,不建议使用 IE 浏览器。
Emoji 表情
主题评论区包含一个 Emoji 表情面板,您可以在后台启用或禁用。Emoji 表情面板包含 1466 个表情,这些表情都是按照分类动态加载的,您不用担心性能问题。
Emoji 表情面板也进行了无障碍适配,可支持键盘访问和屏幕阅读器朗读。
下面是 Emoji 表情面板的截图:
兼容性
因为本主题使用了 HTML5 和 CSS3,需要 IE10 及以上浏览器才能完美兼容。IE8 及以下浏览器显示可能会出现一些问题。
插件适配
因为本人很少使用插件,所以目前适配的插件比较少。
下面是已适配的插件:
Sticky 文章置顶插件
使用 Webpack 构建
在 MWordStar 仓库和 Releases 中的主题是直接通过 link
和 script
引入 CSS 和 JS 文件,没有使用任何构建工具。
下面是用到的 CSS 和 JS 文件说明:
bootstrap.min.css
:Bootstrap 的 CSS 文件,这个 CSS 是被我修改过的。icon.css
:字体图标的 CSS 文件。style.css
:主题的样式文件。style.scss
:主题的 SASS 样式文件,在 Releases 中下载的主题不包含 SASS 文件。vs2015.css
:highlight.js 的样式文件。jquery-3.4.1.min.js
:jQuery。bootstrap.min.js
:Bootstrap 的 JS 文件。highlight.pack.js
:highlight.js 的 JS 文件。app.js
:主题的 JS 文件。
除了上面的 CSS 和 JS 外 icon.css
还需要加载 4 个字体文件。虽然这些文件都不大,但是需要发送很多次 HTTP 请求。Webpack 可以把上面的 CSS、JS、字体 打包成一个 CSS 文件和一个 JS 文件,只需要发送两次 HTTP 请求就可以加载上面的文件。
如果您对前端和 Webpack 有一定了解的话,您可以使用 Webpack 构建。您可以在 https://github.com/changbin1997/MWordstar-Web 中找到使用 Webpack 构建的版本。
在仓库的 README.md
中有详细的打包说明。
其它
主题 Github:https://github.com/changbin1997/MWordStar
码云仓库地址:https://gitee.com/changbin1997/MWordStar
还没有评论,来说两句吧...