美化Blog

字数统计: 3.6k字   |   阅读时长≈ 16分

摘要：这篇文章是紧接着上一篇文章的，介绍如何美化自己的blog。

前言：上一篇文章我们已经学会了如何使用Github Pages和Hexo搭建自己的博客，但是博客并不好看，那怎么办的？这很简单，要知道很多前端开发者在Hexo框架下开发了很多的主题给我们使用，我们只需要把他们的主题克隆过来，然后通过修改配置文件即可达到我们所需要的效果。

一、克隆主题

1、进入Hexo的官网主题专栏

2、挑选我们喜欢的主题

选择自己喜爱的主题，点击图片是查看预览，点击文字是跳转到主题的github地址去。

然后在Hexo文件夹下的themes目录下（例如：F:\Blog\hexo\themes），右键Git Bash，在命令行输入:

1
git clone https://github.com/iissnan/hexo-theme-next  #此处地址替换成你需要使用的主题的地址

显示如下界面则表示，主题下载完成

3、修改Hexo配置文件

下载完成后，打开Hexo文件夹下的配置文件 _config.yml

修改参数：theme: hexo-theme-next （这里为刚刚你下载的项目名称）

4、部署主题

返回Hexo目录，右键Git Bash，输入如下代码，进行本地测试：

1
2
hexo g
hexo s

打开浏览器，输入 http://localhost:4000/ 即可看见我们的主题已经更换了。如果觉得效果满意，输入如下代码，将主题部署GitHub上：

1
2
hexo clean   (必须要，不然有时因为缓存问题，服务器更新不了主题)
hexo g -d

然后打开自己的主页，即可看到修改后的效果。

二、hexo配置说明

1、hexo文件目录结构

1
2
3
4
5
6
7
8
|-- _config.yml
|-- package.json
|-- scaffolds
|-- source
   |-- _posts
|-- themes
|-- .gitignore
|-- package.json

2、文件目录详情介绍

①_config.yml

全局配置文件，网站的很多信息都在这里配置，诸如网站名称，副标题，描述，作者，语言，主题，部署等等参数。

_config.yml 采用YAML语法格式，具体语法参加下一篇文章 。

具体配置可以参考官方文档，_config.yml 文件中的内容，并对主要参数做简单的介绍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo #网站标题
subtitle:   #网站副标题
description:  #网站描述
author: John Doe  #作者
language:    #语言
timezone:    #网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com   #你的站点Url
root: /                       #站点的根目录
permalink: :year/:month/:day/:title/   #文章的 永久链接 格式
permalink_defaults:    #永久链接中各部分的默认值

# Directory
source_dir: source   #资源文件夹，这个文件夹用来存放内容
public_dir: public     #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags         # 标签文件夹
archive_dir: archives    #归档文件夹
category_dir: categories      #分类文件夹
code_dir: downloads/code     #Include code 文件夹
i18n_dir: :lang                #国际化（i18n）文件夹
skip_render:                #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post     #预设布局
titlecase: false # 把标题转换为 title case
external_link: true # 在新标签中打开链接
filename_case: 0     #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false  #是否显示草稿
post_asset_folder: false  #是否启动 Asset 文件夹
relative_link: false      #把链接改为与根目录的相对位址
future: true                #显示未来的文章
highlight:                    #内容中代码块的设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:          #分类别名
tag_map:            #标签别名

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD         #日期格式
time_format: HH:mm:ss        #时间格式

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10    #分页数量
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape   #主题名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#  部署部分的设置
deploy:
  type:  #类型，常用的git
  repository:  #地址
  branch:  #没有改动分支，填写master

②package.json

hexo框架的参数和所依赖插件，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "dependencies": {
    "hexo": "^3.7.0",
    "hexo-deployer-git": "^1.0.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.1"
  }
}

③scaffolds

scaffolds是“脚手架、骨架”的意思，当你新建一篇文章（hexo new ‘title’）的时候，hexo是根据这个目录下的文件进行构建的。例如下图：

④source

这个目录很重要，新建的文章都是在保存在这个目录下的。

_posts 。需要新建的博文都放在 _posts 目录下。_posts 目录下是一个个 markdown 文件。

_posts 目录下的md文件，会被编译成html文件，放到public文件夹下。

⑤themes

网站主题目录，hexo有非常好的主题拓展，支持的主题也很丰富。该目录下，每一个子目录就是一个主题，我的子目录如下：

1
2
|-- landscape  //默认主题
|-- hexo-theme-next  //第三方主题

hexo主题传送门

3、hexo常用指令

init

1
hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

new

1
hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

generate

1
hexo generate

生成静态文件。

| 参数 | 描述 |
-|-|-|
| -d，–deploy | 文件生成后立即部署网站 |
| -w, –watch | 监视文件变动 |

该命令可以简写为：

1
hexo g

publish

1
hexo publish [layout] <filename>

发表草稿。

server

1
hexo server

启动服务器。默认情况下，访问网址为：http://localhost:4000/。

| 参数 | 描述 |
-|-|-|
| -p, –port | 重设端口 |
| -s, –static | 只使用静态文件 |
| -l, –log | 启动日记记录，使用覆盖记录格式 |

deploy

1
hexo deploy

部署网站。

| 参数 | 描述 |
-|-|-|
| -g, –generate | 部署之前预先生成静态文件 |

该命令可以简写为：

1
hexo d

render

1
hexo render <file1> [file2] ...

渲染文件。

| 参数 | 描述 |
-|-|-|
| -o, –output | 设置输出路径 |

migrate

1
hexo migrate <type>

从其他博客系统迁移内容。

clean

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

list

1
hexo list <type>

列出网站资料。

version

1
hexo version

显示 Hexo 版本。

安全模式

1
hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

调试模式

1
hexo --debug

在终端中显示调试信息并记录到debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并提交调试信息到GitHub。

简洁模式

1
hexo --silent

隐藏终端信息。

自定义配置文件的路径

1
hexo --config custom.yml

自定义配置文件的路径，执行后将不再使用_config.yml。

显示草稿

1
hexo --draft

显示 source/_drafts 文件夹中的草稿文章。

自定义 CWD

1
hexo --cwd /path/to/cwd

自定义当前工作目录（Current working directory）的路径。

三、主题个性化优化

设置字体

在主题配置文件中设置，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

设置代码高亮主题

NexT 默认使用的是normal主题，可选的值有normal，night，night blue，night bright，night eighties：

1
2
3
4
5
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

设置小型代码块颜色

修改\themes\next\source\css\_variables\base.styl文件，修改$code-background和$code-foreground的值：

1
2
3
4
5
6
7
8
// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 13px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 3px
$code-foreground                = $black-light
$code-background                = $gainsboro

左上角或右上角的Github样式

具体实现方式有两种：
便是到样式1或者样式2的网站中选择你喜欢的样式，复制其中的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址。

添加背景动画

NexT已经自带了多种背景动画效果，你只需要根据需求在主题配置文件修改其中一个为true即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

添加顶部加载条

在主题配置文件中搜索pace：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading. 加载条
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

这里有多种主题选择，根据自己喜好选择主题修改便可。

点击出现小爱心效果

在/themes/next/source/js/src下新建文件love.js，接着把该链接下的代码拷贝粘贴到love.js文件中。

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在\themes\next\layout\index.*文件末尾添加：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

修改作者头像并旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.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);
  }
}

文章添加阴影效果

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

自定义鼠标样式

打开themes/next/source/css/_custom/custom.styl，添加代码：

1
2
3
4
5
6
7
// 鼠标样式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

其中url里面必须是ico图片，ico图片可以上传到网上（推荐七牛云图床），然后获取外链，复制到url里就行了。

让Hexo支持流程图

让Hexo支持Markdown的流程图是一个很酷的想法，所幸不是只有我想到这个问题，人家早已解决，所以我们只需要利用前人的轮子即可。

安装hexo插件

命令为npm install –save hexo-filter-flowchart，插件地址，

配置：

在hexo的_config.yml文件中配置

1
2
3
4
flowchart:
  # raphael:   # optional, the source url of raphael.js
  # flowchart: # optional, the source url of flowchart.js
  options: # options used for `drawSVG`

代码实例：

效果如下：

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

教练，我想学技术！
我主要是以后端技术为主，偶尔看看网络安全相关的内容，或者编写一些有趣的脚本！