Bitcron主题「帧」

找我定制主题的列位，实在抱歉。以带娃没时间为由拒绝了你们，却给自己写了新主题。我可以解释！毕竟定制不同于自制，定制有deadline压力，而且需要更多的沟通成本。不像自制，睡前还能自我对话敲定细节，而且写不写得完也没有硬性规定，项目流产也无所谓。说实话，这个主题写得不顺利。5月29日完成设计初稿，6月11日才把网站彻底写出来。每天都只有晚上娃睡着之后的一两个小时可以码代码，又适逢家中网络故障，在如龟速一般的网速中艰难前行简直令我一个头两个大。我好佩服自己写出来了，也感谢豆哥在关键时刻的帮助。哎，网络真的好重要，跟金钱一样。平时不觉得，遇事急上头。

名字来源

本来我只打算写一个特别简单的自用主题¹，但我翻了翻谷歌相册中的设计手稿²，心想有现成的idea不用白不用，所以就有了「帧」。这个名字是写完主题才想出来的，甚至要晚于效果图，也因此效果图上并没有中文。我是早早就确定英文名叫Frame的，因为最初就想做个相框，把博客塞进去。也因为我的笔记本电脑长宽比是16:9，跟我设计时画的4:3不同，这才有了内容块的特别排列。一切都是环环相扣的，很神奇吧。

所有准备工作都做好了，就等发布主题了，也终于不得不起个中文名了。因为想不出来我差点就要放弃。前两天哄睡完坡坡瘫坐在沙发上用词典查了一下，才发现frame也是摄像中「帧」的意思，顿时觉得就它了。想像着周围一圈胶片镂空边框，里面一张一张的画面频闪，不正跟这个主题的呈现形式异曲同工么。好险自己没有用「相框」、「取景框」之类的做名字，真是“柳暗花明又一村”。

设计手稿和细节

确定用这个idea之后，我在纸上画出了各页面的具体设计、命名内容块、列表捋呈现逻辑。因为各页面排列关系不尽相同，所以html方面的调试就花了不少时间。好不容易都写完了，还有各种bug等着我，我就逐条记录逐条攻克。值得一提的是文章标题和文章数据的左边框，那个是不小心写出来的，觉得不错就留下了。结果发现如果标题过长要改行，排版就变得很奇怪。想了很久，用了挺贼的方式算是达成了我的预期。有兴趣可以更改浏览器宽度一试。这厢电脑端总算不违和了，那厢iOS平台又出来作乱。但好在能改好。现如今其实还留着一个bug，就是页面内锚点链接用不了，能力范围内我会再找找办法的，但因为能查的也都查得差不多了，所以并不抱太大希望了。问题出在平滑滚动的Js语法上，替换为css的scroll-behavior: smooth;之后就好了。

在Ls Graphics找到了White Clay的mockups，可惜没有大小屏同框的，就谷歌了关键词，找到了一个也不错的。只是我本来想要横屏的iPad，无奈源文件也很难调整，就这么着吧。另外两张效果图毫无悬念地用上了White Clay，真的太喜欢了。刚好有张里面有好多iPhone，就把一些细节图——评论框、搜索列表、归档页、分类文章列表——也放进去了。因为主题是固定高度，所以调整截图适应mockup也费了不少劲，还修改了iPhone的状态栏，就跟美颜一个性质，把效果图修得美观大方。

给效果图加主题名字的时候犯了难，搞了个复杂的版本最后还不如简单的大字报形式，好在推翻重来也很快。不过为了纪念我煞费苦心的旧版，还是放个图留个念吧。

主题简介

• 简洁、自适应设计（我主题标配）
• Logo和导航栏固定在页面下方，博客内容放在上方的“画框”中，左右分栏布局
• 文章标题、页面标题等固定位置，不受文章内容和页面内容滚动影响
• 「分类」和「标签」列表统合在「归档」页面中
• 各分类及各标签的文章页面中内嵌所有分类或所有标签列表，方便迅速切换不同分类或标签
• 「搜索」功能独立成页

在线预览

demo.shuiba.co
sbc.bitcron.com（这个网站用于测试最新主题。如果我还没有开始制作下一个主题，来这个网站体验会更直观些。）

付费购买

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

安装配置

若想要试用或已经购买了该主题，请访问我的GitHub选择该主题文件夹，下载template文件夹放入根目录中。

Bitcron后台设置

• 二级标题：Dashboard → Site → Sub Title
• 各分类和各标签页面下的每页文章数：Dashboard → Common → Posts Per Page
• 显示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账号时显示）

自定义修改

文章内页只在允许评论的情况下显示评论数和评论框，因此如果想关闭某篇文章的评论，可以在meta部分写上comment: no。

归档页面默认每页显示10篇文章，如果想要更改归档页的文章数，请在archive.jade中找到limit=10，把数字10改为每页想要显示的文章数即可。因为分类、标签和归档页面的设计是一致的，因此建议将在Bitcron后台设置的每页文章数和这里的limit=设为同样的数字，比如20。

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

• $font-size 文字大小
• $line-height 行间距
• $font-family 字体
• $font-weight 字重
• $word-color 文字颜色
• $second-color 第二种颜色：用于文本和链接之外的地方，比如引用、代码块、图片说明figcaption等
• $link-color 链接颜色
• $hover-color 鼠标悬停时的链接颜色
• $bg-color 网站背景颜色
• $second-bg-color 第二种背景颜色，用于引用、代码块、表格、TOC、脚注等处

其他建议

导航栏因为是固定高度，所以建议使用汉字两文字，最多不要超过三文字，否则会被截断。

更新日志

• 2020-05-29
  • 完成设计初稿
• 2020-06-11
  • 发布主题
• 2020-06-13
  • 修改导航栏文字排列为垂直居中
• 2020-06-14
  • 脚注链接加下划线
  • 修正页面内锚点链接无法使用的情况
  • figcaption样式从居中改为居左
• 2020-06-16
  • 添加videoaudio样式：宽度100%、无outline
• 2020-06-20
  • 添加audio背景颜色
• 2020-06-21
  • 调整figcaption下方间距
• 2020-06-22
  • 取消audio背景颜色、修正小屏幕显示宽度

更多主题

Bitcron主题