× 2,386字 × 511阅

Bitcron主题「入灰」

这是我设计并编写的第八个主题了,对于现在的我来说,比起写主题,更希望能够写好主题。写了这么多收获还是挺大的,除了最直接的产品——主题之外,还对以前模棱两可的代码有了更深入的理解,那种恍然大悟的感觉真是屡试不爽(上一次是学画的时候老师教圆柱体的透视)。另外也萌生了制定一套自用基本样式表的想法,于是想到了leptureyue.css,跑去看了介绍,起因与我大致相同,不禁会心一笑。不过我没有他的技术背景,纯粹为了一己私好想要更聪明地写主题,所以下一个主题的时候会好好考虑这个问题。

Bitcron主题「入灰」
「入灰」是一个低奢的Bitcron主题

这个主题与最初设计的样子大有不同,因为是边写边改的,都记不清是第几版了。过程中虽说不上灵感枯竭,但是一时半会儿想不到好的设计还是会有压力。其实也是因为现实中有不得不做却想拖延的事,导致我很焦虑,但我的反射弧似乎是越焦虑越想折腾博客,所以也没办法,反正在间隔年,便由着本我去了。

因为这个主题被我定位为「整体简洁,细节奢华」,因而第一次感受到写CSS的艰辛。突然更深刻明白主题被扒的心情,毕竟不论设计还是调整样式都是整个网页制作过程中最难最烦的部分。说句听起来挺欠打的真话,没做过真的不知道其中的辛苦,毕竟修改和原创之间隔着一道马里亚纳海沟。不过也因为尝到了辛苦,才觉得不辛苦的大神真的很牛,或是即便辛苦还是愿意无私分享的大神真的很nice,散发着人性的光辉。

Bitcron主题「入灰」
比如大神LS Graphics分享的优质Mockup素材,已经是第二次使用了。(是不是越用越好了?)

特点和注意

跟上个「淡泊」一样,这次起名字也费了点儿劲,似乎更甚,因为中英文都没想到特别合适的。不过有了上次的经验这次倒是很坦然,最后根据整体色调和动画效果命名为「入灰」,英文是inGrey。我给石页先生看新主题,他说下拉菜单好像舌头,应该每次下拉再配个音效——啊——他可以来录原音,我瞪了他一眼,他嬉皮笑脸地跑开了。与此形成强烈对比的是4585_5360给起的另一个名字——「起伏不定的生活带来的朦胧的无力感」,不仅抓住了主题特点,还切合了气质,跟「淡泊」的小名「疯狂的删除线」有得一拼。

这次花了很多精力在设计上,大概于「墨」有过之而无不及,所以来好好介绍一下吧。

  • 简洁的设计,丰富的细节
  • 自定义菜单
  • 大屏下菜单悬停下拉,下拉时背景变模糊
  • 小屏下菜单位于顶部
  • 支持分类、标签、归档、社交账号、搜索
  • 首页文章列表随页面滚动而自动加载
  • 悬停文章标题时可预览部分文章内容,大屏中会放大
  • 标记了最新文章
  • 文章内页显示日期、分类、标签、字数、浏览数、评论数
  • 大屏下(>800px)图片悬停放大1.2倍,饱览更多细节
  • 优化TOC和脚注样式
  • 评论框样式超美,优化了嵌套回复时的评论框及评论显示样式,统一了字体及配色,升级了小屏下的使用体验
  • 采用Site avatar为Apple touch icon,在苹果手机Safari浏览器中添加到主屏幕时显示图标
  • 归档页面显示所有文章、所有分类及所有标签
Bitcron主题「入灰」
菜单下拉时其余部分会变模糊,使得菜单内容更清晰易读

除了以上列举的我认为比较吸引人的特点之外,还有几点想要交代。

  • 自定义菜单尽量不要设定太多项目,否则小屏下占据太大空间
  • 当自定义菜单中的项目数改变了,或者删除了社交账号,菜单悬停的位置会发生改变,此时需要修改主题文件夹中的style.scss
  • 包括上面所说的菜单悬停位置,我在style.css还预留了几个自定义项目,分别是:
    • $color: #d6bc80; point colour(实在想不到合适的中文,甚至这个英文对不对我都不知道)。默认是金色,搭配黑白灰都好看,可以根据喜好修改。
    • $top: -368px; 菜单位置。建议使用Chrome的inspect功能,根据菜单高度调节后填入CSS中。
    • $width: 600px; 页面宽度。可以根据喜好改为任意数值,但建议小于767px,这是这个主题的响应式触发宽度,如果大于767px,不能保证最佳浏览体验。
    • $font-size: 1.0625em; 网站字体大小。如果想要更小的字体,可以使用1em。不建议使用px,会影响precode的默认设定。
  • 文章页面没有「上一篇」「下一篇」导航(如果反馈的多再考虑添加)
  • 为了展示归档文章分页效果,所以现在设置每页显示5篇文章。如需修改请打开archive.jade,找到entries = d.get_data(types='post', limit=5, sort='desc').group('-date:year'),修改limit后面的数字为想要每页显示的文章数即可。

在线预览

demo.shuiba.co

安装配置

  1. 下载:从GitHub下载对应的template文件夹,放入根目录
  2. 二级标题:Dashboard → Site → Sub Title
  3. 显示TOC:Dashboard → Common → Show TOC: Yes
  4. 社交账号:Dashboard → Common → Social ID
  5. 自定义菜单:Dashboard → Navigation
  6. 评论嵌套:Dashboard → Render → Comments Type: tree
  7. 评论显示Gravatar头像:Dashboard → Render → Use Gravatar for Visitors: Yes
  8. 网站头像:Dashboard → Images → Avatar
  9. Apple touch icon:Dashboard → Images → Site Avatar
  10. 评论中的博主头像:Dashboard → Images → Admin Avatar
  11. 评论中的访客头像:Dashboard → Images → Visitor Avatar (后台未开启评论显示Gravatar、访客邮箱不对应Gravatar或Bitcron账号时显示)

除此之外还有上面提到的style.scss中的自定义项目,就不赘述了。

付费购买

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

支付宝二维码
支付宝二维码
购入日期 购入者 网站地址
2017.11.17 博客秀 blog.show

更新日志

  • 2017-11-13
    • 发布主题
  • 2017-11-14
    • 修改footer为不同页面显示不同内容

更多主题

Bitcron主题

彩蛋

二次墙裂感谢一下LS Graphics,第二次使用更上手了,还不小心做出了超级美的背景图。于是花了一整个下午在玩背景,主题效果图倒是被抛到了一边。话说日语里有个词叫「気分転換」,就是转换心情的意思,所以也许多亏了这个心情的转换,让我又充满了更博的活力。

Bitcron主题「入灰」
另一个背景图下的「入灰」iMac效果图

寻思着低调奢华该有的样子——深暗、光泽、线条、大气的色调,因为不小心用Gradient玩出了「旋转跳跃我闭着眼」,于是灵机一动为其着单一颜色,变换出九种深彩色,甚是欣喜。你们肯定想不到,我把PSD文件也传到GitHub上了,欢迎调戏。我下午就调戏出了两个组合图:

低奢背景图片 低奢背景图片
好像葫芦兄弟!and杂乱着好丑,心情大好!

九张单色原图也都在GitHub上,全是1920×1080的,可以用来做壁纸。我现在就是用「入灰」iPhone效果图做壁纸。深色很适合做壁纸,因为桌面上的文件都清晰可见,晚上玩电脑也不会太刺眼(来自夜猫子的生活温馨小贴士)。

9月11日,我第一次踏进日本的牙医诊所。记得等候的时候不停地深呼吸稳定情绪,接受治疗过程中面部肌肉不受控制地抖动。好在牙医很温柔,帮我检查了口腔、拍了X光并说明了今后的治疗方案。由于所在牙科诊所很忙碌的关系,前后时间加起来不过30分钟,我便走出了诊所,且第二次预约排在了九天之后的9月20日。这时候我是庆幸的,毕竟对牙科的恐惧心太大了,能快点“逃”出来真是松了口气。 为了克服恐惧,我在这九天内疯狂地查询中日英文的牙齿相关网站,恶补知识。然后开始怀疑这家诊所治疗太慢,牙医的毕业大学不够好等等,于是跑去另一家寻求second opinion。本来在网上查资料时候这两家就是差不多的感觉,实际体验后也对比不出个高低,最后在朋友和先生的劝诫下,我放下了执念,安心在原来的牙科诊所继续治疗。 9月11日 口腔全面检查、拍X光、补上填充物丢失的臼齿×1 9月20日 治疗龋坏臼齿×1 10月3......
点击加载Disqus评论