Bitcron主题「卡片」

2018. 03.03 15:15 / 2,263字 / 8,791阅 / 0评

特别之处
在线预览
付费购买
安装配置
更新日志
更多主题

以我饱览群博的经历来说，这几年图片型博客主题明显占据了半壁江山。其实我也喜欢这样的主题，因为搭配好看的图片后，博客整体气质就咻地提升了。像之前写的主题「入灰」被购买者修改成文章内页带有顶部图片的排版，我回访时也觉得很不错，大概从那时候开始有了想要自己写一个这样的主题的念头。终于在重新设计主站之际，我顺势打算换个新的博客主题，最初也没想这么快实现那个念头，只是设计稿画着画着就变了风格，又想起大神Chopstack和HUHUHANG的网站于是前往“朝圣”，才在边设计边编写的过程中慢慢定格为现在的样子。

特别之处

主题「卡片」的最大特点就是充满了图片。如果你是一个喜欢用图片记录生活的人，那么也许这个主题会很适合你。除了每篇文章的图片，每个分类如果设置了图片也会被展示出来。当然如果没有图片也没关系，文章列表里的小卡片们会显示截取的文章开头部分，而分类卡片则会显示该分类的描述文字。即使在有图片的情况下，鼠标悬停卡片时也会显示预览文字，是不是很贴心？

主题包含了首页、文章内页、归档页和分类页（里面有所有分类和标签），而点击开启的隐藏式菜单栏中则分布着网站logo、网站名称、简介文字、社交账号、搜索框和自定义导航，所以功能非常齐全，充分体现了作为一个博客主题的自觉。这里想着重点名归档页的简洁设计，为浏览所有文章提供了非常友好的入口。

总而言之，主题「卡片」拥有以下这些闪光点：

卡片式的文章列表，显示图片、预览文字或两者都有
功能全面，归档、分类、标签、搜索、自定义导航、社交账号、评论等应有尽有
重视细节和交互设计

总结越来越简短了，因为所有的努力都是为了实现「好看」和「好用」。语言上解释不清的只能寄托于在线预览了，毕竟眼缘也很重要呀。

在线预览

demo.shuiba.co

除了以上收纳我所有主题的Demo站以外，我还开设了一个专门的网站用来放置和调试最新的主题。因为Demo站要考虑到各个主题的兼容，所以往往不能呈现最佳效果。如果想体验更接近平常使用时的状态，可以查看以下网站。当然这个网站会随着新主题的更新而不断变换内容，反过来说，想看看我最近又在折腾什么新主题，来这个网站就知道了。

sbc.bitcron.com

付费购买

因为这是我的第十个原创主题，所以为了庆祝第十个主题的诞生以及感谢大家的支持，这次特别推出「买一送一」活动，购买主题「卡片」即可自由选择其他九个主题中的任意一个，机不可失时不再来哟。记得在付费时告诉我「卡片」和另一个主题的名字，方便的话也请告知网址。

安装配置

若想要试用或已经购买了该主题，请访问我的GitHub选择该主题文件夹，下载template文件夹放入根目录中。接着按照以下提示在Bitcron后台进行设置。

二级标题：Dashboard → Site → Sub Title
每页文章数：Dashboard → Common → Posts Per Page（设置为3n+1以达到最佳浏览效果，比如7/10/13等。）
显示TOC：Dashboard → Common → Show TOC: Yes
社交账号：Dashboard → Common →Social ID
评论嵌套：Dashboard → Render → Comments Type: tree
评论显示Gravatar头像：Dashboard → Render → Use Gravatar for Visitors: Yes
自定义导航：Dashboard → Navigation
博主名称：Dashboard → Advanced → Admin Name（显示在页脚版权处。如果此处留空，则采用网站名称。）
网站头像/Apple touch icon：Dashboard → Images → Site Avatar
评论中的博主头像：Dashboard → Images → Admin Avatar
评论中的访客头像：Dashboard → Images → Visitor Avatar （后台未开启评论显示Gravatar、访客邮箱不对应Gravatar或Bitcron账号时显示）
头部背景图：Dashboard → Images → Default Background

更改菜单栏中的简介请打开index+category+tag.jade文件，在#intro下的竖线|后面空一格，然后写上对应内容。

#intro
    | 请在这里填写个人简介，比如名称、爱好、出生地等，将会显示在折叠的菜单栏中。还可以写上联系方式，方便访客随时查看。更多详细情况可以写在 about.md 中，然后访问 /about 便可查看。

更改归档页每页显示的文章数，请在archive.jade中找到limit=20，把数字20改为每页想要显示的文章数即可。

如果对更高阶的自定义有兴趣，可以尝试修改template文件夹中的style.scss以符合自己的习惯和审美。以下是利用SCSS特性设置的参数说明：

$font-size 文字大小
$line-height 行间距
$max-width 主体内容的最大宽度
$word-color 文字颜色
$second-color 第二种颜色：用于文本和链接之外的地方
$link-color 链接颜色
$hover-color 鼠标悬停时的链接颜色
$bg-color 背景颜色，用于网站背景、pre、表格等
$border-color 边框颜色，用于TOC、脚注、pre、code、blockquote、表格等
$card-br 卡片右下角的弧度

接下来说一下如何设置文章和分类的封面图片，以及分类描述文字。假如想要为文章指定封面，可以在meta里写上cover: 图片地址。如果不指定，则默认选取文章中的第一张图片作为封面和头部背景图。为分类设置封面有两种方法。一是直接在分类文件夹里放入一张图片；二跟文章封面类似，在分类文件夹中新建名为index.md的文件，在里面写上cover: 图片地址。至于分类描述文字就得依靠index.md了，直接在里面写上描述文字即可。以下是封面跟描述文字共存时index.md的格式：

cover: 图片地址

这里是分类描述。

其他关于分类的技巧可以参考「Bitcron中关于分类的技巧」。

另外，文章的meta部分有两种设定：

status: page 表示此文章为页面，上一篇下一篇导航和分类链接会被隐藏
comment: no 表示关闭评论

更新日志

2018-02-10
- 设计初稿
2018-02-11
- 推翻初稿重新设计
- 完成HTML和侧边栏样式
2018-02-12
- 推敲逻辑判断和样式细节，完成度80%
2018-02-13
- 屏幕自适应调整
- 完善细节，自用内测
2018-02-14
- 重新设计归档页和文章页
- 添加分类页
2018-02-15
- 改善小屏幕下标题过长的解决办法：从隐藏改为滑动显示
2018-02-20
- 统一首页/分类文章列表/标签文章列表/搜索结果列表样式
2018-03-03
- 正式发布
2018-03-09
- 修正更改最大宽度时小标题不对齐问题
- 调整左上角logo位置使之与右上角菜单按钮更科学地对齐
2019-04-15
- 修正浏览器tab不显示标签名问题