前言
通过前面两期教程,带领大家创建了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!
感谢支持!