关于 FarBox 模板 GrayshadeM 的使用说明

2013-07-13 10:28

搬迁到 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
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 属性,可以在文章底部显示支付宝付款内容,网友若觉得文章有用,可以通过支付宝收款主页向博客作者付款。

属性值为支付宝收款主页功能提供的链接,请通过支付宝获取,别直接填我的地址啊^_^

统计代码

添加 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 文件。头部主要属性包括:titlestatus

title 属性将决定网站左侧导航栏的地方显示什么文字,比如我设置 title: 闲言碎语 ,左侧即可显示“闲言碎语”。

status 属性是为了避免这个文件的内容出现在正常文章列表中,只要随便设置不等于 publicsecretprivate的值即可,比如我设置 status: isaid 。当然,如果你觉得没关系,这个属性可以不设置。

可以直接放入微博秀的代码,比如我的主题折腾专用博客

版本更新记录

  • 2013-07-13 创建主题。
  • 2013-07-14 发觉正文和标签之间太靠近了,有点怪,秉承“感觉怪就赶紧改改”的精神(病),于是在 post.thml 中两者之间加了个 </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.htmlscreen.css。显示效果可以参考我的主题折腾专用博客
  • 2013-07-28 修改 post.html ,增加通过支付宝付费支持作者的功能。

如果您觉得本文对您有帮助,可以考虑用支付宝付费 支持一下作者


  • Eddy Crombie 2018-10-28 10:27:19

    Facebook大数据系统 - 外贸精准数据必备 - 年费会员送Facebook全功能自动营销软件
    官方网站: http://www.facebookbigdata.com/
    外贸全功能自动化营销软件 - https://www.snsep.com/
    查询:
    QQ: 3204290153

    微信: MaggieLiHK

    FaceBook Group 数据采集
    精准FaceBook Group用户数据采集,无需翻墙,无需Facebook账号,输入搜索关键字加入采集队列即可自动采集,还可以根据Group ID精准采集,整个流程操作简单,用户数据包括用户姓名,邮箱,电话,生日,国家等十几个栏位,采集完数据后可壹键导出cvs文档,简单快捷!

    FaceBook Page 数据采集
    根据输入搜索关键字搜索出相应的Facebook Page,自动采集Page下所有帖子评论的用户,还可以根据Page ID精准采集,整个流程无需翻墙,无需Facebook账号,采集的数据包括用户姓名,邮箱,电话,生日,国家等十几个栏位,采集完数据后可壹键导出cvs文档,简单快捷!

    用户数据
    采集到的用户资料包括FBID,FBUserID,Username,First Name,Last Name,Email,Phone,Gender,Website,Birthday,Location,Link,Likes,Relationship Status,Updated Time,Can Post,Mission,Talking About Count,Published,About,Description

    Facebook全功能自动营销软件包含「发布」与「采集」两大模组,功能含跨数十种在Facebook里所需要的营销功能,几乎能满足所有产品/服务推广需求。
    发布模组包含批量加好友(支持UID批配)、加小组、接受/取消好友请求、推文、变量信息发布、养号、Tag标记好友、批量私讯、自动回复贴文/私讯排程、批量粉丝页按赞/邀请好友按赞、推(顶)小组贴文、自动分享/按赞贴文、粉丝主页管理等全功能营销任务。
    采集模组核心采用Facebook进阶Graph Search语法,能够有效精准采集专页、小组、小组成员、贴文互动(贴文赞、分享、评论)用户、粉丝主页详细数据(邮箱/电话等)、用户详细数据(邮箱/电话等)、直播间观众、Graph Search批配用户等专页采集功能。
    系统支持多帐号同时批量排程任务且无帐号管理上限。可挂Proxy代理IP实现一帐号一IP,同时支持多种帐号登录模式,包含 Android / iOS手机APP模式、Cookie模式、PC浏览器模式、FB开发者APP模式、Token等登录模式,完整的帐号管理功能。

    [发布功能列表]
    快速批量获取你加入的小组清单,朋友清单,粉丝主页清单…
    关键字搜索小组、检查状态、批量加入/退出小组、小组类型、成员计数、条件筛选、开启/关闭小组通知、小组发文是否需审核…
    通過批量邀请拉好友进小组
    将文字/鏈結,单/多张圖片,或营销信息批量发布到小組,甚至将相簿发布到小组。
    发布图片或圖片+视频到小组,好友动态墙,粉丝主页,个人动态墙。
    在Facebook上直播,可自定义导入视频资源(视频档,Facebook视频链接,YouTube链接,屏幕录制)。
    直播自动排程(可指定本地端视频)
    分享贴文到小组、粉丝主面,好友动态墙,个人主页
    自动回复个人主页、粉丝主页贴文評論/私讯(支持通过特定关键字指定回复内容)
    自动接受好友邀请、邀请加入小组、粉丝主页按赞邀请
    批量自动对指定用户贴文、小组贴文、粉丝主页贴文按赞
    自动戳(Poke)好友,自动对好友生日快乐,自然增加帐户互动率。
    个别或批量添加帐户,支持多种登陆方式:使用浏览器登录,模拟手机(Android或IOS应用程序)登录,Cookies登陆、Token登陆。
    贴文指定或随机标记(Tag)朋友。
    将信息,单张或多张图片发布到个人动态或朋友动态。
    向好友批量发送私讯。
    支持随机发送信息,链接,图片,视频,预防Facebook检测为垃圾邮件。
    买卖小组添加销售贴文
    分享贴文/相册到小组、粉丝主页、好友时间线……
    关键字搜索用户名,自动向用户发送好友邀请。批量取消已送出的好友邀请。撷取好友邀请,可批量接受或拒绝。
    关键字查找粉丝主页,并获取粉丝主页资讯(如粉丝数,网站,邮箱,电话)。批量邀请朋友按赞粉丝主页。
    将信息、图片发布到粉丝主页。
    自动顶小组贴文(将你在小组的贴文顶到小组动态顶部)。
    搜索活动(Event)。参加活动、批量邀请好友参加活动。
    发布信息,单张照片到活動(Event)。
    自动排程贴文发布到任何地方(小组,粉丝主页,好友动态,私讯,评论)。
    自动批量加入小组。
    支持设置任务排程时间间隔,降低Facebook侦测机率。
    支持批量Facebook帐号(无上限)。每个帐户支持proxy代理。每个帐号可独立管理运作。

    [采集功能列表]
    人物(可依性别、地区、粉丝页成员、小组成员等条件查询)
    贴文(可依关键词、兴趣、粉丝主页、时间等条件查询)
    粉丝主页(可依关键词、主页分类、兴趣等条件查询)
    小组(可依公开/封闭/隐私、关键词、主题等条件查询)
    活动(可依关键词查询)
    地点(可依关键词、地标、曾经到访等条件查询)
    APP(可以关键词、分类、相似于某APP等条件查询)
    采集专页贴文内容数据
    采集专页互动用户数据
    UID反查用户资料
    采集小组成员
    关键词找FB用户
    采集直播间互动观众
    Graph Search链结采集用户UID
    采集直播间互动观众
    ID反查粉丝主页资料
    ID反查小组资料
    ID反查贴文内容
    ID反查地点
    ID反查活动