| 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: [email protected]
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:[email protected]
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 的模板文档，函数变量又变了…… (╯°Д°)╯︵ ┻━┻ 稍晚一些时侯再折腾。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent