× 728字 × 43阅

FarBox 主题「墨」

2017.07.31更新:该设计已成功移植到 Bitcron:Bitcron 主题「墨」,欢迎下载使用。


人生第二个主题,FarBox 第一个主题终于诞生了!(人生第一个主题献给了 Blogger。

FarBox 主题 Ink(墨)
FarBox 主题「墨」

自从决定迁徙博客以来,设计新主题就成为我的首要任务。不巧碰上要写毕业论文,于是咬咬牙遏制住了折腾的欲望。于是打算先把博文转移过来再做讨论,但刚好实习的时候没事做,就拿博客设计练手,而那天灵感迸发,于是就迅速定下了“中国风”,找了些墨水笔刷和图片,设计完成得挺顺利。

第二次实习时按照设计在默认主题基础上修改了代码,由于默认主题是响应式布局,整个结构我也比较中意,所以设计初始就在此基础上进行,而编写时只是修改代码对我来说也轻松不少。由于默认主题的 css 样式是外链的,刚开始用 !important 快用疯了。后来因为在某个背景图片的问题上实在过不去坎儿,于是干脆把 css 全部复制到本地,这才搞定。另外这次写主题是第一次几乎把所有设计中的功能都实现了的,看到自己的进步还是很感动的。

设计细节

最初的设计图
最初的设计图
  • 整体风格

    中国风。墨层晕染背景,基调为淡墨灰。高亮取朱砂之鲜艳。所以取名为

  • 布局

    基于默认主题的响应式布局。修改了侧边栏和主区的宽度比例为35:65。首页为求简洁只显示标题。iPhone 和 iPad 浏览时侧边栏目录隐藏。

  • 移动版阅读体验

    参考微信朋友圈中网页的样式,调整字体大小和行距,使之更易阅读。

  • 多说评论框

    评论框100%宽度,在移动设备上留出更多空间。样式按照博客整体风格进行了修改。

  • 代码

    参照 Github 定义了 codepre 样式。

在线预览

安装主题

官方重写版已经收录进 FarBox 官方模板中,可以直接在后台模板中启用。

下载源码

我喜欢 FarBox 的简单易上手,却又想自定义一番,因为官方文档略显深奥,于是不停地在试行错误。如果你也一样,那么这篇文章也许能解决你的几个问题。以下问题解决方案来自官方帮助文档、官方开发者文档、官方客服(hi#farbox.com)以及头脑风暴。 保存草稿 由于在 your.farbox.com 文件夹中的所有 .md 文件都会显示在博客上,所以如果边写边保存,那么访客就会看到只写了一半的文章。解决方法很简单,在文章开头 title date 下面加一条 status: draft,这样保存文章以后并不会显示在博客上。等到文章完成,删除此行代码再保存便可。更多请参考官方文档。 绑定独立域名 你得有一个域名(域名取得方法请百度或谷歌,网上教程很多,这里就不赘述了) 在域名注册商后台修改 DNS 记录,将 CNAME 记录指向 park.farbox.com 在 FarBox 后台设置选项中,域名一栏填写独立域名;或者在根目录下找到 site.txt 或 site.md 文件,在 domain: 后填上域名。比如:domain: blog.cyanchen.com(注意冒号后面要有半角空格) 等待解析生效......
点击加载Disqus评论