× 1,112字 × 298阅

Bitcron 主题「墨」

又双叒叕填了一个坑,撒花!想把 FarBox 主题「墨」移植到 Bitcron 其实是在写第二个主题「庸」之前,那时候因为纠结于 pure grid 导致过程很心累,遂搁置。直到相继完成了「日记」「它布」之后,才又重新直面这个“特别的主题”。说特别是因为,这是我的第一个有意识设计的博客主题,那时候还是个学生呐,现在都工作了又辞职了,逝者如斯夫啊。但不得不承认,这个设计可能是我至今为止最棒的一个了,即使现在在技术上成长了不少。不过简洁的主题我也玩得差不多了,正好以这个主题为分水岭,之后搞点新花样吧。

Bitcron 主题「墨」
「墨」是一个古风的 Bitcron 主题

特点

  • 中国古风风格,菜单悬停的笔刷背景、文字悬停的晕染效果、网站头像调灰(悬停时恢复),与整体色调更契合
  • 小屏显示时菜单自动隐藏,轻触特制毛笔按钮打开闭合
  • 支持分类、标签、搜索和社交按钮
  • 支持后台设置自定义菜单,当前菜单放置背景更易懂
  • 评论框优化
  • 字体优化:网站标题(仅支持繁体)、菜单和正文分别做了调试

最初的设计就是以中国风为重点,所以加入了水墨晕染和毛笔刷痕等元素。整体色调为深灰黑,就是墨汁掺了点水的颜色。点睛色取的是朱砂红,也就是俗称的“中国红”,是比较正的大红色。这个设计后来被 FarBox 收入后台并重新改写,去掉了很多图片。我也受其启发,这次移植时除了保留了核心的鼠标悬停背景和小屏的菜单按钮图片,其他都尽量采用更灵活的方案替代。

说是移植,准确来说是重写。一来技术精进了不少,二来模板语言不同,移植还不如重写效率高。整体效果对照的是当初的设计图,因为 FarBox 版本现在看来有点“局促”,所以重写时特地注意了留白。另外一些以前没能实现的效果也加上了,同时在小屏上把菜单改成覆盖全屏的了,为的是更宽裕的空间,也支持了搜索。

背景图片是彼时自己用笔刷设计制作的,不是素材哟,是原创,所以这次也放进 GitHub 提供下载。背景配合主题做了多处适配,比如大小屏时分别与头像的位置关系等,可谓是武装到细节。

主题「墨」推荐背景图片
推荐使用的背景图片,同样可以在 GitHub 下载

在线预览

demo.shuiba.co

安装配置

  1. 下载:从 GitHub 下载相应文件,解压后将 template 文件夹放入根目录中;
  2. 网站标题:Dashboard → Site → Title
  3. 每页显示文章数:Dashboard → Common → Posts Per Page
  4. 社交按钮:Dashboard → Common → Social ID
  5. 评论嵌套:Dashboard → Render → Comments Type: tree
  6. 评论显示 Gravatar 头像:Dashboard → Render → Use Gravatar for Visitors: Yes
  7. 自定义菜单:Dashboard → Navigation(建议修改并使用中文,因为对字距做了调整)
  8. 各种网站图片:Dashboard → Images。网站头像对应 Site Avatar;评论者头像对应 Visitor Avatar;背景图片对应 Default Background。

付费购买

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

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

更新日志

  • 2017-07-31
    • 发布主题
  • 2017-08-17
    • 更新样式:二级标题、引用、分类、标签
  • 2017-10-10
    • 修正评论框样式
  • 2017-12-15
    • 修正菜单栏太长时的样式

更多主题

Bitcron 主题

简介 80后,旅日福州人,曾用名 ccyann/赛恩。追求简单自然的生活方式。 MUJI 脑残粉,钟爱北欧白。文艺重口味,逗比小清新。 文中常出现的豆哥/石页先生是我的灵魂伴侣。 博客始于2006年,经历过歪酷博客、MSN Space、Blogger、博客大巴、WordPress、 Farbox,现正在 Bitcron 内测中。 订阅地址:blog.shuiba.co/feed 版权 除特别声明外,本博所有内容均为原创,包括但不限于文字、图片、音频、视频,版权均归本人所有,不得擅自转载。允许链接分享以及合理范围内的引用和转述。所谓“合理范围内的引用和转述”指的是: 需注明作者名称 水八口 及原文链接; 原文引用需使用引用符号,转述不用; 不得更改引用原文或原文含义,产生误导; 引用和转述的内容篇幅需控制在新文章的30%以内。 全文转载、商业合作等其他事项请联系本人邮箱:hi (at) shuiba.co,谢谢! 支持 请我喝杯茶,或者吃一包糖炒栗子。 支付宝捐赠 (adsbygoogle = window.adsbygoogle || []).push({}); 谷歌广告 Dropbox 500MB OneDrive 500MB Name.com 5美元(≈34元) Booking.com 2000日元(≈123元) 通过以上......
点击加载Disqus评论