FarBox 使用技巧总结

@ FarBox笔记

我喜欢 FarBox 的简单易上手,却又想自定义一番,因为官方文档略显深奥,于是不停地在试行错误。如果你也一样,那么这篇文章也许能解决你的几个问题。以下问题解决方案来自官方帮助文档官方开发者文档、官方客服(hi#farbox.com)以及头脑风暴。

保存草稿

由于在 your.farbox.com 文件夹中的所有 .md 文件都会显示在博客上,所以如果边写边保存,那么访客就会看到只写了一半的文章。解决方法很简单,在文章开头 title date 下面加一条 status: draft,这样保存文章以后并不会显示在博客上。等到文章完成,删除此行代码再保存便可。更多请参考官方文档

绑定独立域名

  1. 你得有一个域名(域名取得方法请百度或谷歌,网上教程很多,这里就不赘述了)
  2. 在域名注册商后台修改 DNS 记录,将 CNAME 记录指向 park.farbox.com
  3. FarBox 后台设置选项中,域名一栏填写独立域名;或者在根目录下找到 site.txtsite.md 文件,在 domain: 后填上域名。比如:domain: blog.cyanchen.com(注意冒号后面要有半角空格)
  4. 等待解析生效,快的十分钟,慢的且耐住性子等24小时吧,不行就客服。

Farbox 二级域名跳转至独立域名

这种写法适用于 your.farbox.com 跳转到 yourdomain.com,以及 your.farbox.com/whatever 跳转到 yourdomain.com/whatever

方法:在根目录(your.farbox.com 文件夹)下的 base.html 中的 </head> 前面添加以下代码,其中 your.farbox.com 改为自己的 FarBox 二级域名,yourdomain.com 改为独立域名:

{% if request.host == 'your.farbox.com' %} {{ redirect('http://yourdomain.com' + request.url_without_host ) }}{%endif%}

注意:独立域名一定要写上 http://,不然会跳转为 your.farbox.com/yourdomain.com 这种鬼地址。

创建页面

有两种方式可以创建页面,第一种网址是 yourdomain.com/pagename.md,第二种网址是 yourdomain.com/pagename

第一种很简单,直接在根目录下创建一个 .md 文件,比如 about.md。在里面填上自我介绍的文字和图片,访问 yourdomain.com/about.md 就能看见博客的关于页面。

第二种需要一定的 html 知识(不难,可以看下这个中文教程),以创建关于页面为例:

  1. 在根目录下的 template 文件夹中复制 post.html 文件,更名为 about.html
  2. 修改 {% block title %} 后的网页标题,比如修改成:{% block title %}关于 | {{ site.title }}{% endblock %},这样网页标题就会变成:关于 | 你的网站名
  3. 比对 post.html 中各部分,修改相应内容。比如我的模板中页面名称是这样定义的:<h2 class="title">关于</h2>,再比如页面内容包在 <div class="post_body"></div> 之间
  4. 最后还是不要忘记保存(保存快捷键 ctrl+s)

创建分类

  1. 在根目录下创建几个分类文件夹(好像最多12个),一定要是英文的,比如 life/photography/painting 等等。
  2. 访问 yourdomain.com/category 查看分类
  3. 比如 life 文件夹里的文章分类在 yourdomain.com/category/life 之下

如果根目录中有两层文件夹,比如

|-- your.farbox.com
    |-- life
        |-- 2013
        |-- 2012

如果想要 yourdomain.com/category 页面显示的是第一层文件夹,也就是 life 的话,请确保模板文件夹中的 category.html 中相关代码如下:

{% for category in  get_data(type='folder', level=1, min_posts_count=1) %}

如果想要显示第二层文件夹,也就是2012和2013两个文件夹,那么 level 需要改为 [1,2]

{% for category in  get_data(type='folder', level=[1,2], min_posts_count=1) %}

访问 yourdomain.com/category/life 的话,会显示 life 文件夹中的所有文章。而访问 yourdomain.com/category/life/2013 的话,会显示 life 文件夹中的2013文件夹下的所有文章。

更改文章网址

所有文章网址(url)前面都会加一个 /post/,而默认的文章网址(url)是 .md 文件名,比如 hello.md 对应的网址是 yourdomain.com/post/hello。如果 .md 文件是中文名也没关系,网址会自动转化为拼音。比如 你好.md 的网址是 yourdomain.com/post/ni-hao

如果你和我一样有“洁癖”,喜欢把文件名设置成 年-月-日-文章名.md 格式,那么按照默认的话网址会很难看。所以这时候就要用到 url 参数,在文章开头 title date 下面加一条 url: postname,其中 postname 是可以自定义的,中英文都是直接显示。比如:url: 你好 对应网址为 yourdomain.com/post/你好

显示文章浏览数

事先说一下,每次修改 .md 文件的 meta 部分再保存之后,浏览数都会归零。

在合适的地方,比如标题下面,调用 {{ post.visits or 0 }}。可以自定义为 {{ post.visits or 0 }}次阅读,这样就会返回 45次阅读 的结果。更多 post 属性请参照官方开发者文档

添加多说评论并显示评论数

多说官方给出的代码显示【文章评论数】方法(链接失效),如果看懂了,就可以忽略以下内容。

步骤一:添加多说评论

在合适的位置,比如 根目录/template/include/comment.html 中添加以下代码:

<div class="ds-thread" data-thread-key="{{post.url_path}}"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"your-duoshuo-shortname"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
        || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>

your-duoshuo-shortname 部分请替换为自己的多说域名的前半部分。比如多说域名为 peter.duoshuo.com,那么 short name 就是 peter。

步骤二:显示评论数

在合适的位置,比如 根目录/template/post.html 中标题底下添加以下代码:

<span class="ds-thread-count" data-thread-key="{{post.url_path}}">暂无评论</span>

要在评论框以外引用评论数,需要用到 data-thread-key 参数。这个参数确定评论和文章的一一对应关系。所以这个参数必须相对独立。考虑到这点,可以使用文章 url:{{post.url}}(带 /post/)或者 {{post.url_path}}(不带 /post/)。但是如果文章 url 更改了的话,原来的评论就显示不了了。

注意

  1. 两个 data-thread-key 参数必须一致
  2. 如果引用评论数的页面没有评论框,比如在首页引用评论数(步骤二),而内页才有评论框(步骤一),那么首页是不显示评论数的。解决方法是,在首页也加上多说的 js,那么代码将变为:
<span class="ds-thread-count" data-thread-key="{{post.url_path}}">暂无评论</span>
<script type="text/javascript">
var duoshuoQuery = {short_name:"your-duoshuo-shortname"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
        || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>

总的来说就是:引用评论数(步骤二)也是要依赖于多说的 js 的。但同个页面中只需要加载一次多说 js。


评论