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/
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
后台外观设置,设置默认主题配色为:跟随系统主题的时候。在老版本的浏览器下,很多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、代码块颜色,可设置随主题颜色改变而切换(例如:浅色主题搭配浅色高亮,深色主题搭配深色高亮)
感谢建议,后面会考虑加入的。
内容里写[-page-](用
``代码的形式写),模板显示会异常,跟分页标签错乱了感谢反馈,会尽快修复。
发现个问题,,,,关于链接的
我设定了,全站链接和内页链接,,但我发现,全站链接只在首页显示了,其它页没在侧边显示,,,而内页链接,同时显示了两个,分别是内页链接和全站链接,,,可以到我网址查看
我看你设置的是首页链接,首页链接只会在首页的侧边栏和链接页显示,只有全站链接才会在每个页面的侧边栏显示。
还有你的链接页是不是被改过?无法显示内页链接的标题。
你可以看我的友情链接页面。
我知道原因了,原来,你的友情链接单独页面,,,首页,全站,和内页,是分开的不同的网站,,,,我设定的是所有的友链网站都显示在全站及首页,所以就有重复了,,,,我现在的解决方法是,把模板里,,全站和内页都注释掉了,还有就是,名字 'title' => '', 因为加上标题就和上面的标题重复,所以我也搞成了空白,这样就清爽了
https://blog.ziyege.com/links.html
解决一个问题,就是其它页侧边链接的问题,是因为我在设置里面没有显示文章的侧边链接
另外 一个就是,独立页面链接,会重复,,能搞个QQ群不,,,,,可以方便交流,如果没有我可以贡献一个
你说的内页链接会重复指的是?
默认情况下,所有的链接包括首页和全站链接都会在链接页显示。
QQ群感觉暂时没必要,如果你嫌评论麻烦,也可以直接在邮件回复。
请问这个模板如何配置,可以在评论里的代码也支持
`代码高亮你的导航栏单独页的友情链接,是同时把全站,首页,内页都显示了,但你这三个里面的网站都不相同,,,,但是我的因为友情链接人特别少,我在内页和全站都是一样的网站友链,,所以就重复了,,,,,,
你只需要把所有链接都放到全站链接就不会重复,可以实现在每个页面侧边栏显示,也可以在链接页显示。
明白了,谢谢,,,,
评论支持代码高亮的啊,不用配置
如何能使日志内容里,非本站的超链接全部自动加上
rel="nofollow"这个需要修改代码
在主题目录的 functions.php 中加入下面这个函数:
在主题目录的 post.php 中找到这一行:
在这一行的上方加入:
这样配置,view-source查看代码中文字全部变成
登录网站了PHP 的 DOMDocument 会对中文进行转译处理,页面内容可以正常显示,只是源码看上去不是原来的内容。
我换成了正则表达式的方案,你可以把函数换成下面这个:
非常感谢!另,这个判定超链接如果按http(https)判定非本站更好,这样如果文章内的链接用的
href="/demo/demo,html"做超链接,也不会加rel="nofollow"了这个判断本站地址使用的是你在 Typecho 基本设置的站点地址中填写的地址,你填的是 http 就判断 http,填的是 https 就判断 https,填的是 ip 就判断 ip。
PHP 处理是在服务器输出之前,相对路径的地址不一定能处理,只有完整地址才能处理。
询问豆包后,我将post.php的这段代码
替换为下面的新代码,可以实现 Typecho 基本设置的站点地址中填写的地址,和超链接绝对地址,都不加
rel="nofollow",其他域名地址会就加。目前测试没什么问题,帮忙看看是否有代码问题。
没发现有什么问题,只要测试没问题,就没问题
这样配置,view-source代码中文字全部变成“登录网站”了
我这里置顶的文章,怎么前面不显示 置顶 俩个红字
我置顶文章使用的是 Sticky 插件,需要在插件设置的
置顶标题的 html设置显示的文字。大佬,能不能整合一下编辑器?比如回复可见啊,私密评论啊之类的。
感谢建议,因为 Typecho 的评论设计没有私密评论和回复可见之类的,这些都需要通过主题或插件来实现,后面会考虑加入的。