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

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

一、使用pure主题

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

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

1、克隆pure到本地:
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,做如下修改:

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

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

hexo clean
hexo s

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

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

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

2、个人信息的配置:

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

(1)配置站点左边的主目录:

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

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

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

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

(11)分类和标签的配置:

三、更新站点,查看效果

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

hexo clean
hexo g
hexo s

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

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

Finish

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值