搭建个人博客(二)：Hexo主题pure使用指南

其他 评论

Hexo-theme-pures是一个Hexo的主题框架
效果查看:溯的主页

一、使用pure主题

pure主题地址:https://github.com/cofess/hexo-theme-pure.git themes/pure

在你的博客根目录下右击选择git bash here命令行窗口输入如下命令

1、克隆pure到本地：
1
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

注意:如果github下载慢，建议使用gitee导入pure的girthub仓库，然后进行下载，具体操作请查看：使用gitee导入github项目，解决github下载速度缓慢
如果使用gitee下载，请解压至博客文件夹下的themes目录下
下载后 如下图:
在这里插入图片描述

2、启用pure主题:

配置文件说明:
在 Hexo 中主要有两份配置文件，其名称都是 _config.yml。 一份位于博客根目录下，主要包含 Hexo 本身的配置；另一份位于主题根目录下，主要用于配置主题相关的选项。
（1）打开博客配置文件_config.yml，做如下修改:

1
2
language: zh-CN //设置主题为中文版，若使用英文版则不修改
theme: hexo-theme-pure //修改hexo主题

（2）在博客文件夹下打开git bash命令行窗口依次使用如下指令:

1
2
hexo clean
hexo s

启动服务后：进入本地浏览器输入:http://localhost:4000/，如下图
在这里插入图片描述

3、安装pure插件:

在博客文件夹下打开git bash命令行窗口依次使用如下指令：

1
2
3
4
5
npm install hexo-wordcount --save
npm install hexo-generator-json-content --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

二、配置pure主题

1、主题的基本配置：

将主题目录中 /theme/_source/ 下的所有东西复制进博客根目录的source文件夹中
注意: 看清楚是哪个目录

2、个人信息的配置：

打开主题根目录下的_config.yml配置文件：

（1）配置站点左边的主目录:

1
2
3
4
5
6
7
8
9
10
11
# menu
menu:
  Home: .
  Archives: archives  # 归档
  # categories指代博客根目录的source下的categories文件夹,可进行相关配置,下同
  Categories: categories  # 分类
  Tags: tags  # 标签
  Repository: repository  # github repositories
  Books: books  # 豆瓣书单
  Links: links  # 友链
  About: about  # 关于

单个目录界面的相关配置可在博客根目录的source下的同名文件夹中进行配置

（2）配置站点标题:

1
2
3
4
5
6
7
8
9
10
11
# Site
site:
  logo:
    enabled: true
    width: 40
    height: 40
    url: ../images/logo.png
  title: Hexo # 页面title
  favicon: /favicon.png # 页面icon
  board: <p>欢迎交流与分享经验!</p> # 站点公告
  copyright: false # 底部版权信息,使用true开启

（3）配置打赏信息:

1
2
3
4
5
6
7
8
9
10
11
# Donate
donate:
  enable: true
  # 微信打赏
  wechatpay:
    qrcode: images/donate/wechatpayimg.png # 在主题目录的source文件夹中进行图片的设定
    title: 微信支付
  # 支付宝打赏
  alipay: 
    qrcode: images/donate/alipayimg.png # 在主题目录的source文件夹中进行图片的设定
    title: 支付宝

（4）配置个人信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# profile
profile:
  enabled: true # 是否展示个人信息
  avatar: images/avatar.jpg # 在主题目录的source文件夹中进行图片的设定
  gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
  author: 昵称
  author_title: Web Developer & Designer
  author_description: 个人简介。
  location: Shenzhen, China 
  follow: https://github.com/cofess
  # Social Links
  social:
    links: # 左边目录底部的链接配置，可自行删减
      github: https://github.com/cofess
      weibo: http://weibo.com/cofess
      twitter: https://twitter.com/iwebued
      # facebook: /
      # dribbble: /
      behance: https://www.behance.net/cofess
      rss: atom.xml
    link_tooltip: true # enable the social link tooltip, options: true, false

（5）配置about界面右栏目中的信息:

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
# My Skills 
skills:
  Git: ★★★☆☆
  Gulp: ★★★☆☆
  Javascript: ★★★☆☆
  HTML+CSS: ★★★☆☆
  Bootstrap: ★★★☆☆
  ThinkPHP: ★★★☆☆
  平面设计: ★★★☆☆
# My Personal Links
links:
  Github: https://github.com/cofess
  Blog: http://blog.cofess.com
  微博: http://weibo.com/cofess
  花瓣: http://huaban.com/cofess
  Behance: https://www.behance.net/cofess
# My Personal Labels
labels:
  - 前端
  - 前端开发
  - 前端重构
  - Web前端
  - 网页重构
# My Personal Works
works:
  name:
    link: http://www.example.com
    date: 2016

（6）开启评论功能:

1
2
comment:
  type: valine  # 启用哪种评论系统

Valine
一个无后端的评论框工具，其依赖于 Leancloud 开发，所以使用前需要先注册 Leancloud 账号
Valine配置

1
2
3
4
5
6
7
8
9
10
11
12
13
valine: # Valine官方地址: https://valine.js.org
  appid:  # 你的 leancloud 应用 appid
  appkey:  # 你的 leancloud 应用 appkey
  notify: true # 是否开始评论邮件提醒, 教程: https://github.com/xCss/Valine/wiki
  verify: false # 是否开始验证码功能, 开始邮件提醒会自动开启验证码功能
  placeholder: 说点什么... # 输入框默认内容
  avatar: mm # 头像展示方式, 具体设置项教程: https://valine.js.org/configuration.html#avatar
  meta: nick,mail,link # 自定义评论信息
  pageSize: 10 # 评论列表分页
  lang: zh-cn, # 多语言支持 zh-cn | en
  visitor: true # 文章阅读量统计:  https://valine.js.org/visitor.html
  highlight: true # 代码高亮
  recordIP: true # 记录评论者的IP

（7）开启搜索功能:

1
2
3
4
# Search
search:
  insight: true # 内置搜索功能,
  baidu: false # 百度搜索功能,不可以同时使用

（8）展示github项目:

1
2
3
# Github
github: 
  username: cofess  # github用户名

（9）开启文章字数，阅读时长，浏览量统计:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# PV
pv: # 浏览量统计
  busuanzi:
    enable: false  # 不蒜子统计，一般使用不蒜子统计，使用true开启
  leancloud:
    enable: false  # leancloud统计
    app_id: # leancloud <AppID>
    app_key: # leancloud <AppKey>
        
# wordcount
postCount:
  enable: false
  wordcount: true  # 文章字数统计
  min2read: true  # 阅读时长预计

（10）友情链接的配置:

选择博客根目录下 /source/_data/ 中的links.yml配置文件，可仿照其中样例进行配置

（11）分类和标签的配置:

三、更新站点，查看效果

在博客文件夹下打开git bash命令行窗口依次使用如下指令：

1
2
3
hexo clean
hexo g
hexo s

启动服务后：进入本地浏览器输入:http://localhost:4000/ 进行查看

记得当初思考怎么配置分类和标签时候，纠结了很久，反复的看配置文件，最后发现分类和标签的配置需在博文中设置，在下一节讲解：下一节

Finish

溯代码改变世界

一个95后大学生