Hexo+hiker主题配置与美化

2017-08-11

hexo github

前言
clone主题
站点_config.yml的配置
hiker主题配置与美化
关于写文章
参考资料

前言

这篇文章承接上一篇 Hexo+Github搭建个人博客 ,本文以hiker主题为主，主要是关于hiker主题的配置和美化。主要分为下面几个部分：

clone主题。别人做好的直接拿过来用就行了，自己在做一些小修改。
_config.yml的配置。_config.yml在站点主文件夹和主题文件夹各有一个
网站功能的添加
写文章时注意的问题
自己使用时遇到的一些问题

注：我的站点文件夹是blog

clone主题

以hiker主题为例，在blog文件夹右键选择 Git Bash here 输入：git clone https://github.com/iTimeTraveler/hexo-theme-hiker.git themes/hiker
此操作将主题文件下载到本地。
修改站点配置文件_config.yml中themes项修改为hiker

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: hiker

接着在Git Bash中输入：

1 2	cd themes/hiker git pull

进行主题的更新

回到站点文件夹的Git Bash输入：

1 2	hexo c hexo g -d

之后就可以在浏览器查看了。

提醒：每次部署之前最好把站点文件夹内的 .deploy_git 文件夹删掉，否则可能出现部署之后网站并没有更改。

站点_config.yml的配置

在站点配置文件可以修改网站的标题和描述，如：

# Site
title: #网站标题
subtitle: #副标题
description: #描述
author: #作者
language: zh-CN  #语言，zh-CN表示中文简体
timezone:

其余没什么好修改的

hiker主题配置与美化

主题 _config.yml的配置文件的位置在“blog/themes/hiker/_config.yml”，主题美化主要是修改它。

阅读全文按钮

这里先只说一种方法：在写文章时在你需要分割的地方写。如

床前明月光
疑是地上霜

举头望明月
低头思故乡

不要写到代码区

设置头像

# 头像设置
# Put your favicon.ico or avatar.jpg into `hexo-site/themes/hiker/source/` directory.
avatar: 
  enable: true
  border: true
  width: 124
  height: 124
  top: 0
  url: css/images/mylogo.jpg  #头像修改位置

设置标签、分类、关于页面

在Git Bash中输入：

1
2
3

hexo new page about
hexo new page tags
hexo new page categories

在blog/source/中会多出三个文件夹，每个文件夹里都有一个index.md。

以tags为例，修改其中的index.md，如：

---
title: tags
date: 2017-08-10 09:35:41
layout: tags
comments: false   #此页评论关闭
---

分类与其相同，只是要把tags改为categories

关于页面：

---
title: 个人简介
date: 2017-08-10 09:35:41
comments: false
---
写你的文章

搜索功能

输入：npm install -S hexo-generator-ison-content

关于页面背景音乐

在网易云音乐网页版找到歌曲，生成外链播放器，复制代码加到关于页面的index.md中

评论系统

我用的是来比力

登陆来比力->注册账户->进入管理页面->安装免费city->得到代码

# comment ShortName, you can choose only ONE to display.
# 评论 目前使用的是来比力 
gentie_productKey: #your-gentie-product-key
duoshuo_shortname: 
disqus_shortname: 
livere_shortname: MTAyMC8yOTQ4MS82MDQ5  #更换这个就可以了
uyan_uid: 
wumii:

打赏功能

donate: 
 enable: true
 message: '如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作!'
 wechatImage: http://i2.bvimg.com/1949/0df6d998c39d7c13.jpg   #放你的图片
 alipayImage: http://i2.bvimg.com/1949/0df6d998c39d7c13.jpg

主页大图滚动速度

打开 hiker/layout/_partial/header.ejs 第53行

1
2
3

$('section.awSlider .carousel').carousel({
              pause: '',
              interval: 5000

5000代表5s。

修改主页大图与主题色

找home_background_image，highlight_theme关键字

关于写文章

输入 hexo new "标题"

会在blog/source/_post/下生成.md文件，在里面用 Markdown语法书写文章

格式：

---
title: Hexo+hiker主题配置和美化
date: 2017-08-10 15:11:55
tags: [hexo,github]   #标签
categories: hexo博客  #分类
---

Hexo文件都是UTF-8编码方式

每次写完，进行部署

1 2	hexo c hexo g -d

就可以在网站上看到你的博客了！

参考资料

下一篇：Hexo+Github搭建个人博客