Bubble——Typecho 清新风格响应式主题

由 三硝基豆腐 发布

Typecho 清新风格响应式主题。

化繁为简,如沐清风。

样式如你所见。

Github repo: https://github.com/trinitrotofu/Bubble

如果觉得本主题还不错的话可以给个 star 哦,这是对开源主题作者们最大的鼓励。

特性

  • 清新的界面:大气简洁的页面布局,采用 argon design system,元素间隔恰到好处
  • 人性化的设计:登陆后显示后台管理按钮、醒目的文字、方便操作的按钮摆放,以及页面自适应
  • 流畅的用户体验:支持全站 pjax、ajax 实现评论无刷新,采用 jsDelivr CDN 全球加速主题大部分静态资源加载,减小服务器压力
  • 短代码功能:使用主题特殊 HTML 标签实现更丰富的功能,如高亮代码框以及友链卡片
  • 自定义壁纸:首页固定壁纸、其他页面随机壁纸,彰显个性爱好
  • 代码高亮:自带 prism.js 代码高亮,主题丰富,解析迅速
  • 数学公式:自带 KaTeX 数学公式渲染,相比 MathJax 更为轻量、快速
  • 自定义样式:支持用户添加 css 样式,随意调整主题外观
  • 文件轻量:主题.zip格式安装包(去掉.git文件夹后)大小不到 250 KB,简洁而不简单

我真佩服自己写文案的水平。

使用

安装

Releases下载 zip 源码,解压后移动到 Typecho 主题目录。

设置

主题设置页面位置:Typecho 后台->控制台->外观->设置外观。

站点 LOGO

该项应为一个图片的 URL 地址,将显示在浏览器顶部标签标题左边。

请勿使用相对地址。

站点头像

该项应为一个图片的 URL 地址,将显示在首页大标题上方。

请勿使用相对地址。

首页背景图像

该项应为一个图片的 URL 地址,用以设定网站首页背景图片,留空则使用默认紫色渐变背景。

请勿使用相对地址。

随机背景图像地址

该项应为一个或多个图片的 URL 地址,用以设定网站文章页、独立页面以及其他页面的头图,设定后将从给定的图片中随机抽取一个显示,留空则使用默认紫色渐变背景。

URL 之间用换行隔开,即每行一个 URL,请勿包含多余字符

请勿使用相对地址。

背景气泡

该项用以选择是否在首页以及文章页顶部背景处显示半透明气泡。

页脚左下角文字

该项用以设定页脚左下角的说明文字,如 Copyright 和 备案信息。

可添加 HTML 代码以实现更丰富的功能,如跳转链接等。

页脚小工具

该项用以选择是否在页面底部显示“最新评论”、“最新文章”和“近期归档”。

自定义 css

该项用以提供自定义 css 接口,用户可以填入自己需要的 css 代码来改变主题外观,例如更改字体大小。

自定义 css 的生效不需要清空缓存。

全站 pjax 模式

该项用以选择是否启用全站 pjax 模式提升用户访问体验。

请注意:开启该功能后可能会导致站点一些功能不正常,例如如果您未使用主题自带数学公式渲染,而是选择使用其他插件实现该功能,则会导致无刷新打开页面时数学公式插件不工作,因此请仔细检查后决定是否开启该模式。

如果您发现部分功能确实出现了问题,而您又希望开启该模式,则请查看“pjax 回调代码”一项的说明。

pjax 回调代码

该项用以设定 pjax 渲染完毕后需执行的 JS 代码,以此解决上一项中提到的插件不工作之类的问题。

例如您有一个叫做myFunction()的函数在其他插件中调用了,但您发现它在全站 pjax 模式下不工作,则您应该在该项中填入以下内容:

myFunction();

那么在 pjax 执行完毕之后会调用myFunction(),问题就解决了。

katex 数学公式渲染

该项用以选择是否启用 katex 数学公式渲染

prism.js 代码高亮

该项用以选择是否启用 prism.js 代码高亮

prism.js 高亮主题

该项用以选择 prism.js 代码高亮的主题配色

短代码

高亮代码框

标签名:

  • bbcode:高亮代码框标签

语法:

<bbcode type="颜色类型">代码框内容</bbcode>

示例:

<bbcode type="success">这是绿色高亮代码框,用以显示推荐信息</bbcode>
<bbcode type="danger">这是红色高亮代码框,用以显示警告信息</bbcode>
<bbcode type="warning">这是橙色高亮代码框,用以显示注意信息</bbcode>
<bbcode type="secondary">这是灰色高亮代码框,用以显示引用信息</bbcode>
<bbcode type="info">这是蓝绿色高亮代码框,用以显示高亮信息</bbcode>
<bbcode type="default">这是深蓝色高亮代码框,用以显示高亮信息</bbcode>
<bbcode type="primary">这是紫色高亮代码框,用以显示高亮信息</bbcode>

效果:

bbcode.png

友链

标签名:

  • bblist:友链列表标签
  • bblink:友链项标签

语法:

<bblist>
<bblink link="友链 URL" icon="友链图标 URL" des="友链描述">友链名称</bblink>
</bblist>

示例:

<bblist>
<bblink link="https://tntofu.com" icon="https://tntofu.com/usr/uploads/2020/03/4228973783.jpg" des="三硝基豆腐的博客">豆腐蒸锅</bblink>
<bblink link="https://blog.boxpaper.club" icon="https://tntofu.com/usr/uploads/2020/04/2709766458.png" des="/ No Result !">Rorical</bblink>
</bblist>

效果:

bblink.png

更新

更新步骤为:删除旧版本,并安装新版本

请注意,由于 Typecho 本身设计的原因,主题更新后可能会添加新的设置项,如果不禁用主题并重新启用(通过启用其他主题),新设置项将被留空并可能导致 Bug,所以请在更新后重启主题,或者请仔细检查是否有留空的设置项(这里主要指选择型设置项,文本类设置项似乎没这个问题)

截图

screenshot.png

License

Open sourced under the MIT license.

其他

Todo

暂无

更新历史

3.0.3

  • 优化 pjax 进度条显示
  • 添加图片圆角
  • 修改高分辨率内容卡片边距
  • 美化搜索框

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 之前

我不记得了,也懒得看


172 条评论

  1. 咲枵
    咲枵 · 2020-08-20 21:52

    我博客发表评论的左下角有个`, "text/html").getElementsByTagName("script") var script for(var i = 0; i是什么问题呢?

    1. 咲枵
      咲枵 · 2020-08-20 21:59

      没事了,发现是插件不兼容

      1. 三硝基豆腐
        三硝基豆腐 · 2020-08-20 22:56 作者

        插件兼容问题应该在下一个版本就能解决。目前如果要解决兼容问题的话可以把 pjax 功能关了。

  2. 弥生
    弥生 · 2020-08-19 00:42

    博主 我用这个SiteRunningTime 插件 启用了但是首页不显示,请问需要怎么操作呢

    1. 弥生
      弥生 · 2020-08-20 20:33

      https://github.com/zhusaidong/SiteRunningTime

      1. Rorical
        Rorical · 2020-08-21 07:19

        这个插件是通过识别footer来插入的,而我们的主题没有footer元素,如果想要使用插件,请更改插件内的SiteRunningTime/js/SiteRunningTime.js 第6行的document.getElementById("footer")改为document.querySelector(".copyright")

        1. 弥生
          弥生 · 2020-08-21 07:53

          感谢 成了

    2. 三硝基豆腐
      三硝基豆腐 · 2020-08-20 20:30 作者

      请问插件的 github 地址有吗?

  3. 小白
    小白 · 2020-08-11 07:58

    友链的代码是复制在管理独立页面的编辑里直接添加,还是通过其他方法,我在编辑里无法正常使用诶。

    1. 三硝基豆腐
      三硝基豆腐 · 2020-08-11 11:39 作者

      就是直接通过编辑添加鸭,如果有问题可能是因为开了第三方插件,或者是没用三个感叹号包裹友链代码(如下所示)。

      !!!
      友链代码
      !!!

      1. 小白
        小白 · 2020-08-12 10:10

        感谢,问题已经解决。

  4. Zhou216
    Zhou216 · 2020-08-09 08:10

    主题用上了 感觉很不错
    希望以后能做一个依靠自定义字段来指定文章头图的功能

    1. 三硝基豆腐
      三硝基豆腐 · 2020-08-09 18:44 作者

      好嘞,下个版本就加上(咕咕咕警告)

  5. [...]下载主题 作者原文 [...]

  6. 沐白
    沐白 · 2020-08-05 20:00

    不输出全文怎么搞,试了分割线不行

    1. 三硝基豆腐
      三硝基豆腐 · 2020-08-05 23:08 作者

      没有改哦,还是用分割线(至少我自己用的就是分割线)

  7. shellme
    shellme · 2020-08-02 07:19

    大佬 为什么你的主题的首页每篇文章是单独一个方块出来的啊 还有显示也有点不一样 比较喜欢这种风格 希望大佬告知

    1. 三硝基豆腐
      三硝基豆腐 · 2020-08-02 07:43 作者

      我用的是未发布的新版本 4.0.0,新版本新增了许多有趣的功能,也对采用了与之前不同的卡片式布局。之前还担心这种布局会不会不符合大家的审美,听到有人喜欢我安心多啦!新版本很快会发布(今天或明天),敬请期待哦!

      1. 沐白
        沐白 · 2020-08-05 08:42

        🙈🙈🙈迫不及待

      2. shellme
        shellme · 2020-08-02 11:25

        赞赞赞 已star

  8. tencent
    tencent · 2020-07-19 04:39

    蛮好,支持

  9. aliquanquan
    aliquanquan · 2020-07-05 21:43

    谢谢大佬的主题,我想问,我使用了引用语法 >
    在预览中有效果显示,但是在实际网页中和正文没有区别,字体,大小都没有区别,也没有第一行的竖线,求解。感谢

    1. 三硝基豆腐
      三硝基豆腐 · 2020-07-13 07:46 作者

      您好,我刚刚测试了一下,引用的字体是和文章字体不同的。确实不是很明显,这是 argon design 的特性。如果您想让引用更显眼,您可以试试使用主题的高亮代码框功能

    2. aliquanquan
      aliquanquan · 2020-07-05 23:33

      另外在手机上面打开网站,背景会是灰色,没有背景,背景是有尺寸要求吗?求解

      1. 三硝基豆腐
        三硝基豆腐 · 2020-07-07 23:34 作者

        第一个引用语法应该是网站样式没写完善所以导致了这个问题,后面我会进行改进的。(最近真的真的真的真的真的很忙很抱歉 QAQ)
        背景是灰色是不会的,我从各种手机上打开网站都不会有这个问题。
        我猜测您的问题应该可以通过仔细阅读主题说明文档解决!

        1. aliquanquan
          aliquanquan · 2020-07-07 23:43

          谢谢解答,能丢个说明文档的链接给我吗

          1. 三硝基豆腐
            三硝基豆腐 · 2020-07-08 10:20 作者

            打开 github 就有呀
            https://github.com/trinitrotofu/Bubble

  10. Slicky
    Slicky · 2020-06-28 00:55

    博主好!请问一下用了您的主题以后却不能正常使用短代码(bbcode)和友链(bblink/bblist),不能正确的转换成图中所示的样子,这是怎么回事呢?(纯小白,不要打我

    1. Rorical
      Rorical · 2020-06-28 21:54

      如果使用markdown语法,请在html标签周围加上三个感叹号,类似于
      !!!

      !!!

      1. Slicky
        Slicky · 2020-06-29 03:29

        试着这么做了,发现还是不行

        1. Rorical
          Rorical · 2020-06-29 06:59

          请发一下网站?很可能bbcode已经到了浏览器但是js没渲染,由浏览器对不认识的标签怎么处理而决定

          1. Slicky
            Slicky · 2020-06-29 07:10

            里面有我留的两个测试文本,我试了很多回都没有办法调出来

            1. Rorical
              Rorical · 2020-06-29 07:12

              感叹号和内容之间是回车

              1. Slicky
                Slicky · 2020-06-29 07:16

                哦哦哦我明白了,因为我在邮箱里看到的排版是空格,麻烦太太了

      2. Slicky
        Slicky · 2020-06-28 22:09

        谢谢您!

发表评论