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

前言

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

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

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

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


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

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

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

使用Github+Hexo搭建个人博客 | No.3_第1张图片

下面进入保姆级教学:


教程

1.Next主题安装

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

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

使用Github+Hexo搭建个人博客 | No.3_第2张图片

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

使用Github+Hexo搭建个人博客 | No.3_第3张图片
然后打开网站配置文件_config.yml(在Blog-Hexo下)。找到theme,修改为以下内容:

theme: next

使用Github+Hexo搭建个人博客 | No.3_第4张图片

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


2.主题的简单配置

1.Next主题风格

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

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

使用Github+Hexo搭建个人博客 | No.3_第5张图片

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

使用Github+Hexo搭建个人博客 | No.3_第6张图片

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

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

使用Github+Hexo搭建个人博客 | No.3_第7张图片

修改完成之后本地预览(先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

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

使用Github+Hexo搭建个人博客 | No.3_第8张图片

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

使用Github+Hexo搭建个人博客 | No.3_第9张图片

4.设置头像

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

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

使用Github+Hexo搭建个人博客 | No.3_第10张图片

编辑主题配置文件,找到avatar,修改为:

avatar: /uploads/picture.png

使用Github+Hexo搭建个人博客 | No.3_第11张图片

修改后本地预览即可。

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

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

进入下面文件:

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

打开sidebar-author.styl

使用Github+Hexo搭建个人博客 | No.3_第12张图片

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

.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);
  }
}

使用Github+Hexo搭建个人博客 | No.3_第13张图片

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

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

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

使用Github+Hexo搭建个人博客 | No.3_第14张图片


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

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

每天进步一点点,Peace!

感谢支持!

你可能感兴趣的:(hexo)