Bitcron主题「入灰」
这是我设计并编写的第八个主题了,对于现在的我来说,比起写主题,更希望能够写好主题。写了这么多收获还是挺大的,除了最直接的产品——主题之外,还对以前模棱两可的代码有了更深入的理解,那种恍然大悟的感觉真是屡试不爽(上一次是学画的时候老师教圆柱体的透视)。另外也萌生了制定一套自用基本样式表的想法,于是想到了lepture的yue.css,跑去看了介绍,起因与我大致相同,不禁会心一笑。不过我没有他的技术背景,纯粹为了一己私好想要更聪明地写主题,所以下一个主题的时候会好好考虑这个问题。
这个主题与最初设计的样子大有不同,因为是边写边改的,都记不清是第几版了。过程中虽说不上灵感枯竭,但是一时半会儿想不到好的设计还是会有压力。其实也是因为现实中有不得不做却想拖延的事,导致我很焦虑,但我的反射弧似乎是越焦虑越想折腾博客,所以也没办法,反正在间隔年,便由着本我去了。
因为这个主题被我定位为「整体简洁,细节奢华」,因而第一次感受到写CSS的艰辛。突然更深刻明白主题被扒的心情,毕竟不论设计还是调整样式都是整个网页制作过程中最难最烦的部分。说句听起来挺欠打的真话,没做过真的不知道其中的辛苦,毕竟修改和原创之间隔着一道马里亚纳海沟。不过也因为尝到了辛苦,才觉得不辛苦的大神真的很牛,或是即便辛苦还是愿意无私分享的大神真的很nice,散发着人性的光辉。
特点和注意
跟上个「淡泊」一样,这次起名字也费了点儿劲,似乎更甚,因为中英文都没想到特别合适的。不过有了上次的经验这次倒是很坦然,最后根据整体色调和动画效果命名为「入灰」,英文是inGrey。我给石页先生看新主题,他说下拉菜单好像舌头,应该每次下拉再配个音效——啊——他可以来录原音,我瞪了他一眼,他嬉皮笑脸地跑开了。与此形成强烈对比的是4585_5360给起的另一个名字——「起伏不定的生活带来的朦胧的无力感」,不仅抓住了主题特点,还切合了气质,跟「淡泊」的小名「疯狂的删除线」有得一拼。
这次花了很多精力在设计上,大概于「墨」有过之而无不及,所以来好好介绍一下吧。
- 简洁的设计,丰富的细节
- 自定义菜单
- 大屏下菜单悬停下拉,下拉时背景变模糊
- 小屏下菜单位于顶部
- 支持分类、标签、归档、社交账号、搜索
- 首页文章列表随页面滚动而自动加载
- 悬停文章标题时可预览部分文章内容,大屏中会放大
- 标记了最新文章
- 文章内页显示日期、分类、标签、字数、浏览数、评论数
- 大屏下(>800px)图片悬停放大1.2倍,饱览更多细节
- 优化TOC和脚注样式
- 评论框样式超美,优化了嵌套回复时的评论框及评论显示样式,统一了字体及配色,升级了小屏下的使用体验
- 采用Site avatar为Apple touch icon,在苹果手机Safari浏览器中添加到主屏幕时显示图标
- 归档页面显示所有文章、所有分类及所有标签
除了以上列举的我认为比较吸引人的特点之外,还有几点想要交代。
- 自定义菜单尽量不要设定太多项目,否则小屏下占据太大空间
- 当自定义菜单中的项目数改变了,或者删除了社交账号,菜单悬停的位置会发生改变,此时需要修改主题文件夹中的
style.scss
-
包括上面所说的菜单悬停位置,我在
style.css
还预留了几个自定义项目,分别是:$color: #d6bc80;
point colour(实在想不到合适的中文,甚至这个英文对不对我都不知道)。默认是金色,搭配黑白灰都好看,可以根据喜好修改。$top: -368px;
菜单位置。建议使用Chrome的inspect功能,根据菜单高度调节后填入CSS中。$width: 600px;
页面宽度。可以根据喜好改为任意数值,但建议小于767px
,这是这个主题的响应式触发宽度,如果大于767px
,不能保证最佳浏览体验。$font-size: 1.0625em;
网站字体大小。如果想要更小的字体,可以使用1em
。不建议使用px
,会影响pre
和code
的默认设定。
- 文章页面没有「上一篇」「下一篇」导航(如果反馈的多再考虑添加)
- 为了展示归档文章分页效果,所以现在设置每页显示5篇文章。如需修改请打开
archive.jade
,找到entries = d.get_data(types='post', limit=5, sort='desc').group('-date:year')
,修改limit
后面的数字为想要每页显示的文章数即可。
在线预览
安装配置
- 下载:从GitHub下载对应的template文件夹,放入根目录
- 二级标题:Dashboard → Site → Sub Title
- 显示TOC:Dashboard → Common → Show TOC: Yes
- 社交账号:Dashboard → Common → Social ID
- 自定义菜单:Dashboard → Navigation
- 评论嵌套:Dashboard → Render → Comments Type: tree
- 评论显示Gravatar头像:Dashboard → Render → Use Gravatar for Visitors: Yes
- 网站头像:Dashboard → Images → Avatar
- Apple touch icon:Dashboard → Images → Site Avatar
- 评论中的博主头像:Dashboard → Images → Admin Avatar
- 评论中的访客头像:Dashboard → Images → Visitor Avatar (后台未开启评论显示Gravatar、访客邮箱不对应Gravatar或Bitcron账号时显示)
除此之外还有上面提到的style.scss
中的自定义项目,就不赘述了。
付费购买
主题「入灰」的定价为¥70。购买前请先确认版权声明,如果购买则默认同意此声明。
更新日志
- 2017-11-13
- 发布主题
- 2017-11-14
- 修改footer为不同页面显示不同内容
更多主题
彩蛋
二次墙裂感谢一下LS Graphics,第二次使用更上手了,还不小心做出了超级美的背景图。于是花了一整个下午在玩背景,主题效果图倒是被抛到了一边。话说日语里有个词叫「気分転換」,就是转换心情的意思,所以也许多亏了这个心情的转换,让我又充满了更博的活力。
寻思着低调奢华该有的样子——深暗、光泽、线条、大气的色调,因为不小心用Gradient玩出了「旋转跳跃我闭着眼」,于是灵机一动为其着单一颜色,变换出九种深彩色,甚是欣喜。你们肯定想不到,我把PSD文件也传到GitHub上了,欢迎调戏。我下午就调戏出了两个组合图:
九张单色原图也都在GitHub上,全是1920×1080的,可以用来做壁纸。我现在就是用「入灰」iPhone效果图做壁纸。深色很适合做壁纸,因为桌面上的文件都清晰可见,晚上玩电脑也不会太刺眼(来自夜猫子的生活温馨小贴士)。