× 1,254字 × 366阅

Bitcron主题「淡泊」

前阵子又想换主题了,便上网看设计找灵感,最终敲定了大字体的文章列表,配上动态的滑动效果,这也成为了这个主题的最大特色。设计内页的时候采用最简单的单栏排版,大屏下固定了TOC让浏览变得更顺手,同时进一步优化了上一个主题「黑白」中非常喜欢的各种内容设计,统一了风格,可以说在设计上是一个完整度很高的主题了。

Bitcron主题「淡泊」
「淡泊」是一个清淡的Bitcron主题

得益于LS Graphics提供的免费素材,效果图的B格拔高了不少,却反而显得主题丑了许多,再次意识到我的能力还远远赶不上我的审美,扎心。但转念一想,审美也不是那么容易培养的,也是靠日积月累形成的,便又舒心了许多。

Bitcron主题「淡泊」
再次感谢LS Graphics优质的PSD素材,预计会一直用到腻

起初想不到好名字,觉得主题色调很淡,文件数也少,用英文单词light似乎挺概括的。后因想不到对应的中文名而决定只用英文名称。之后机缘巧合下想到「淡泊」这个词,很喜欢词义且跟light也算有所呼应,这才有了中文名。另外感谢catbaron的脑洞——疯狂的删除线,非常喜欢,所以采纳为官方小名!

特点和注意

  • 白底黑字的简约设计
  • 鼠标悬停大字标题时顺滑的删除线
  • 文章内页的最大宽度为600px,适合阅读
  • 大屏下(>800px)图片会被放大至约800px宽度,饱览更多细节
  • 自定义菜单
  • 顶部固定菜单栏(包含搜索框、自定义菜单、网站头像)
  • 嵌套评论优化(超美!欢迎使用手机测试)
  • TOC响应式优化
  • 支持「分类」和「标签」
  • 文章内页的「继续阅读」可按照「分类」或「标签」推荐文章
  • 文章设置关闭评论时的样式优化(参考文章
  • 文章设置为页面时不载入「继续阅读」文章列表(参考文章
  • 「归档」页面包含所有分类、所有标签及所有文章年份(参考文章
  • 若使用Disqus请参考「Click to load Disqus」
「淡泊」评论框样式
左边大屏幕&右边小屏幕下的评论框样式

在线预览

demo.shuiba.co

安装配置

  1. 下载:从GitHub下载对应的template文件夹,放入根目录
  2. 二级标题:Dashboard → Site → Sub Title
  3. 显示TOC:Dashboard → Common → Show TOC: Yes
  4. 自定义菜单:Dashboard → Navigation
  5. 评论嵌套:Dashboard → Render → Comments Type: tree
  6. 评论显示Gravatar头像:Dashboard → Render → Use Gravatar for Visitors: Yes
  7. 网站头像:Dashboard → Images → Avatar
  8. 「继续阅读」参考源:默认按照「分类」进行推荐,若想改为「标签」,可在post.jade里修改(参考文章
  9. 图片缩放比例:在style.scss里搜索scale,修改括号里的数字,比如放大3倍是transform: scale(3);

付费购买

主题「淡泊」的定价为¥60。购买前请先确认版权声明,如果购买则默认同意此声明。

支付宝二维码
支付宝二维码

更新日志

  • 2017-10-24
    • 发布主题
  • 2017-10-25
    • 大屏下<figure>标签内的图片悬停放大1.33倍(≈800px)
  • 2017-10-28
    • 解决TOC过长溢出问题
  • 2017-10-29
    • 大屏下图片悬停放大应用于所有文章内图片
  • 2017-10-31
    • 修改滚动条样式
    • 微调「返回顶部」按钮样式
  • 2017-11-01
    • 进一步优化嵌套评论样式,并更好地适配小屏幕
  • 2017-11-15
    • 添加归档页面,集合了所有分类、所有标签以及所有文章年份
  • 2017-11-16
    • 优化代码,使得获取文章年份不用遍历所有文章
  • 2017-11-24
    • 修正评论框样式
  • 2017-12-14
    • 修正无分类无标签文章的排版
    • 修正文章中的一级标题样式
  • 2017-12-18
    • 修正评论样式Bug

更多主题

Bitcron主题

特别鸣谢

相信大部分资深博主都对「相关文章」(related posts)非常熟悉了吧。它是系统根据当前文章的内容、所属分类和标签等自动匹配出的文章列表,能够提高读者粘性,优化阅读体验。于是乎我想着在Bitcron里也引入这个功能,基本逻辑如上所述,取得当前文章的分类或标签,然后选取文章,再排除掉当前文章,如此构成一个相关阅读推荐列表。 使用分类 // 取得当前分类列表,选取5篇,排除当前文章 cat_posts = d.get_data(types='post', limit=5, path=post.category.path, excludes=[post.path]) // 判断如果有文章列表则载入标题等 if cat_posts h3 继续阅读 ul: for post in cat_posts: li a(href=post.url)= post.title limit=5:选取5篇,当然可以设置成任意数字; path=post.category.path:当前分类路径 excludes=[post.path]:排除当前文章 默认排序是倒叙,如果想要手动修改,可以在d.get_data()里加上sort='',能够使用的值有:-date倒叙(默认)、date正序、position自定义排序正序、-m_date文章最后修改时间倒叙。现在我的博客上使用的是-m_date: d.get_data(types='post', limit=5, path=post.category.path, excludes=[post.path], sort='-m_date') 使用标签 // 取得......
点击加载Disqus评论