/FarBox-Template-GreyshadeM

FarBox主题模板GreyshadeM

Primary LanguageJavaScript

Title Date Tags
关于 FarBox 模板 GrayshadeM 的使用说明
2013-07-13 10:28
FarBox 主题 模板 说明文档

强烈建议看完本文再决定是否克隆，本文底部有克隆模板的专用链接。

#关于 FarBox 模板 GrayshadeM 的使用说明

搬迁到 FarBox 后，一直想自己做个模板，奈何一直没有时间。
近日看到 Rock 制作的从 Octopress 模板 Greyshade 移植过来的 FarBox 模板，甚是喜爱，但发现有不少地方不方便自定义，幸好 Rock 提供了模板代码(GitHub),于是 Clone 一份，于 2013年07月12日 晚上开始修改，听着 豆瓣FM 的 程序猿之音 ，学习 FarBox 主题的制作文档，大约折腾了三个多小时，在次日凌晨 2 点多时完成初版，将其命名为 GrayshadeM 。

##模板功能说明

  • 页面宽度自适应，兼容移动设备，如 iPad 、 iPhone
  • 自动识别 links.md 、 about.md 为 Links 与 About 页面
  • 文章与照片页面，自动识别 comment_js.md 的第三方社交评论或者用 FarBox 的评论系统

##网站自定义参数配置

如果需要修改本模板的自定义项，需要在网站目录（比如 FarBox/My Blog/ ）下放置一个名为 site.md 的文件，如下是一个范例：

title: IF404
subtitle: 折腾模板的地方
author: 枫叶向风
authorinfo: 枫叶向风：手艺人、爱喵可是老婆不让养、已婚胖子、业余作家、伪程序员、技术不算太宅、在光明的迷途中寻找出路
somethingtitle: 一些说明
something: 可自定义统计代码、Gravatar头像和一些社交链接。
gravatar: your@email.com
facebook: http://facebook.com
google: http://plus.google.com
twitter: http://twitter.com
github: http://github.com
linkedin: http://linkedin.com
pinterest: http://pinterest.com
delicious: http://delicious.com
pinboard: http://pinboard.com
instagram: http://instagram.com
weibo: http://weibo.com
qq: http://t.qq.com
qq2: http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes
qqqun: http://wp.qq.com/wpa/qunwpa?idkey=1234567890abcdefghijklmn
qqqunname: QQ群名字
weixin: 我叫微信
douban: http://douban.com
fanfou: http://fanfou.com
zhihu: http://zhihu.com
email: mailto:123@abc.com
rss: /feed
alipay: http://me.alipay.com/mapleobserver
highlight: true
analytics: <script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-xxxxxxx-x']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})();</script>
socialshare: <!-- JiaThis Button BEGIN --><div class="jiathis_style_24x24"><a class="jiathis_button_qzone"></a><a class="jiathis_button_tsina"></a><a class="jiathis_button_tqq"></a><a class="jiathis_button_weixin"></a><a class="jiathis_button_renren"></a><a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a><a class="jiathis_counter_style"></a></div><script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1374815515868166" charset="utf-8"></script><!-- JiaThis Button END -->

格式说明：

title

添加该属性，网站左侧将显示博客名称。

subtitle

添加该属性，网站左侧博客名称下方将显示网站副标题。

author

添加该属性，网站底部将显示版权信息，包含作者笔名。

authorinfo

添加该属性，网站左侧将显示作者自我介绍。

somethingtitle

添加该属性，网站左侧将显示补充描述文字的标题。

something

添加该属性，网站左侧将显示补充描述文字，建议不要太长。注意：只有该属性存在时， somethingtitle 才能显示。

gravatar

添加该属性，填入在 Gravatar 注册的邮箱，将显示作者的 Gravatar 头像。

社交链接

目前支持 Facebook、Google+、Twitter、GitHub、Linkedin、Pinterest、Delicious、Pinboard、Instagram、新浪微博、腾讯微博、QQ、QQ群、微信、豆瓣、饭否、知乎、EMail、RSS订阅 。对应属性请参考上面的范例。

默认显示为不同颜色圆形图案，如果要显示 Logo ，可在博客文件夹中新建 \images\social\ 文件夹，放入和属性相同名字的 png 文件，注意图片尺寸不要超过 30x30 。我已存放一份在 GitHub 中，显示效果可以参考我的主题折腾专用博客。

QQ社交链接 & QQ群社交链接

QQ社交链接属性为 qq2 ，通过 wp.qq.com 获取代码，例如：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
在属性中填入上述范例代码中的 http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes
该功能无法实现QQ在线离线状态的图片切换，点击社交图标即可弹出QQ对话窗口。
QQ群社交链接属性为 qqqun ，设置方法和QQ社交链接一样。
另有 qqqunname 属性，可添加QQ群的群名称，鼠标覆盖社交图标时会显示。 显示效果可以参考我的主题折腾专用博客。

微信社交链接

微信社交链接的属性为 weixin ，填入微信个人或者公众账号即可。
务必要在 images/social/ 文件夹中放入二维码文件，命名为 weixinqrcode.png ，二维码图片会被自动压缩或拉伸到 160 像素宽高的正方形图片。
鼠标覆盖微信图标时，会显示微信账号，同时顶部作者头像会变成微信二维码图片，移开鼠标则恢复显示头像。点击微信图标将在新窗口打开二维码图片，方便手机用户操作。
显示效果可以参考我的主题折腾专用博客。

支付宝付费功能

通过添加 alipay 属性，可以在文章底部显示支付宝付款内容，网友若觉得文章有用，可以通过支付宝收款主页向博客作者付款。
属性值为支付宝收款主页功能提供的链接，请通过支付宝获取，别直接填我的地址啊^_^

代码高亮

添加 highlight 属性，可以使文章中的代码高亮着色，属性值任意，比如 true 。有需要代码高亮的童鞋可以使用。 该功能利用 Pygments 功能实现，我采用的是 Pygments 的 monokai 样式，本模板控制代码高亮着色的 css 文件为 highlight.css 。
效果参考这里。
有兴趣自定义高亮样式的童鞋可以参考：
Farbox 代码高亮语法 Pygments 代码高亮样式 Pygments CSS文件

统计代码

添加 analytics 属性，将统计代码 压缩成一行 放入。

社交分享按钮

添加 socialshare 属性，将 JiaThis 等社交分享按钮的代码 压缩成一行 放入。

关于网站的 Favicon 图标

如果要添加自定义的 Favicon 图标，请直接将 favicon.png 文件放在根目录下。

##文章自定义属性

Link属性

格式： Link: http://www.google.com
文章头部加入 Link 属性后，在首页、存档等页面中，该文章标题前会出现“[链接]”标记，点击标题链接将访问自定义的链接，而不是访问该文章内容页，右下角的“阅读全文”也会变成“访问链接”。
该功能相当于轻博客中的“链接”。

Url属性

格式： Url: a-link
文章头部加入 Url 属性后，可自定义该文章访问链接地址，比如文章 a-url-link.md 的默认访问链接为 xxx.farbox.com/post/a-url-link ，添加该属性后变成 xxx.farbox.com/post/a-link 。

##其他功能 独立文件 isaid.md

有时候想说些话，但单独新建个文件的话日子久了文件会变很多，于是我做了个独立文件 isaid.md ，每次想吐槽什么或者发一句话内容，就更新到这个文件中。另外，也可以直接放入微博秀代码。下面是使用方法：

在根目录新建一个 isaid.md 文件。头部主要属性包括：title、status
title 属性将决定网站左侧导航栏的地方显示什么文字，比如我设置 title: 闲言碎语 ，左侧即可显示“闲言碎语”。
status 属性是为了避免这个文件的内容出现在正常文章列表中，只要随便设置不等于 public、secret、private的值即可，比如我设置 status: isaid 。当然，如果你觉得没关系，这个属性可以不设置。
可以直接放入微博秀的代码，比如我的主题折腾专用博客

##克隆模板 看到这里，如果您决定使用本模板，请点击：

克隆模板

##版本更新记录

  • 2013-07-13 创建主题。
  • 2013-07-14 发觉正文和标签之间太靠近了，有点怪，秉承“感觉怪就赶紧改改”的精神（病），于是在 post.html 中两者之间加了个 </br> 。
  • 2013-07-14 经@taresky 提醒，发现在列表页中，“下一页”没和“上一页”、“存档”水平对齐，修改 paginator.html 代码后修复成功。
  • 2013-07-14 添加 FontAwesome 字体，个别地方会显示类似图片其实是字符的图案，比如“上一页”“下一页”旁边的箭头。
  • 2013-07-15 发现相册整个样式排版有问题，都堆在左边了，修改了 file.html 和 file-list.html 两个文件，让相册也显示在中间了，不过样式还没调整，所以依然很难看，而且感觉探测文件和显示的逻辑上有点不对，另外找时间调整看看。目前的显示效果可以在这里查看：模板折腾处-相册
  • 2013-07-16 今天翻旧文时发现刚搬进 FarBox 时写的文章《正式把博客搬到 Farbox》中，提到要把以前以状态形式发布的内容放到一个文件中，在新主题里调用显示。加上话痨症又犯了，于是利用午休时间做了一个，期间多次犯二，在 FarBox 团队的帮助下搞清楚了。通过在根目录创建 isaid.md 并设定相关参数即可在左侧导航中出现相关链接。既可以隔三差五更新内容，也可以放入微博秀代码。
  • 2013-07-20 修复在*分类(category.html)和归档(archive.html)*页面中，跳转外链的文章链接没有指向外链的 bug 。
  • 2013-07-21 修复在*分类(category.html)和标签(tags.html)页面中，网页标题显示有误的 bug ，感谢 @taresky 童鞋的反馈。同时将标签(tags.html)和文章(post.html)*页面中的“Tags:”汉化为中文。
  • 2013-07-23 修复因 feed.html 文件引起的在 Feedly 等订阅工具中，文章访问链接显示不全和图片无法显示的问题。
  • 2013-07-26 修改 post.html 文件，方便用户通过在 site.md 中加入 socialshare 属性，添加 JiaThis 等社交分享按钮。
  • 2013-07-28 个别用户和基友反馈需要QQ在线状态、邮箱和微信社交链接，于是有了，顺手多了个QQ群，虽然我想应该没几个FarBox用户会用到这个。折腾一晚上，最后让微信二维码显示在顶部作者头像的地方。涉及文件：base.html、screen.css。显示效果可以参考我的主题折腾专用博客。
  • 2013-07-28 修改 post.html ，增加通过支付宝付费支持作者的功能。
  • 2013-08-01 修改存档页面(archive.html），使文章按照年份和月份倒序排列，之前是年份正序，月份倒序，略别扭。
  • 2013-08-01 在 base.html 增加 highlight.css 样式控制代码，通过 site.md 可控制文章中的代码是否高亮显示。顺便修改了一下 pre 样式（screen.css）的背景色(#282722)和字体颜色(#fff)。
  • 2013-08-03 增加 Fancybox 特效，点击文中图片链接和相册图片时会以灯箱模式浏览图片。文章中的图片需要带有图片链接才有效果。效果可参考：一次有点蛋疼的Kindle PaperWhite购买经历
  • 2013-09-04 修改模板底部声明，将“克隆模板”功能移到模板说明中，避免网站底部出现太多与使用者网站无关的内容。
  • 2014-02-22 修复存档页面文章排序问题，依次按照年份-日期倒序排列。修改涉及到 archive.thml 第 3 行的 get_posts 函数。
  • 2014-03-05 升级到新版 Farbox 后，由于通过修改根目录下的 comment_js.md 文件来添加第三方评论系统的方式停用了，导致升级后会变回默认评论系统。通过在 include 文件夹内的 comment.html 中添加 <!--scripts_for_doc--> ，已升级的用户请在 Farbox 后台的 模板引擎 - 插入脚本 ，将第三方评论系统代码粘贴到第二个输入框中。该解决方案目前会导致同时出现第三方评论框和默认评论框，待 Farbox 升级所有用户系统后，再重新调整。
  • 2014-03-22 修复分类页面无法正常显示的问题。修改涉及 category.html 文件。 PS：发现存档页面年份又变正序了，看了下 Farbox 的模板文档，函数变量又变了…… (╯°Д°)╯︵ ┻━┻ 稍晚一些时侯再折腾。