转载自作者博客!地址https://tntofu.com/archives/24.html
Typecho 清新风格响应式主题。
化繁为简,如沐清风。
样式如你所见。
Github repo: https://github.com/trinitrotofu/Bubble
如果觉得本主题还不错的话可以给个 star 哦,这是对开源主题作者们最大的鼓励。
特性
- 清新的界面:大气简洁的页面布局,采用 argon design system,元素间隔恰到好处
- 人性化的设计:登陆后显示后台管理按钮、醒目的文字、方便操作的按钮摆放,以及页面自适应
- 流畅的用户体验:支持全站 pjax、ajax 实现评论无刷新,采用 jsDelivr CDN 全球加速主题大部分静态资源加载,减小服务器压力
- 短代码功能:使用主题特殊 HTML 标签实现更丰富的功能,如高亮代码框以及友链卡片
- 自定义壁纸:首页固定壁纸、其他页面随机壁纸,彰显个性爱好
- 代码高亮:自带 prism.js 代码高亮,主题丰富,解析迅速
- 数学公式:自带 KaTeX 数学公式渲染,相比 MathJax 更为轻量、快速
- 自定义样式:支持用户添加 css 样式,随意调整主题外观
我真佩服自己写文案的水平。
使用
安装
直接下载 zip 源码,解压后修改文件夹名称,移动到 Typecho 主题目录,也可以直接在服务器上用 git clone 下载主题。
设置
主题设置页面位置:Typecho 后台->控制台->外观->设置外观。
站点 LOGO
该项应为一个图片的 URL 地址,将显示在浏览器顶部标签标题左边。
请勿使用相对地址。
站点头像
该项应为一个图片的 URL 地址,将显示在首页大标题上方。
请勿使用相对地址。
首页背景图像
该项应为一个图片的 URL 地址,用以设定网站首页背景图片,留空则使用默认紫色渐变背景。
请勿使用相对地址。
随机背景图像地址
该项应为一个或多个图片的 URL 地址,用以设定网站文章页、独立页面以及其他页面的头图,设定后将从给定的图片中随机抽取一个显示,留空则使用默认紫色渐变背景。
URL 之间用换行隔开,即每行一个 URL,请勿包含多余字符。
请勿使用相对地址。
背景气泡
该项用以选择是否在首页以及文章页顶部背景处显示半透明气泡。
页脚左下角文字
该项用以设定页脚左下角的说明文字,如 Copyright 和 备案信息。
可添加 HTML 代码以实现更丰富的功能,如跳转链接等。
页脚小工具
该项用以选择是否在页面底部显示“最新评论”、“最新文章”和“近期归档”。
自定义 css
该项用以提供自定义 css 接口,用户可以填入自己需要的 css 代码来改变主题外观,例如更改字体大小。
自定义 css 的生效不需要清空缓存。
全站 pjax 模式
该项用以选择是否启用全站 pjax 模式提升用户访问体验。
请注意:开启该功能后可能会导致站点一些功能不正常,例如如果您未使用主题自带数学公式渲染,而是选择使用其他插件实现该功能,则会导致无刷新打开页面时数学公式插件不工作,因此请仔细检查后决定是否开启该模式。
如果您发现部分功能确实出现了问题,而您又希望开启该模式,则请查看“pjax 回调代码”一项的说明。
pjax 回调代码
该项用以设定 pjax 渲染完毕后需执行的 JS 代码,以此解决上一项中提到的插件不工作之类的问题。
例如您有一个叫做myFunction()
的函数在其他插件中调用了,但您发现它在全站 pjax 模式下不工作,则您应该在该项中填入以下内容:
那么在 pjax 执行完毕之后会调用myFunction()
,问题就解决了。
katex 数学公式渲染
该项用以选择是否启用 katex 数学公式渲染
prism.js 代码高亮
该项用以选择是否启用 prism.js 代码高亮
prism.js 高亮主题
该项用以选择 prism.js 代码高亮的主题配色
短代码
高亮代码框
标签名:
bbcode
:高亮代码框标签
语法:
示例:
效果:
友链
标签名:
bblist
:友链列表标签bblink
:友链项标签
语法:
示例:
效果:
更新
更新步骤为:删除旧版本,并安装新版本
请注意,由于 Typecho 本身设计的原因,主题更新后可能会添加新的设置项,如果不禁用主题并重新启用(通过启用其他主题),新设置项将被留空并可能导致 Bug,所以请在更新后重启主题,或者请仔细检查是否有留空的设置项(这里主要指选择型设置项,文本类设置项似乎没这个问题)
截图
License
Open sourced under the MIT license.
其他
- 主题由三硝基豆腐、Rorical和Totorato三人共同完成
- 基于Argon Design System
- 评论模块中部分代码参照了 Typecho 官方主题 Default
- Rorical 的 Rorical 主题(同样基于 argon design system):https://github.com/Liupaperbox/Rorical
- Totorator 的修改版 Bubble 主题:https://github.com/totorato/Bubble
Todo
- 自定义标签,如代码块
- 将自定义 css 移动到主题设置中实时更新
更新历史
3.0.2
- 调整首页壁纸全屏显示以美化高分屏显示效果
- 首页翻页自动滚动至文章列表
3.0.1
- 修复评论卡托条问题
- 修复左上角标题颜色问题
3.0.0
- 新增 pjax 支持、ajax 评论无刷新及其部分细节优化
- 新增 KaTeX 数学公式渲染
- 新增 prism.js 代码高亮
- 新增短代码功能(高亮代码框以及友链功能)
- 使用 jsdelivr CDN 加速静态文件加载
- 更新部分页面布局
- 文章列表采用分页导航栏代替翻页按钮
- 修正评论区头像被挤压的问题
- 修正评论卡由于采用 flex 而高度塌缩的问题
注:此次更新主要由 Rorical 贡献代码,十分感谢
2.3.0
- 支持自定义首页背景图像和其他页面标题栏背景图像随机显示
- 调整页面按钮样式
- 评论区布局调整
- 新增首页头像旋转特效
- 调整修复部分页面布局以及样式错误
- 更新截图
2.2.2
- 调整内容页宽度
- 支持自定义页脚说明文字
2.2.1
- 修复分类显示 Bug(issue #2)
- 规整代码
2.2
- 优化内容宽度设定
- 更新换行规则,避免某单词或网址过长导致
2.1
- 页脚显示“最新评论”、“最新文章”和“文章归档”
- 新增后下角快捷编辑按钮(需登录后显示),方便快速进入后台、编辑文章
2.0
- 采用卡片式页面,提升美观性
- 美化顶部导航栏样式
- 新增后台设置 Logo 和 首页头像功能
- 美化文章列表和文章阅读页中文章状态标签(如分类、作者等)
- 美化评论区显示,添加博主标志,调整头像大小,提升布局美观性,解决评论卡片无法显示于子评论下方的问题,适配移动端,提升阅读舒适度
- 采用 font awesome 代替 nucleo 图标集,丰富图标种类
- 美化加密文章密码表单
- 调整隐藏/加密文章的评论卡显示机制
- 调整页面 title 显示机制
2.0 之前
我不记得了,也懒得看
本文作者为飞鸟投林,转载请注明。