Facile 一个简洁的 Typecho 博客主题

2021年05月12日 Changbin 81000

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首页截图

Facile深色主题截图

不包含文章头图的截图：

Facile不包含文章头图的截图

小头图模式：

Facile小头图模式截图

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

Facile大头图和小头图搭配使用的截图

Facile 相比 MWordStar 来说，外观要更简洁一些，功能也会少一些，MWordStar 有的功能以后也会陆续增加到 Facile 中，但是 Facile 的功能以后也不会有 MWordStar 多。

特点和功能

响应式设计
无障碍适配（Accessibility）
包含浅色和深色两套配色（可根据系统主题配色自动调节）
代码高亮
自带点赞功能
支持根据文章内插入的标题生成章节目录
支持图片懒加载
支持文章分页
文章列表支持多种排版方式
丰富的侧边栏组件
丰富的设置选项
详细的图表统计
评论区自带 Emoji 表情面板
支持 PJAX 无刷新跳转
详细的帮助文档（必看）
长期维护

安装

在 Releases 下载的主题是一个 zip 格式的压缩包，把压缩包上传到 Typecho 目录下的 usr/themes/ 目录，然后解压，解压后应该可以看到一个 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 的文章。

基本数据统计如下：

Facile基本统计截图

分类占比统计图如下：

Facile分类占比截图

下面是评论动态日历图：

Facile评论动态图

文章动态日历图和评论动态的日历图是差不多的，屏幕尺寸不同显示的月份数量也不同。

下面是文章评论排名表格：

Facile评论排名表格截图

文章阅读量排名表格和评论量排名的表格也是差不多的。

统计页面演示可以访问 https://www.misterma.com/data.html 。

Emoji 表情

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

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

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

Facile Emoji表情面板

无障碍（Accessibility）

上网对于大多数人来说是一件再简单不过的事，但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。目前国内的很多网站和 App 都只注重外观，忽略了残障人士的可访问性，甚至有的 App 在开启屏幕阅读器的情况下都无法正常使用。

Facile 主题针对屏幕阅读器做了大量优化，并在 MVDA 和 VoiceOver 这两款屏幕阅读器上做过测试，无论是 PC 还是移动设备都能完美朗读（除了日历图），主题能准确传达需要朗读的内容和信息，对于盲人来说，使用标准的屏幕阅读器基本可以无障碍操作。

主题可完美支持键盘访问，颜色对比度也符合标准。

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

友情链接

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

要查看友情链接的设置说明可以访问帮助文档 - 主题设置

插件适配

因为我需要用到 Sticky 文章置顶插件，所以这个主题也直接适配了 Sticky 插件，Sticky 插件安装完成后无需修改主题。

兼容性

主题用到了少量的 CSS3，常见的浏览器都能完美兼容，IE 系列浏览器需要达到 IE10 才能完美兼容。

JavaScript 用到了 ES6，打包的发行版可以完美兼容 IE，开发版不支持 IE 系列浏览器和一些较老的浏览器。

本文地址：https://www.misterma.com/archives/899/

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。

Typecho

发表评论

评论内容 *

称呼 *

电子邮件地址 *

网站

取消回复

已有 172 条评论

kkk 101天前
回复

希望文章标题能增加配色功能，主题的配色能修改。
主题配色需要改哪些关键代码，我想橙色改成其他颜色。😃
1. Changbin 作者回复kkk 101天前
  回复
  不知道你要更改的是哪一个标题？可以在后台主题设置的开发者设置-自定义CSS加入代码。
  更改文章页的文章标题颜色：
  article h1 a { color: pink !important; }
  更改首页文章列表区域的标题颜色：
  .post-list h2 a { color: pink !important; }
  1. kkk 回复Changbin 101天前
    回复
    
    文章内一级标题，二级标题这些将黑色改成其他颜色（不是标题栏）。
    还有就是现在主题配色都是橙色，怎么定位那些按钮，文字，然后在自定义css里面修改呢？
    感谢回复！
    
    Changbin 作者回复kkk 101天前
    回复
    
    在主题设置自定义CSS加入：
    .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { color: pink !important; }
    你要改的配色应该是红色吧？这是一整套的样式，包括了元素在各种状态下的配色，内容太多了，改起来不太方便。
    你如果需要改变整套主题的配色风格，可以替换主题使用的 bootstrap css 文件。
深圳太阳能板定制厂家 209天前
回复

😄
ben 278天前
回复

大佬你好，在我的blog里启用你这个facile主题外观后，在我的blog里发表一编文章后，访问blog显示的外观与你的演示网站不一样，我的有点凌乱，是不是还需要安装什么插件，才能跟你的演示网站一样？请指教个，第一次弄blog,小白一个。多谢哈。
1. Changbin 作者回复ben 278天前
  回复
  
  可能是 CSS 文件没有成功加载或文件损坏。
  你可以查看一下后台的基本设置 - 站点地址，看一下地址是否和你的域名一致，比如 https://xxx.com。
  如果地址没有问题的话，可以尝试重新下载最新版本的主题，访问 https://github.com/changbin1997/Facile/releases，选择 Facile-2.2-bundle.zip 。
MrHe 573天前
回复

大佬您好，发现全站链接都在新标签打开，我想站内链接不在新标签打开，请问该怎么做，谢谢~
1. Changbin 作者回复MrHe 573天前
  回复
  你说的是不是侧边栏的友情链接？主题目前还不能设置友链的打开方式，你可以使用自定义 JS 来设置，你可以在自定义 body 底部输出的 HTML 粘贴下面的代码：
  <script type="text/javascript"> const currentDomain = window.location.hostname; const links = document.querySelectorAll('.sidebar a[target="_blank"]'); links.forEach(el => { if (el.getAttribute('href').includes(currentDomain)) { el.removeAttribute('target'); } }); </script>
  1. Mr.He 回复Changbin 573天前
    回复
    
    感谢大佬回复，我的意思是站外链接新标签打开，站内链接（比如文章内的注解跳转）需要站内打开。
    
    Changbin 作者回复Mr.He 573天前
    回复
    
    比较简单的方式还是通过自定义 JS，在自定义 body 底部输出的 HTML 粘贴下面的代码：
    <script type="text/javascript"> const currentDomain = window.location.hostname; const links = document.querySelectorAll('.post-content a'); links.forEach(el => { if (el.getAttribute('href').includes(currentDomain)) { el.removeAttribute('target'); } }); </script>
    文章内包含你的域名的链接都不会在新标签页打开
checo 594天前
回复

大佬，怎么加上顶部导航栏
1. Changbin 作者回复checo 594天前
  回复
  
  你说的加顶部导航栏指的是？
  1. checo 回复Changbin 594天前
    回复
    
    我找到了，对了请问怎么置顶文章
    
    Changbin 作者回复checo 594天前
    回复
    
    我使用的是 Sticky 插件
bagsky 669天前
回复

能不能精简一下CSS　（style-20230622.css）　这个文件太大，还引用了GOOGLE字体系，导至 GOOGLE的First Contentful Paint和 Largest Contentful Paint 都远超标准时间
1. Changbin 作者回复bagsky 669天前
  回复
  
  目前打包后的 style.css 已经比较小了，只有 245K，连 Bootstrap 组件我都只打包用到的，也没有用到 Google 字体之类的。如果你感觉单文件太大的话，也可以直接克隆项目或下载 Source code 使用，这是没有打包过的版本，每个 CSS 和 JS 都是分开单独加载的。
  1. bagsky 回复Changbin 669天前
    回复
    
    CSS 第一行就是引用啊，@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap)
    这个可以去除吗
    
    Changbin 作者回复bagsky 669天前
    回复
    
    这个字体是 Bootstrap 库引入的，删除后对样式不会有太大影响，可能只是某些区域的字体粗细稍微有点区别，但是区别不大。你可以尝试删除，对比一下和删除前的字体样式是否有区别。
tqtwdasc 691天前
回复

我用SQLite 和 Mysqli两个都做过测试。Mysqli用的就是 charset' => 'utf8mb4', SQLite 搜索了所有代码，都是UTF-8
看看这个图
https://img2.imgtp.com/2024/05/14/GsxjwnpM.jpg
1. Changbin 作者回复tqtwdasc 691天前
  回复
  
  看你的图感觉像是浏览器的问题，我之前测试的时候用 Win7 + 老 IE 有些表情也无法正常显示。不知道你用的是不是 Google Chrome 之类的浏览器？还有你访问我的网站的时候，能不能看到 Emoji 正常显示？
  1. tqtwdasc 回复Changbin 691天前
    回复
    
    Microsoft Edge ， Firefox ,chrome 这三个都在用。我一直在测试。三个都是一样结果。本地测试，上传到空间都试过。访问你网站时能正常显示，😅
    
    Changbin 作者回复tqtwdasc 691天前
    回复
    
    你的主题有没有更改过代码？有没有添加过自定义 CSS？
    
    tqtwdasc 回复Changbin 691天前
    回复
    
    应该是模版comment-input.php有问题，里面很多的乱码，如果不做任何改动。可以正常使用。但只要修改一点，保修后，就有可能500错误。全翻译成英文后，能用，但可能就会出现https://img2.imgtp.com/2024/05/14/GsxjwnpM.jpg 图片这个问题
    
    Changbin 作者回复tqtwdasc 691天前
    回复
    
    你的主题应该是在 https://github.com/changbin1997/Facile/releases 下载的吧？你编辑文件的时候可以看一下你的编辑器是不是通过 utf8 打开的，还有保存的时候也是要保存为 utf8。
    
    tqtwdasc 回复Changbin 691天前
    回复
    
    我用原下载的文件，然后看网业文件代码也不乱码哦，只是用Dreamweave打开时乱码，是不是编辑器的问题，你用什么编辑器打开的
    
    tqtwdasc 回复Changbin 691天前
    回复
    
    是在github.com下载的，我用Dreamweave打开的，其它文件都没问题，就是有关Emoji的文件都是乱码的，特别是emoji.php。但我看你网站的代码 Emoji部份没有乱码的，看这两个图
    https://img2.imgtp.com/2024/05/14/2wC1w7yG.jpg
    https://img2.imgtp.com/2024/05/14/UbkltolX.jpg
    能不能将你components 文件夹打包发给我的邮箱
    
    Changbin 作者回复tqtwdasc 691天前
    回复
    
    我网站现在使用的主题就是在 https://github.com/changbin1997/Facile/releases 下载的，我每次发布新版本都会下载一份到我的网站更新使用，你可以直接到 Github 上下载发行版使用。编辑 php 文件你可以使用 VSCode 编辑，Dreamweaver 老版本可能对 Emoji 支持的不太好。
    
    tqtwdasc 回复Changbin 691天前
    回复
    
    代码基本没修改，Css 是个一个没改过只是将中文翻译成英文，我马上重新将个中文的来测试下
tqtwdasc 691天前
回复

为什么我的Emoji 表情文件总是乱码例如馃榾', '馃榿', '馃槀', '馃ぃ', '馃槂
上传到网站后表情都是黑白，中间还有很多框框，显示不正常
1. Changbin 作者回复tqtwdasc 691天前
  回复
  
  你说的 Emoji 问题是在评论输入框无法正常显示还是提交后的评论内容 Emoji 无法正常显示？如果是评论内容无法正常显示的话，可能是你的 MySQL 数据库编码问题，MySQL 的 utf8 无法显示 Emoji，需要更改为 utf8mb4，可以参考这篇文章更改 https://www.uskvm.com/p/33.html
demofree 710天前
回复

请问评论区的Gravatar头像源是怎么替换的，最好能把它加在后台设置里。谢谢！
1. Changbin 作者回复demofree 710天前
  回复
  
  在 Typecho 根目录的 config.inc.php 里替换，如果你还没有替换过的话，可以在 config.inc.php 里加入一行
  define('__TYPECHO_GRAVATAR_PREFIX__', 'https://sdn.geekzu.org/avatar/');
梦泽不是梦 738天前
回复

这边推荐优化一下侧边导航栏，然后把友情链接的添加方式或者格式改一下，json有点麻烦，可以：
网站名称 || 简介 || 链接 || 图片
或者UI化添加(直接做一个类似于LINKS插件的方法)
1. Changbin 作者回复梦泽不是梦 738天前
  回复
  
  感谢建议，添加友链会考虑使用更容易的方式。