本博客主题 Fork 自@Huxpro,感谢！

我的博客在这里 →

如果要 Fork, 模板在这里 gh-pages-theme →, Fork到你自己的用户名.github.io下,修改_config.yml以及CNAME文件即可~

郑重声明: 本博客所有文章均采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0),分享、演绎需准守以下原则:

  1. 署名: 您需要标出原文链接和作者信息;如果更改了原文章内容,需要说明.
  2. 非商业使用: 您不得将本作品用于商业目的.
  3. 相同方式共享: 基于本博客文章修改的作品需适用同一类型的许可协议.

署名-非商业性使用-相同方式共享”许可协议该项许可协议规定,只要他人注明您的姓名并在以您的作品为基础创作的新作品上适用同一类型的许可协议,该他人就可基于非商业目的对您的作品重新编排、节选或者以您的作品为基础进行创作。基于您的作品创作的所有新作品都要适用同一类型的许可协议,因此适用该项协议,则对任何以您的原作为基础创作的演绎作品自然同样都不得进行商业性使用。

关于博客样式主题及开源证书

修改自Hux. powered by Jekyll and Jekyll-bootstrap.

Licensed under the Apache License, Version 2.0 开源证书.

配置本地环境

更新本地jekyll环境.

使用jekyll server的同学需要这样:

1
2

1. gem update jekyll   # 更新jekyll
2. gem update github-pages #更新依赖的包

更简单的是配置Gemfile,然后:

1
2

1. gem install bundler
2. bundle install

使用bundle exec jekyll server的同学在更新jekyll后,需要输入bundle update来更新依赖的包.

参考文档:using jekyll with pages & Upgrading from 2.x to 3.x

支持

  • 你可以自由的fork。如果你能将主题作者和github 的地址保留在你的页面底部,我将非常感谢你。
  • 如果你喜欢我的这个博客模板,请在Quanyin-Blog这个repository点个赞——右上角star一下。

说明文档

下面的说明来自Huxpro,以及我新增加功能以及模块设置的说明,有空再补充,会持续更新的！

开始

Environment

如果你安装了jekyll,那你只需要在命令行输入jekyll serve就能在本地浏览器预览主题。你还可以输入jekyll serve --watch,这样可以边修改边自动运行修改后的文件。

经 @BrucZhaoR的测试,好像两个命令都是可以的自动运行修改后的文件的,刷新后可以实时预览。官方文件是建议安装bundler,这样你在本地的效果就跟在github上面是一样的。详情请见这里://help.github.com/articles/using-jekyll-with-pages/#installing-jekyll

Get Started

你可以通用修改 _config.yml文件来轻松的开始搭建自己的博客:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Site settings
title: Quanyin Blog             # 你的博客网站标题
SEOTitle: Quanyin Blog			# 在后面会详细谈到
description: "Quanyin Blog"    # 随便说点,描述一下

# SNS settings      
github_username: qytang326     # 你的github账号
weibo_username:                # 你的微博账号,底部链接会自动更新的。

# Build settings
# paginate: 10              # 一页你准备放几篇文章

Jekyll官方网站还有很多的参数可以调,比如设置文章的链接形式…网址在这里:Jekyll - Official Site 中文版的在这里:Jekyll中文.

组件

write-posts

要发表的文章一般以markdown的格式放在这里_posts/,你只要看看这篇模板里的文章你就立刻明白该如何设置。

yaml 头文件长这样:

1
2
3
4
5
6
7
8
9

---
layout:     post
title:      "Hello World"
subtitle:   "Hello World, Hello Blog"
date:       2017-07-7 12:00:00
authors:     "Quanyin Tang"
image: "Source/images/background/post-bg-default.jpg"
tags:       [生活]
---

看右边:

设置是在 _config.yml文件里面的Sidebar settings那块。

1
2
3
4

# Sidebar settings
sidebar: true  #添加侧边栏
sidebar-about-description: "简单的描述一下你自己"
sidebar-avatar: /img/avatar.jpg     #你的大头贴,请使用绝对地址.

侧边栏是响应式布局的,当屏幕尺寸小于992px的时候,侧边栏就会移动到底部。具体请见bootstrap栅格系统 <//v3.bootcss.com/css/>

Mini About Me

Mini-About-Me 这个模块将在你的头像下面,展示你所有的社交账号。这个也是响应式布局,当屏幕变小时候,会将其移动到页面底部,只不过会稍微有点小变化,具体请看代码。

看到这个网站 Medium 的推荐标签非常的炫酷,所以我(Hux)将他加了进来。 这个模块现在是独立的,可以呈现在所有页面,包括主页和发表的每一篇文章标题的头上。

1
2
3

# Featured Tags
featured-tags: true  
featured-condition-size: 1     # A tag will be featured if the size of it is more than this condition value

唯一需要注意的是featured-condition-size: 如果一个标签的 SIZE,也就是使用该标签的文章数大于上面设定的条件值,这个标签就会在首页上被推荐。

内部有一个条件模板 if tag[1].size > site.featured-condition-size是用来做筛选过滤的.

Friends

好友链接部分。这会在全部页面显示。

设置是在 _config.yml文件里面的Friends那块,自己加吧。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Friends
friends: [
    {
        title: "Foo Blog",
        href: "//foo.github.io/"
    },
    {
        title: "Bar Blog",
        href: "//bar.github.io"
    }
]

Keynote Layout

HTML5幻灯片的排版:

这部分是用于占用html格式的幻灯片的,一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我认为一个现代化的博客怎么能少了放html幻灯的功能呢~

其主要原理是添加一个 iframe,在里面加入外部链接。你可以直接写到头文件里面去,详情请见下面的yaml头文件的写法。

1
2
3
4

---
layout:     keynote
iframe:     "/Source/reveal-js/"
---

iframe在不同的设备中,将会自动的调整大小。保留内边距是为了让手机用户可以向下滑动,以及添加更多的内容。

BGM

支持网易云自己的插件以及Aplayer(推荐),如下设置即可:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

BGM: true       #启用BGM
## 网易云音乐   8月24日:弃用,效果不好,改用Aplayer
#netease-music: false   #不支持https
#netease-music_url: "//music.163.com/outchain/player?type=0&id=804530027&auto=1&height=430"
## APlayer,Doc: https://aplayer.js.org/docs/#/?id=options && https://www.tiexo.cn/aplayer/ https://api.i-meto.com/music/player.js
APlayer:                    
    data-id: 804530027      #歌曲/专辑/歌单ID
    data-server: netease    #可选参数 netease(网易云音乐)tencent(qq音乐)xiami(虾米音乐)kugou(酷狗音乐)baidu(百度音乐)
    data-type: playlist     #类型:song/album/playlist/search
    data-mode: random       #播放模式:random/single/circulation/order
    data-autoplay: true     #自动播放true or false

canvas

目前可以启用的页面特效有两种,一个是鼠标点击显示小红心,另一个是经典的粒子。

1
2
3
4

##页面点击小红心
click-love: true
##背景动画-特效
canvas-nest: false

评论与分析

Comment

博客不仅支持多说Duoshuo评论系统,也支持Disqus评论系统(以上两个都挂了),我又加了基于Github issue的Gitmen评论系统。

Disqus优点是:国际比较流行,界面也很大气、简介,如果有人评论,还能实时通知,直接回复通知的邮件就行了；缺点是:评论必须要去注册一个disqus账号,分享一般只有Facebook和Twitter,另外在墙内加载速度略慢了一点。想要知道长啥样,可以看以前的版本点这里 最下面就可以看到。

多说 优点是:支持国内各主流社交软件(微博,微信,豆瓣,QQ空间 …)一键分享按钮功能,另外登陆比较方便,管理界面也是纯中文的,相对于disqus全英文的要容易操作一些；缺点是:就是界面丑了一点。 当然你是可以自定义界面的css的,详情请看多说开发者文档 //dev.duoshuo.com/docs/5003ecd94cab3e7250000008 。 可惜都挂了,或者因为世界第七大奇迹而无法使用。

Gitment的优点是:基于Github的Issue,天然的支持Markdown,详细可以在Github上了解。

还配置了一个类似于用户留言的daovoice 首先,你需要去注册一个账号,不管是disqus还是多说的。不要直接使用我的啊！

其次,你只需要在下面的yaml头文件中设置一下就可以了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

duoshuo_username: _你的用户名_
# 或者
disqus_username: _你的用户名_
# 或者
# Gitment settings
Gitment: true
repo_for_gitment:                       # 存放Issue的地方
oauth_client_id:                        #Gihub OAuth的 client ID,与CNAME有关
oauth_client_secret:                    #Gihub OAuth的 client secret
#daovoice
daovoice: false
daovoice_appid: f72737da
daovoice_userid: NO_89757

最后多说是支持分享的,如果你不想分享,请这样设置:duoshuo_share: false。你可以同时使用两个评论系统,不过个人感觉怪怪的。

Analytics

网站分析,现在支持百度统计和Google Analytics。需要去官方网站注册一下,然后将返回的code贴在下面:

1
2
3
4
5
6

# Baidu Analytics
ba_track_id: 

# Google Analytics
ga_track_id: 'UA-102057505-1'            # 你用Google账号去注册一个就会给你一个这样的id
ga_domain: auto			# 默认的是 auto, 这里我是自定义了的域名,你如果没有自己的域名,需要改成auto。

page-views

现在集成的网站计数有busuanzi和hit-kounter,各有优缺点

1
2
3
4
5

##不蒜子计数
busuanzi: true
busuanzi_fixcount: false #初始数值修正
##pageviews
hit-kounter: false

push-for-include)

可以设置在页面被访问时自动推送到相关搜索引擎以增加收录

1
2
3
4
5
6

###推送到百度、360等以增加收录
push-for-include: false
##百度 需要验证
push-to-baidu: false
##360
push-to-360: false

高级部分

Customization

如果你喜欢折腾,你可以去自定义这个模板的 code,Grunt已经为你准备好了。

JavaScript 的压缩混淆、Less 的编译、Apache 2.0 许可通告的添加与 watch 代码改动,这些任务都揽括其中。简单的在命令行中输入 grunt 就可以执行默认任务来帮你构建文件了。如果你想搞一搞 JavaScript 或 Less 的话,grunt watch 会帮助到你的。

如果你可以理解 _include/ 和 _layouts/文件夹下的代码(这里是整个界面布局的地方）,你就可以使用 Jekyll 使用的模版引擎 Liquid的语法直接修改/添加代码,来进行更有创意的自定义界面啦！

Header Image

标题底图是可以自己选的,看看几篇示例post你就知道如何设置了。 至于怎么样才能让标题底图好看呢？标题底图的选取完全是看个人的审美了,我也帮不了你。每一篇文章可以有不同的底图,你想放什么就放什么,最后宽度要够,大小不要太大,否则加载慢啊。

但是需要注意的是本模板的标题是白色的,所以背景色要设置为灰色或者黑色,总之深色系就对了。当然你还可以自定义修改字体颜色,总之,用github pages就是可以完全的个性定制自己的博客。

SEO Title

我的博客标题是 “Quanyin Blog” 但是我想要在搜索的时候显示 “Quanyin Tang的博客 - Quanyin Blog” ,这个就需要SEO Title来定义了。

其实这个SEO Title就是定义了<head><title>标题</title></head>这个里面的东西和多说分享的标题,你可以自行修改的。

compress

页面压缩优化主要是两个方面,一个是js,css以及图片的压缩,另一个则是html的压缩。

  • 基于grunt这个神器,我已经配置好了js压缩,css压缩以及图片压缩,你只需要:
1
2
3

$ npm install     #安装相关插件(如有必要还需先安装nodejs)
$ grunt           #css合成,js、css压缩等
$ grunt img       #图片压缩
  • html的压缩也是基于compress_html和jekyll-press