Facile 一个简洁的 Typecho 博客主题
Facile 是一套简洁的 Typecho 博客主题,也是我的博客正在使用的主题。
之前我用的主题是 MWordStar ,时间长了就想换一下外观,本来想再给 MWordStar 增加一套样式,但是外观变动比较大,而且 MWordStar 已经有几套样式了,所以重新开发一套主题。
主题演示地址:https://www.misterma.com/
主题下载地址:https://github.com/changbin1997/Facile/releases
下载时请选择 Facile-bundle.zip ,否则前端 JS 代码无法在 IE 系列浏览器运行。
如果你无法访问上面的 Github 的话,也可以访问https://pan.baidu.com/s/1uFlFkcEeZsSgNy4OKPm6vw (opens new window) 使用百度网盘下载,密码 bcjh ,打开后进入 博客主题下载 文件夹,选择 Facile 的最高版本下载。
主题 Github 仓库:https://github.com/changbin1997/Facile
主题使用说明:https://facile.misterma.com/
下面是主题首页截图:


不包含文章头图的截图:

小头图模式:

也可以给文章设置单独的头图样式:

Facile 相比 MWordStar 来说,外观要更简洁一些,功能也会少一些,MWordStar 有的功能以后也会陆续增加到 Facile 中,但是 Facile 的功能以后也不会有 MWordStar 多。
特点和功能
- 响应式设计
- 无障碍适配(Accessibility)
- 包含浅色和深色两套配色(可根据系统主题配色自动调节)
- 代码高亮
- 自带点赞功能
- 支持根据文章内插入的标题生成章节目录
- 支持图片懒加载
- 支持文章分页
- 文章列表支持多种排版方式
- 丰富的侧边栏组件
- 丰富的设置选项
- 详细的图表统计
- 评论区自带 Emoji 表情面板
- 支持 PJAX 无刷新跳转
- 详细的 帮助文档 (必看)
- 长期维护
安装
在 Releases 下载的主题是一个 zip 格式的压缩包,把压缩包上传到 Typecho 目录下的 usr/themes/ 目录,然后解压,解压后应该可以看到一个 Facile 目录。
登录 Typecho 后台,在顶部导航栏的 控制台 菜单选择 外观 ,如果存放位置没有错误的话就可以看到 Facile 主题了,点击 启用 。
主题依赖
- bootswatch 不同风格的 Bootstrap 主题
- jQuery DOM 操作和 Bootstrap 依赖
- qrious 生成二维码的 JS 库
- highlight.js 代码高亮
- ECharts 百度开源的图表库,用于 统计页 生成统计图
- jquery-pjax 用于页面无刷新跳转
后端没有用到任何库。
ECharts 的库比较大,所以只引入了饼图和日历图,而且只会在统计页加载。Bootstrap 的 JS 使用 Webpack 打包过的发行版也只引入了用到的模块。
主题的图标使用的是 IcoMoon 的字体图标,IcoMoon 的图标可以自定义,所以主题中只包含几个用到的图标。
前端 JS 使用的是 ES6 语法,在 IE 系列的浏览器(包括 IE11)是无法运行的,如果没有二次开发需求的话,可以在 Releases 下载 Facile-bundle.zip 发行版,发行版使用了 Webpack + Babel 来打包和转换,可以在 IE 运行。
代码高亮
代码高亮目前包含三套主题配色,分别是 Stack Overflow(浅色)、VS2015(深色)、Sunburst(高对比度)。目前支持 30 多种语言的代码高亮。
要查看支持的语言列表和代码高亮样式可以访问 帮助文档 - 代码高亮
侧边栏
下面是目前可以显示在侧边栏的组件:
- 博客信息
- 主题配色
- 最新文章
- 最新回复
- 文章分类
- 标签云
- 文章归档
- 其它功能
- 友情链接
- 文章的章节目录
- 自定义
侧边栏的每个组件你都可以选择开启或关闭,你还可以自定义侧边栏的组件排序顺序。
统计页
主题包含一个统计页模板,你可以在后台创建页面,页面的自定义模板选择 网站数据,标题可以随便写,创建完成后就可以在顶部导航栏访问了。
统计页包含基本的数据统计、分类文章占比图、文章更新日历图、评论动态日历图、阅读量排名前 5 的文章、评论量排名前 5 的文章。
基本数据统计如下:

分类占比统计图如下:

下面是评论动态日历图:

文章动态日历图和评论动态的日历图是差不多的,屏幕尺寸不同显示的月份数量也不同。
下面是文章评论排名表格:

文章阅读量排名表格和评论量排名的表格也是差不多的。
统计页面演示可以访问 https://www.misterma.com/data.html 。
Emoji 表情
主题评论区包含一个 Emoji 表情面板,你可以在后台启用或禁用。Emoji 表情面板包含 1466 个表情,这些表情都是按照分类动态加载的,不用担心性能问题。
Emoji 表情面板也进行了无障碍适配,可支持键盘访问和屏幕阅读器朗读。
下面是 Emoji 表情面板的截图:

无障碍(Accessibility)
上网对于大多数人来说是一件再简单不过的事,但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。目前国内的很多网站和 App 都只注重外观,忽略了残障人士的 可访问性,甚至有的 App 在开启屏幕阅读器的情况下都无法正常使用。
Facile 主题针对屏幕阅读器做了大量优化,并在 MVDA 和 VoiceOver 这两款屏幕阅读器上做过测试,无论是 PC 还是移动设备都能完美朗读(除了日历图),主题能准确传达需要朗读的内容和信息,对于盲人来说,使用标准的屏幕阅读器基本可以无障碍操作。
主题可完美支持键盘访问,颜色对比度也符合标准。
小提示:如果您是屏幕阅读器用户,为了您的浏览体验,不建议使用 IE 浏览器。
友情链接
友情链接分为 全站友情链接、首页友情链接、内页友情链接。全站友情链接 会在每个页面的侧边栏显示,首页友情链接 会在首页的侧边栏显示,内页友情链接 只会在 友情链接 的页面显示。
要查看友情链接的设置说明可以访问 帮助文档 - 主题设置
插件适配
因为我需要用到 Sticky 文章置顶插件,所以这个主题也直接适配了 Sticky 插件,Sticky 插件安装完成后无需修改主题。
兼容性
主题用到了少量的 CSS3,常见的浏览器都能完美兼容,IE 系列浏览器需要达到 IE10 才能完美兼容。
JavaScript 用到了 ES6,打包的发行版可以完美兼容 IE,开发版不支持 IE 系列浏览器和一些较老的浏览器。
版权声明:本文为原创文章,版权归 Changbin's Blog 所有,允许非商业转载,转载请用链接注明出处。
本文地址:https://www.misterma.com/archives/899/
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
模板里是否考虑新增一些 Markdown 扩展功能,模板后台可配置是否开启。
例如:
[!tip]提示、[!note]备注、[!warning]注意、评论可见、- [x] / - [ ]已完成待完成任务列表可能会考虑先加流程图和数学公式之类的通用语法扩展,私有语法后面再加。
是否有计划,在右上角搜索框全面语言切换按钮处,新增一个浅色/深色的切换按钮。
现在还暂时没有考虑加,不过以后可能会考虑在网站右下方或搜索框左侧加。
1、您可以增加一个说说/瞬间/心情/微语 这样发短文的模块吗
2、关于站点LOGO,主题设置里只能添加一个图片,但是夜间和白天模式切换时,这个logo是固定的,就会跟背景混为一色看不起,可以同时上传2张logo吗,一明一暗,这样不论夜间还是白天模式都能正常显示,也可以保留第二个logo为空时,就都使用第一个logo.
3、
后面会考虑加的
请问您的博客,评论者评论后,被评论后,会收到邮件通知的。那个插件叫什么名字,哪边可以下载?
我的评论回复通知没有使用插件,我单独写了一个程序来读取评论发送。关于 typecho 的评论回复通知插件,你可以看一下 CommentToMail,直接在谷歌上搜索 typecho CommentToMail,应该能搜到很多相关的使用教程。
代码块颜色主题,跟随主题配色的时候。在设置电脑(设备)颜色的时候(亮-暗切换)。网站的主题颜色全部跟着一起自动切换,唯独这个代码块的颜色不会自动切换颜色,需要F5刷新一下页面,才会切换。
这个应该不算什么问题,毕竟正常访客不会像我这样测试。😂
主题目前还没有实时监听配色模式改变,CSS 样式可以自动切换,JS 相关的包括代码块和切换配色的选择框还不会自动改变,需要刷新一下。
后续会考虑加一个监听事件来改变代码块和选择框。
Facile2.5,在view-source查看源代码.post-content下面的a超链接,都没有加
target="_blank",但F12开发者模式,查看是显示target="_blank"的。想要实现不让自动加target="_blank",是需要修改哪个js文件么?我记得之前有版本,如果想.post-content下面的a超链接,自动加
target="_blank",都在后台编辑外观-开发者里面新增脚本来实现的。找了一下,在bundle.js文件的行46,删除
e(".post-page .post-content a").length&&e(".post-content a").attr("target","_blank"),,来实现了。另外,刚才评论说法有误。这个脚本应该是内容里出现非本站链接自动加
target="_blank"后台外观设置,设置默认主题配色为:跟随系统主题的时候。在老版本的浏览器下,很多CSS样式无法正常显示(比如:标题超链接字体默认是红色,阅读全文链接border不显示,导航背景色不显示等等),
如果默认主题配色,选择浅色或深色的话,则没有这些问题。
跟随系统的配色模式主要是通过 CSS 来匹配的,老版本的浏览器可能不支持,不过五年前的主流浏览器应该都支持。
老版本浏览器只适配了 IE,在配色跟随系统的情况下,IE 默认显示浅色模式。
考虑到 JS 比 CSS 加载执行会慢一些,为了避免一段时间后自动变色,所以没有使用 JS 来匹配系统配色模式,IE 也是直接通过 PHP 检测的。
后面会考虑加一个使用 JS 的兜底方案,如果配色跟随系统,但是浏览器不支持就使用浅色。
还发现一个问题,语言我如果选择跟谁浏览器,打开页面就会报错,大概意思是没有获取这个语言的信息,我是评估电脑edge最新版
之前有一个版本可能有这个问题,但是后面已经修复了,如果浏览器没有发送语言信息,默认显示英文。你可以下载最新版的主题试试。
我是这几天刚下载的2.4版本呢
你运行 Typecho 的 PHP 没有安装或启用 intl 扩展,PHP 语言解析函数会依赖这个扩展,你需要安装 intl 扩展才能让主题语言跟随浏览器语言。
请问 导航默认一个是首页,一个是关于,我加了菜单之后时出现在关于之后,但是这个关于如何删除呢?我知道可以改里面的php页面,但是后续升级是不是不太好?是不是不应该修改php文件模板,否则升级后会被覆盖?包括后台可以修改的那几个文件,以及在inc或者components里面的文件?
直接进入后台的 管理 独立页面,就像删除文章一样的删除页面。
是否增加的独立页面,都会自动会进入导航目录?
是的,独立页面都会显示在导航栏,你也可以在独立页面管理通过鼠标拖拽页面列表来排序页面。
知道啦,谢谢
提2个建议,看是否可以:
1、建议图片灯箱效果参考或使用
FancyBox(点击图片以外区域可直接关闭);2、代码块颜色,可设置随主题颜色改变而切换(例如:浅色主题搭配浅色高亮,深色主题搭配深色高亮)
感谢建议,后面会考虑加入的。