使用Github+Hexo搭建个人博客 | No.3

前言

通过前面两期教程，带领大家创建了hexo博客并且可以自主的发一些文章了。

那么本期教程将带领大家优化博客，让自己的博客看起来美观，令人赏心悦目！

这里以我用的主题：Next 为例，进行教程细节讲解Stupid bunny-笨小兔

Next主题是目前比较流行的一款主题，值得推荐！

---

首先，我们需要知道，用来存放主题的文件夹是“themes文件夹”，主题文件夹下是主题的一些配置。

注：站点配置文件:在Blog-Hexo目录下的_config.yml

​ 主题配置文件:在主题目录themes下的_config.yml

下面进入保姆级教学：

---

教程

1.Next主题安装

Next主题的安装方式很简单，只需要在博客的主目录下（也就是在Blog-Hexo下使用Bash命令）执行：

git clone https://github.com/iissnan/hexo-theme-next themes/next

安装完成后可以在主题文件里找到它。

然后打开网站配置文件_config.yml（在Blog-Hexo下）。找到theme，修改为以下内容：

theme: next

修改完成后，使用Bash上传部署就OK了。

---

2.主题的简单配置

1.Next主题风格

Next提供了四种主题Scheme风格：Muse、Mist、Pisces、Gemini

我们可以在主题配置文件Blog-Hexo/themes/next/_config.yml文件中选择：

搜索scheme关键字，选择喜欢的外观，用哪个就把哪个前面的#注释去掉，我这里是选择的Gemini

修改后可以先本地预览看看效果。

2.设置博客语言

编辑站点配置文件，找到 language 并修改：

language: zh-Hans

目前NexT支持的语言如下：

语言	代码	设定示例
English	en	language: en
简体中文	zh-Hans	language: zh-Hans
Français	fr-FR	language: fr-FR
Português	pt	language: pt or language: pt-BR
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Русский язык	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id
Korean	ko	language: ko

修改完成之后本地预览（先hexo g 然后 hexo s ），可以看到博客的首页，标签等都是简体中文的了。

3.设置菜单选项

编辑主题配置文件，搜索找到menu

key: /link/ || icon

key是名称，这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。

icon是图标。

键值	设定值	显示文本（简体中文）
home	home: /	主页
archives	archives: /archives	归档页
categories	categories: /categories	分类页
tags	tags: /tags	标签页
about	about: /about	关于页面
commonweal	commonweal: /404.html	公益 404

把自己想要的菜单项注释#去掉，位置也可以更改，互换位置就行：

修改后本地预览。菜单配置完成！

4.设置头像

• 将要设置头像图片放置在source/uploads/（若不存在新建uploads）

  配置为:avatar: /uploads/avatar.png

编辑主题配置文件，找到avatar，修改为：

avatar: /uploads/picture.png

修改后本地预览即可。

• 下面将头像修改为圆形的，并且实现360°旋转

  当鼠标放在头像上时，头像会旋转360°，鼠标移开后恢复。

进入下面文件：

.../themes/next/source/css/_common/components/sidebar

打开sidebar-author.styl

在下面位置增加以下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}


img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

修改后本地预览，可以看到头像已经修改成圆形，并且实现360°旋转。

5.设置作者、站点描述、博客标题等等

编辑站点配置文件，搜索找到author。

---

到这里，hexo博客的主题初级搭建及美化就结束了。

后面会有更有意思的事情哦，敬请期待吧~~~

每天进步一点点，Peace！

感谢支持！