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

主题介绍

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

github地址:ink-theme-story

Demo

ink-theme-story

主题的一些食用说明

菜单

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

一些功能

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

主题截图

Screenshot_20180820_143859.png

使用方法

基础设置

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

然后执行

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

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

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

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

站点配置文件一般如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

我们需要修改的地方有:

1
2
3
4
title   #title字段是截图中的左上角Akkuman字段, 比如我设置为Akkuman那么就是和我截图中一样
subtitle #网站子标题, 在标签页和归档能看到
limit: 8 #每页可显示的文章数目, 为了美观建议设置为8
theme: ink-theme-story #网站主题目录, 设置为该主题ink-theme-story

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

关于页面

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

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

1
2
3
4
5
6
7
8
9
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是文章预览,也可在正文中使用<!--more-->分割, 是一个可选字段,我们不必管

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

纸小墨每一篇文章的作者的关于页面是

1
about.{{.Author.Id}}.html

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

1
2
3
4
5
6
7
8
9
10
11
type: page
title: "关于作者"
author: me

---

## 纸小墨

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

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

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

重点来了

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

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

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

1
2
3
4
5
6
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字段的格式为

1
comment: "owner:repo:client_id:client_secret"

其中各个的属性为

1
2
3
4
owner           #你的 GitHub ID
repo #存储评论的 repo
client_id #你的 client ID
client_secret #你的 client secret

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

写在最后

致谢

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