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

来源：易榕旅网

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

一、使用pure主题

1、克隆pure到本地：

git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

2、启用pure主题:

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

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

hexo clean
hexo s

启动服务后：进入本地浏览器输入:，如下图

3、安装pure插件:

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

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、主题的基本配置：

2、个人信息的配置：

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

（2）配置站点标题:

# 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）配置打赏信息:

# Donate
donate:
  enable: true
  # 微信打赏
  wechatpay:
    qrcode: images/donate/wechatpayimg.png # 在主题目录的source文件夹中进行图片的设定
    title: 微信支付
  # 支付宝打赏
  alipay: 
    qrcode: images/donate/alipayimg.png # 在主题目录的source文件夹中进行图片的设定
    title: 支付宝

（4）配置个人信息:

# 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界面右栏目中的信息:

  # 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）开启评论功能:

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

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

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）开启搜索功能:

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

（8）展示github项目:

# Github
github: 
  username: cofess  # github用户名

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

# 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）友情链接的配置:

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

三、更新站点，查看效果

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

hexo clean
hexo g
hexo s

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

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

Finish

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文