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)
- 包含浅色和深色两套配色(可根据系统主题配色自动调节)
- 支持多语言(i18n)
- 代码高亮
- 支持短代码(Shortcode)
- 支持 MathJax 数学公式渲染
- 内置阅读量统计和点赞功能
- 支持根据文章内插入的标题生成章节目录
- 支持图片懒加载
- 支持文章分页
- 文章列表支持多种排版方式
- 文章支持单独加密某一部分内容,评论后可查看
- 评论支持私密评论,只有评论者和管理员可见
- 丰富的侧边栏组件
- 丰富的自定义选项
- 详细的图表统计
- 评论区内置 Emoji 表情面板
- 评论区支持图片验证码和 Cloudflare Turnstile
- 支持 PJAX 无刷新跳转
- 内置文章置顶功能
- 支持 Service Worker 缓存
- 支持 QQ 头像显示和自定义 Gravatar 源
- 内置多套独立页面模板,包括时间线的文章归档、友链、统计、Github 项目展示
- 支持添加友情链接
- SEO 友好
- 支持添加自定义 CSS、head 区域 HTML、footer 底部 HTML,可以方便的修改主题样式和添加分析 JS
- 详细的 帮助文档 (必看)
- 长期维护
安装
在 Releases 下载的主题是一个 zip 格式的压缩包,把压缩包上传到 Typecho 目录下的 usr/themes/ 目录,然后解压,解压后应该可以看到一个 Facile 目录。
登录 Typecho 后台,在顶部导航栏的 控制台 菜单选择 外观 ,如果存放位置没有错误的话就可以看到 Facile 主题了,点击 启用 。
主题依赖
- bootswatch 不同风格的 Bootstrap 主题
- jQuery DOM 操作和 Bootstrap 依赖
- qrious 生成二维码的 JS 库
- highlight.js 代码高亮
- ECharts 百度开源的图表库,用于 统计页 生成统计图
- jquery-pjax 用于页面无刷新跳转
后端没有用到任何库。
ECharts 的库比较大,所以只引入了饼图和日历图,而且只会在统计页加载。Bootstrap 的 JS 使用 Webpack 打包过的发行版也只引入了用到的模块。
CSS 和 JS 使用了 Service Worker 缓存,第一次访问时会缓存用到的 CSS 和 JS,下次访问直接使用缓存的 CSS 和 JS,代码高亮模块会按需加载,只有页面中有代码块才会加载。
MathJax 使用在线 CDN 加载,国内可以正常加载,只有检测到文章内有 MathJax 语言标记才会加载 MathJax 库。
主题的图标使用的是 IcoMoon 的字体图标,IcoMoon 的图标可以自定义,所以主题中只包含几个用到的图标。
前端 JS 使用的是 ES6 语法,在 IE 系列的浏览器(包括 IE11)是无法运行的,如果没有二次开发需求的话,可以在 Releases 下载 Facile-bundle.zip 发行版,发行版使用了 Webpack + Babel 来打包和转换,可以在 IE 运行。
只有发行版支持 Service Worker 缓存。
代码高亮
代码高亮目前包含三套主题配色,分别是 Stack Overflow(浅色)、VS2015(深色)、Sunburst(高对比度)。目前支持 30 多种语言的代码高亮。
要查看支持的语言列表和代码高亮样式可以访问 帮助文档 - 代码高亮
文章头图和文章列表排版
文章头图可以显示在文章列表、文章页顶部。
文章列表支持大图和小图模式,可以统一设置,也可以每篇文章使用不同的方案,文章列表也可以直接显示全文。
文章头图来源可以手动输入图片 URL,也可以自动抓取文章内的第一张图片,也可以设置一堆图片 URL 随机显示。
侧边栏
下面是目前可以显示在侧边栏的组件:
- 博客信息
- 主题配色
- 最新文章
- 最新回复
- 文章分类
- 标签云
- 文章归档
- 其它功能
- 友情链接
- 文章的章节目录
- 自定义
侧边栏的每个组件你都可以选择开启或关闭,你还可以自定义侧边栏的组件排序顺序。
统计页
主题包含一个统计页模板,你可以在后台创建页面,页面的自定义模板选择 网站数据,标题可以随便写,创建完成后就可以在顶部导航栏访问了。
统计页包含基本的数据统计、分类文章占比图、文章更新日历图、评论动态日历图、阅读量排名前 5 的文章、评论量排名前 5 的文章。
基本数据统计如下:

分类占比统计图如下:

下面是评论动态日历图:

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

文章阅读量排名表格和评论量排名的表格也是差不多的。
统计页面演示可以访问 https://www.misterma.com/data.html 。
评论区
评论区支持私密评论,只有评论者和网站管理员可见。
主题内置了用于评论验证的图片验证码和 Cloudflare Turnstile 支持,图片验证码开启就可以使用,Cloudflare Turnstile 注册账号可免费使用。
主题也内置了一个 Emoji 表情面板,包含很多类型的表情。
下面是 Emoji 表情面板的截图:

无障碍(Accessibility)
上网对于大多数人来说是一件再简单不过的事,但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。目前国内的很多网站和 App 都只注重外观,忽略了残障人士的 可访问性,甚至有的 App 在开启屏幕阅读器的情况下都无法正常使用。
主题针对屏幕阅读器做了大量优化,并 在 NVDA 、VoiceOver 、TalkBack 这些屏幕阅读器上做过测试,无论是 PC 还是移动设备都能完美朗读。主题能准确传达需要朗读的内容和信息,对于视障人群来说,使用标准的屏幕阅读器基本可以无障碍操作。
主题可完美支持键盘访问,很多地方专门做了键盘适配,颜色对比度也符合标准。
主题后台设置也适配了屏幕阅读器。
兼容性
主题用到了少量的 CSS3,常见的浏览器都能完美兼容,IE 系列浏览器需要达到 IE10 才能完美兼容。
IE 和老一些的浏览器不支持根据系统配色方案自动切换深色或浅色模式,默认显示浅色模式,需要手动切换。
JavaScript 用到了 ES6,打包的发行版可以完美兼容 IE,开发版不支持 IE 系列浏览器和一些较老的浏览器。
MathJax 不一定能在 IE 系列浏览器渲染数学公式。
版权声明:本文为原创文章,版权归 Changbin's Blog 所有,允许非商业转载,转载请用链接注明出处。
本文地址:https://www.misterma.com/archives/899/
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
隐藏内容的2个代码:
[hide type="comment"]隐藏内容[/hide]和[hide type="login"]不让看[/hide],好像没有效果。MfThemePlugin插件启用了抱歉,发现是我的问题,才发现我是管理员账号登录状态,所以看不到效果。😂
3.0新版本,
header.php文件里修改<?php $this->header(); ?>为<?php $this->header('generator=&template=&pingback=&xmlrpc=&wlw=&social='); ?>不显示部分信息,但在内容页无效。依旧显示这个主题的内容页不会直接使用
$this->header()输出,所以你改$this->header()是无效的。感谢博主提供如此优秀的模板👍,已成功更新至3.0版本
😊
请教下这发表评论以后,您回复了,我会收到一封邮件,这个邮件功能在哪里设置啊?
typecho 没有邮件通知功能,我的主题也没有邮件通知功能,我的邮件通知是单独写了一个程序实现的。你可以通过装插件的方式实现邮件通知,你可以搜一下 CommentToMail 插件。
请问左侧的文章数量在哪里设置,默认好像只有5篇文章,可以设置成10篇吗
登录 typecho,在上方选择设置-阅读,可以更改每页文章数目。
模板里是否考虑新增一些 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"