Bitcron主题「帧」

2,452字 782阅

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

名字来源

Bitcron主题「帧」
「帧」 • FRAME

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

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

设计手稿和细节

设计手稿
设计手稿

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

iPhone X效果图 iPhone X效果图
都不记得是第几次感谢Lstore Graphics了,由奢入俭难,其他家都看不上。

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

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

旧版效果图 旧版效果图
旧版效果图,瞧这天花乱坠的设计

主题简介

在线预览

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

付费购买

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

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

安装配置

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

Bitcron后台设置

自定义修改

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

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

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

其他建议

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

更新日志

更多主题

Bitcron主题


  1. “想到这里,我又想写新主题了,跳脱我「复杂——简单——复杂——简单」主题样式循环的,近乎全裸的,新主题。”(摘自「我想怎么博客」  

  2. 平时有随手记录设计灵感并拍照备份的习惯。  

点击加载Disqus