Skip to content

Latest commit

 

History

History
204 lines (146 loc) · 7.39 KB

Document.md

File metadata and controls

204 lines (146 loc) · 7.39 KB

说明文档

Environment

如果你已经安装了jekyll,那么你只需要切换到 xs-huxblog 目录,然后输入 jekyll serve 就能在本地浏览器中预览主题。

如果你还没有安装 jekyll,那么可以参考 安装 Jekyll

Get Started

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

# Site settings
title: 小昇的博客                # 你的博客网站标题
SEOTitle: Xs Blog              # 在后面会详细谈到
description: "Cool Blog"       # 随便说点,描述一下
# SNS settings
douban_username: 138483825     # 你的豆瓣账号
github_username: jsksxs360     # 你的github账号
weibo_username: jsksxs360      # 你的微博账号
zhihu_username: jsksxs360      # 你的知乎账号
# Build settings
# paginate: 10                 # 一页你准备显示几篇文章

关于评论系统和网站统计的相关设置,请参考 网站分析

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

write-posts

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

yaml 头文件长这样:

---
layout: post
title: "Hello 2016"
subtitle: "Hello World, Hello Blog"
date: 2016-01-29 12:00:00
author: "Xiaosheng"
header-img: "img/bg/bg_2016.jpg"
catalog: true
tags:
    - Life
---

其中,layout 代表页面的类型,普通文章请设置为 post。catalog 为文章目录,会自动提取各级标题,显示在文章右侧。如下图所示:

SideBar

长这样:

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

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

侧边栏是响应式布局的,当屏幕尺寸小于 992px 的时候,侧边栏就会移动到底部。具体请见bootstrap栅格系统 http://v3.bootcss.com/css/。如果你不想使用侧边栏,可以设置 sidebar: false

Mini About Me

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

Featured Tags

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

# 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

Friends

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

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

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

Comments

考虑到多说已经停运,而目前国内的评论系统大多需要备案,因此这里选择来自韩国的来必力。来必力对中文的支持还不错,用户可以通过 QQ、微信、微博等方式登录进行评论,加载速度也还可以。

如果需要使用,请先去来必力官网注册一个账号,然后在管理页面的代码管理中,找到类似 <div id="lv-container" data-id="city" data-uid="MTAyMC80MjI1Ny8xODgwNA=="> 的部分,将 data-uid 之后的代码复制到 _config.yml 文件中,并且将 labili 设置为 true:

# Livere
labili: true
labili_uid: MTAyMC80MjI1Ny8xODgwNA==

注意:labili_uid一定要替换成自己网站的uid

Analytics

网站分析支持百度统计,你需要去官方网站注册一下。点击代码获取,然后在代码中找到类似 hm.src = "//hm.baidu.com/hm.js?07529a93af5fa9f808261a1318c3aba4" 的部分,将问号之后的一串数字复制到 _config.yml 文件中:

# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900

一定要使用你们自己的啊!

Header Image

标题底图是可以自己选的,看看几篇示例 post 你就知道如何设置了。

标题底图的选取完全是看个人的审美了,我也帮不了你。每一篇文章可以有不同的底图,你想放什么就放什么,最后宽度要够,大小不要太大,否则加载慢啊。

但是需要注意的是本模板的标题是白色的,所以背景色要设置为灰色或者黑色,总之深色系就对了。

SEO Title

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

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

Install Jekyll

因为 Jekyll 是用 Ruby 开发的,所以如果你的系统上没有安装,那么首先需要安装 Ruby。

注意,目前 Jekyll 已经更新到 3.x,安装 Jekyll 需要至少 2.0 版本的 Ruby,所以不要直接使用诸如 sudo apt-get install ruby 这样的命令安装,因为你软件仓库中的 Ruby 可能不是最新版。你可以使用下面的命令安装(使用 brightbox ppa 仓库):

$ sudo apt-get install python-software-properties
$ sudo apt-add-repository ppa:brightbox/ruby-ng
$ sudo apt-get update
$ sudo apt-get install ruby2.1
$ sudo apt-get install ruby2.1-dev

安装后,输入 ruby -v 检查当前 Ruby 的版本,若正确显示则安装成功。

因为我们要通过 gem 来安装 jekyll,所以首先要确保 gem 已正确安装。输入 gem -v,若正确显示 gem 的版本号则安装成功。若报错则可能是因为未安装 Nodejs,可以通过 sudo apt-get install nodejs 来安装。

为了加快安装速度,建议将 gem 的数据源改为 Ruby China 的 RubyGems 镜像。

$ gem sources --remove https://rubygems.org/
$ gem sources --remove http://rubygems.org/
$ gem sources -a https://gems.ruby-china.com
$ gem sources -l
*** CURRENT SOURCES ***
https://gems.ruby-china.com
# 请确保只有 https://gems.ruby-china.com

然后安装 jekyll 和 rdiscount。

$ sudo gem install jekyll
$ sudo gem install rdiscount

至此 Jekyll 安装完成,你可以输入 jekyll -v 来检查,若正确显示 jekyll 的版本号则安装成功。

由于网站还使用到了分页功能,所以还需要安装 jekyll-paginate,你可以通过 sudo gem install jekyll-paginate 来安装。