纸小墨ink简洁主题story爱上你的故事

主题介绍

为纸小墨写的一款主题,该主题移植自Yumoe

github地址：ink-theme-story

Demo

ink-theme-story

主题的一些食用说明

菜单

标题旁边有一个 · 字符，点击后便可显示菜单。1,2,3 分别代表 独立页面菜单、导航树(仅在文章界面有用)以及搜索框。

一些功能

评论点击加载, 可以应对一些墙导致无法加载的场景
图片懒加载
评论系统支持来必力, Disqus, Gitment, 默认为Disqus
...

主题截图

使用方法

基础设置

进入到纸小墨程序的目录下, 也就是ink主程序的目录, 然后进入该目录下的blog目录

然后执行

git clone https://github.com/akkuman/ink-theme-story.git

或者下载git压缩包后解压到blog文件夹

现在你可以看到blog目录下的ink-theme-story目录

然后修改站点配置文件blog/config.yml

站点配置文件一般如下:

site:

    title: "Akkuman"

    subtitle: "Akkuman的技术博客"

    limit: 8

    theme: ink-theme-story

    lang: zh

    url: "ink-theme-story.pancakeapps.com"

    comment: Akkuman

    logo: "-/images/avatar.png"

    # link: "{category}/{year}/{month}/{day}/{title}.html"

    link: "{year}/{month}/{day}/{title}.html"

    # root: "/blog"

authors:

    me:

        name: "Akkuman"

        intro: "编程小白|技术菜鸟"

        avatar: "-/images/avatar.png"

build:

    # output: "public"

    port: 8000

    # Copied files to public folder when build

    copy:

        - "source/images"

    # Excuted command when use 'ink publish'

    publish: |

        git add . -A

        git commit -m "update"

        git push origin

我们需要修改的地方有:

title   #title字段是截图中的左上角Akkuman字段, 比如我设置为Akkuman那么就是和我截图中一样

subtitle    #网站子标题, 在标签页和归档能看到

limit: 8    #每页可显示的文章数目, 为了美观建议设置为8

theme: ink-theme-story    #网站主题目录, 设置为该主题ink-theme-story

其他地方根据自己需求更改, 纸小墨说明文档见简洁的静态博客构建工具 —— 纸小墨（InkPaper）

关于页面

在纸小墨中,每篇文章是有作者的,我现在按上面我给出的例子配置为例进行说明

纸小墨中每一篇文章的头配置大致如下:

title: "简洁的静态博客构建工具 —— 纸小墨（InkPaper）"

date: 2015-03-01 18:00:00 +0800

update: 2016-07-11 17:00:00 +0800

author: me

cover: "-/images/example.png"

tags:

    - 设计

    - 写作

preview: 纸小墨（InkPaper）是一个GO语言编写的开源静态博客构建工具，可以快速搭建博客网站。它无依赖跨平台，配置简单构建快速，注重简洁易用与更优雅的排版。

其中的preview是文章预览，也可在正文中使用分割, 是一个可选字段,我们不必管

对我们有影响的字段配置除了基础的title等等之外, 需要关注一下author这个字段

纸小墨每一篇文章的作者的关于页面是about.{{.Author.Id}}.html, 比如我上面的站点配置文件中authors有一个值是me, 那么这个作者的关于页面就是about.me.html, 也就是我们需要建立一个page, 纸小墨主程序打包中有一个文件about.me.md, 可以参见这个文件的格式, 我在这里给出来:

type: page

title: "关于作者"

author: me

---

## 纸小墨

构建只为纯粹书写的博客。

[http://www.chole.io/](http://www.chole.io/)

那么这个文件生成后就会在站点根目录下生成about.me.html文件.

重点来了

上面我说的关于页面是单个作者的关于页面, 在这个主题中, 我有定义一个站点的关于页面

<a href="{{.Site.Root}}/about.html"><li>{{i18n "about"}}</li></a>

我们只需要按照上面about.me.md的格式新建一个about.md即可, 我在这里给出一个about.md例子:

type: page

title: "关于本站"

---

我是一个站点关于页面例子

author字段可省略,看自己的喜好

评论系统切换

本主题的评论采用点击再动态加载的方式, 所以不用担心因为Disqus被墙的原因导致页面打不开, 只有当你点击show comments时才会开始加载评论

本主题的评论系统支持来必力, Disqus, Gitment

来必力Livere

切换为来必力的话只需要修改站点配置文件blog/config.yml, 把comment字段的值修改成来必力的data-uid(可在来必力后台代码管理中看到), 然后打开blog/ink-theme-story/_comment.html文件, 把来必力评论的注释去掉, 然后把Disqus评论加上注释即可

Gitment

切换为Gitment的话同上修改, comment字段的格式为

comment: "owner:repo:client_id:client_secret"

其中各个的属性为

owner           #你的 GitHub ID

repo            #存储评论的 repo

client_id       #你的 client ID

client_secret   #你的 client secret

然后打开blog/ink-theme-story/_comment.html文件, 把Gitment评论的注释去掉, 然后把Disqus评论加上注释即可

写在最后

致谢

特别感谢Yumoe提供了这么简洁大方的主题