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 表情面板
- 详细的 帮助文档 (必看)
- 长期维护
安装
在 Releases 下载的主题是一个 zip 格式的压缩包,把压缩包上传到 Typecho 目录下的 usr/themes/
目录,然后解压,解压后应该可以看到一个 Facile
目录。
登录 Typecho 后台,在顶部导航栏的 控制台
菜单选择 外观
,如果存放位置没有错误的话就可以看到 Facile 主题了,点击 启用
。
主题依赖
主题主要用到了以下几个库:
- bootswatch 不同风格的 Bootstrap 主题
- jQuery DOM 操作和 Bootstrap 依赖
- qrious 生成二维码的 JS 库
- highlight.js 代码高亮
- ECharts 百度开源的图表库,用于 统计页 生成统计图
后端没有用到任何库。
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 系列浏览器和一些较老的浏览器。
版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权。
本文地址:https://www.misterma.com/archives/899/
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
Good
希望移动端可以显示文章目录
等我找到合适的位置和显示方式会考虑加入的
使用Facile这个主题之后加密文章会提示。对不起,您输入的密码错误
如果换回MWordStar 这个主题就没这个问题,请问我该怎么解决?
我在我的网站和本地都测试了一下,加密后输入密码可以正常访问,你可以尝试下载最新版本的主题试一下
我用的就是最新版本的主题,或者您告诉我一下,我该怎么排查。
使用Facile这个主题之后加密文章会提示。对不起,您输入的密码错误
如果换回MWordStar 这个主题就没这个问题
大佬 主题报错怎么办啊
1 Warning: Trying to access array offset on value of type bool in /var/www/html/usr/themes/Facile/post.php on line 76
2 Warning: Trying to access array offset on value of type bool in
on line 241
/var/www/html/usr/themes/Facile/components/sidebar
你用的是不是 PHP8.0
因为我目前服务器和本地开发使用的 PHP 都是 7.4,对于 PHP8.0 还没有做过相关测试,主题在 PHP8.0 上可能会有兼容性问题,你可以考虑先换到其他主题用着,我会在下个版本修复 PHP8.0 的兼容性问题。
我的 7.4.26 也出现了类似错误 😂
大佬,很喜欢这个模版,请问下,可以给文章加 版权声明这个东西吗
是的😅😅😅
后面的版本会考虑加的
好看awa
很赞啊😃😚😑😏
大佬,调整页面宽度更改CSS里面的那个属性值?
我的主题用到了 Bootstrap UI 库,通过 CSS 更改页面宽度可能比较麻烦,如果你想把页面宽度改为和屏幕宽度一样的话,可以把 container 的 class 改为 container-fluid,或者也可以直接通过 CSS 改 .container 的宽度。
主题不支持 [hide]回复可见[/hide],这个怎么解决啊。
目前文章内容是由 Typecho 程序来解析的,只支持标准的 Markdown 和 HTML,其他类型的描述符号后续可能会考虑在主题中加入。
如何更改头像源,如何修改按钮颜色?
你说的是哪里的头像源?如果是评论区的话,可以参考这篇文章 https://www.ahdark.com/technology/874.shtml ,按钮颜色的话,目前在主题设置中是无法更改的,只能改代码。
谢谢,评论头像源通过代码改了,建议可以在主题内直接添加更换国内源。
为啥我写完以后展示的字体很小啊,怎么才能调整呀大佬
你说的字体小是在哪一个页面?是撰写文章页面预览还是前台的文章页面?
在断网后重启服务器,网页访问不正常,无法加载css等样式。只能切换回原有主题后再切换回来才会显示正常
检查一下 Typecho 站点地址设置的地址是否和浏览器访问的地址一致,如果地址不一致可能无法正常加载 CSS 和 JS。
切换深色模式后blockquote里面的字体还是黑色的,请问这是哪里有问题啊😭
你可以直接克隆项目或下载最新源码试一下,引用区应该不会出现黑色字体。我的 https://www.misterma.com/archives/861/ 这篇文章的第一段就是引用,你可以看一下
好的,谢谢~
当前代码块样式对于中文注释的显示非常不友好, 尤其是多行的时候, 只要是因为字体不清晰和注释斜体
建议文章侧边栏增加目录, 根据标题的等级
建议文章列表增加显示:阅读量、点赞量、分类、标签。
目前是仅在文章里显示了,在外面看不到。
如果是为了简洁,设置可选也行
文章列表不太适合显示太多内容,响应式网站除了 PC 外还需要考虑手机和各种小屏幕设备的显示,内容多了在手机上不太美观
多个标签会连在一起显示,之间没有空隙或逗号
上条说错了,应该是文章底部父分类和子分类会连在一起显示,之间没有空隙或符号
感谢反馈,这个问题也会在下个版本修复
代码高亮主题希望能够在外观里选择
代码块生成的行号配色只适用于当前的主题,如果更换主题的话代码配色和行号就不太协调了
说行号我想起来了, 我这不显示行号, 我说怎么看起来感觉不对劲
目前已打包的 1.1.11 版本还没有行号显示功能,下一个版本就会包含行号显示
1.1.11右下角没有显示返回顶部按钮
显示的,我刚测试了,如果滚动条在顶部的话是不会显示的,需要滚动一段距离才会显示
显示了, 原来是我的文章不够长..
这个主题很不错, 适合专注于写作的人
请问统计页设置好之后报错是什么原因?如下
'Database Query Error
你的数据库是 MySQL 吗?
是的 MYSQL 5.6 typecho驱动器是MySQL原生函数驱动 ,PostgreSQL驱动器也试过了。。都不行
这就没办法了,我用的也是 MySQL5.6 ,线上和本地都可以正常使用。我查询数据的时候使用的是 Typecho 提供的数据库操作 API,没有自己编写 PDO 之类的。
我知道什么原因了 数据库文章为空的时候 就会出现这个 放几篇文章就能用了
喜欢简洁的主题
我装了你的模板 为什么右上角没有主题配色 浅色主题 深色主题 这个选项
包含深色主题的版本目前还没有打包到发行版中,你需要用的话可以直接克隆或下载项目。
简约好看!
还差个返回顶部按钮❤️
表情框能点击空白处收缩就更方便了,现在是还要点击表情按钮才能收缩?
老师您能帮视障用户写一个播放器插件吗?或者推荐屏幕朗读软件能操作的播放器,试了好几个都不能读,例如播放、停止、进度条、音量调节都不能读,无法用键盘操作。
我还没有开发过插件,对于插件开发也不是太了解,目前还暂时无法开发插件。你也可以考虑通过修改其他人开发的播放器代码来改善可访问性问题,主要就是给无法获取焦点的元素设置 tabindex 属性,对于不太好操作的可以直接给播放器的按钮绑定快捷键,图标按钮也可以增加 aria-label 属性。
这个主题很漂亮,提两个建议 (1)首页 和文章左侧正文部分能否再稍微加宽一点(2)右侧最新文章的文字链接下面能否加虚线(并且标题全部显示)
大大的赞!感谢分享!
好?收藏....
66
貌似markdow的有序列表的序号都是显示1,不知道是不是主题的问题。我在别的地方用同一段是可以显示1234567的,但在博客发布就只显示1 每个列表序号都是1
你说 Markdown 有序列表?如果你的语法没有错误的话是可以显示有序列表的,而且 Markdown 是 Typecho 程序解析的,主题只是负责展示。我博客的友情链接页面就用到了有序列表,你可以看一下,你也可以切换其他主题试一下。
博主以前的主题怎么实现标签彩色?
MWordStar 目前暂时不支持彩色标签
感谢创作这么优秀的typecho主题,已在胖蒜网推荐https://pangsuan.com/p/Facile.html
谢谢,我也只是写了个主题自用,然后顺便就开源了。
主题颜色能改就更棒了
如果你对改颜色有需求的话,可以看一下我的另一个主题 MWordStar https://www.misterma.com/archives/812/,改颜色和显示网站运行时间都能实现。
不知道是不是我配置的原因“logoUrl 如果省略,在 Logo 区域会显示链接图标。”这里好像没有链接图片显示
你说友情链接?省略 logoUrl 确实会显示一个链接图标,不过这个链接图标不是图片,是字体图标,看我的友情链接就知道了。
这个我看过源代码,是图标但是图标也不显示 你可以看一下我的网站友联
如果你的链接不需要头像在填写 JSON 的时候就不需要 logoUrl 这个属性,如果 logoUrl 的值为空程序也会使用空值作为图片地址,这就会导致图片无法加载,也不会显示链接图标。
好了,这种方法我也试过有报错所以就没检查,以为不可以现在看看原来是忘了删上面属性的逗号了。
谢谢啦
哈哈哈哈,都不错还是喜欢这个。有考虑收费么
Typecho 的免费主题已经够多的了,我收费也赚不了多少钱,还不如直接免费。
填写了备案号貌似没用
感谢反馈,这个问题会在下个版本修复。如果你现在需要填写备案号的话,可以使用 HTML,在 自定义 body 底部输出的 HTML 区域填写备案号,例如
<div class="text-center mb-3">京公网安备xxxxxxxxxx号</div>
嗯,我就是这样弄的。
这里还有个建议就是底部输出html放在Powered by Typecho Theme by Facile的上面好很多
这个因为是自定义 HTML,所以在最下面输出,等下个版本修好了直接填写备案号就会在版权信息上方输出。
有些信息比如以下这些
Copyright © 2020-2021 xxx
该博客已艰难运行 438 days , 16 h , 36 m , 4 s
还是希望能在版权信息上面输出
只是建议
404页面点击返回首页无法返回。404文件中双引号的问题
之前没注意到这个问题,感谢提醒,下个版本会修复的。
不错哦,简单的很适合写博客,喜欢。