建站历程：主题美化篇(序)

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 3.7k | 阅读时长 ≈ 6 分钟

这篇文章主要介绍为Hexo博客网站进行主题美化的一些基本操作，其他一些更深入且零散的美化操作会另行开篇。

前期准备

配置文件

首先需要区分两个不同的文件：站点配置文件和主题配置文件，他们的名字都是_config.yml，但前者是在/blog目录下，一个是在/blog/themes/xxx文件夹下（xxx为你的主题名字）

打开Hexo的站点配置文件，你会发现许多关于网站的参数可以在这个_config.yml文件中修改

在# Site下可以修改你的网站标题、副标题、你的名字等等

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

其他的设置可以参看这里

云端更新

在blog初期建设的时候，网页的布局、美化等等都还在一步步完善，需要频繁地更新博客网页。在前一篇文章《建站历程：安装及部署篇》 的最后已经介绍过，通过

1
2
3
hexo clean 
hexo g 
hexo d

这三条指令可以更新网站，下面分别介绍这三条命令的功能：

  • hexo clean的功能是清楚缓存文件（db.json）和已生成的静态文件（public），该指令并非必须，只有在需要清理缓存（如跟换主题）的情况下才需要

  • hexo g（hexo generate）的简写，生成静态文件

  • hexo d（hexo deploy ）的简写，部署网站

一般情况下，运行hexo g和hexo d 之后，博客就会更新并部署到制定域名内，也就是发布到网上。如果你不想要直接发布到网上，则可以在本地服务器内预览，在hexo g后输入hexo s（hexo server的简写） ，即可启动服务器，随后访问http://localhost:4000进行本地预览。

如果你发现本地预览和部署之后的网站效果不同，则有如下解决方法：

  1. 用hexo clean删除缓存，然后重新生成静态文件并部署
  2. 在浏览器上删除博客网站的cookies（参考这里）然后刷新网页

更换主题

在安装Hexo时提供的默认主题landscape并不美观，不过有许多开发者为Hexo提供了很多优秀美观的主题，可以从这里挑选自己喜欢的主题并安装，使用的人最多的是Next主题，有两种安装方法

  1. 在/blog目录下直接克隆仓库：

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

  2. 从next的github仓库网站直接下载source code压缩包并解压到/blog/themes目录

安装完成后，打开站点的配置文件，找到theme字段，并将其值更改为next

1
theme: next

随后用hexo s本地预览查看，如果看到页面主题发生了变化，那么就表示主题安装成功了。

主题配置

更换scheme

打开主题的配置文件，找到scheme setting，在自己想要的scheme前面取消注释，此处我选择的是Pisces

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

使用中文

在主题的languages文件夹中可以查看该主题支持的语言

img

这里我们使用简体中文zh-CN，将站点配置文件中的language的参数改为zh-CN

1
language: zh-CN

然后重新生成和部署就可以看到效果了

添加分类及标签

刚生成博客的时候，在菜单栏中是看不到标签(tags)和(categories)

avatar

添加“分类”

我们首先创建“分类”选项，在/blog目录下打开命令行，输入

1
hexo new page categories

成功后会提示

1
INFO  Created: xxxx/blog/source/categories/index.md

进入该目录，打开index.md，在data那一行后面添加type: "categories"

1
2
3
4
5
---
title: categories
date: 2018-12-28 15:16:10
type: "categories"
---

保存修改后，你就可以给自己的博文添加分类了，比如我给前一篇《建站历程：安装及部署篇》分类为建站历程

1
2
3
4
title: 建站历程：安装及部署篇
date: 2018-12-28 22:33:46
categories:
- 建站历程

部署完成后，就可以在网站的建站历程分类中找到这篇文章avatar

需要注意的是，Hexo的一篇文章只能属于一个分类，也就是说，如果你在.md文件的开头写上

1
2
3
categories:
- 建站历程
- hexo

这篇文章并不会放在建站历程和hexo两个分类中，而是会被放在建站历程下的hexo嵌套子分类中

添加“标签”

用相似的方法可以创建“标签”项目，打开命令行输入

1
hexo new page tags

随后在生成的index.md中添加type: "tags"

1
2
3
4
5
---
title: tags
date: 2018-12-28 15:16:20
type: "tags"
---

这样，在博文开头就可以添加你想要的标签了，例如在这篇《建站历程：主题美化篇》中，

1
2
3
4
5
title: 建站历程：主题美化篇
date: 2018-12-29 15:52:59
tags:
- Hexo
- Next

我添加了Hexo和Next两个标签，在博客网站的标签栏中，就可以看到你的所有标签

修改作者头像

打开主题的_config.yml配置文件，找到avatar一栏，有两种选择头像文件的方法

使用url链接：

1
2
avatar:
  url: http://xxxx.jpg

或者使用本地的绝对路径：(注意绝对路径是从/blog/source开始的)

1
2
3
avatar:
  /images/avatar.gif
   # in theme directory(source/images):

另外头像还有三个参数：rounded、opacity和rotated

当rounded的值为true的时候，头像会自动取圆，为false时会以正方形显示

opacity的值可以是[0,1]区间内的一个数，数字越大，不透明度越高

当rotated的值为true的时候，每次鼠标放上去，头像都会旋转一周，而为false的时候则没有任何效果

下面是rounded及rotated值均为true，opacity值为1时的效果图：

avatar

修改网站（Favicon）图标

Favicon是favorites icon的缩写，亦被称为website icon（网页图标），也就是你在浏览器中打开网页时，窗口栏里面你网页名称前面的那个图标。

首先我们看一下默认情况下，主题使用的Favicon图标在哪里，打开主题的配置文件，找到Favicon一栏

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

可以看到图标都保存在/themes/next/source/images文件夹里，4个不同的文件分别对应不同情况下显示图标所用的文件。

你可以在图片素材网站中找一个你喜欢的图标（如EsayIcon），下载并保存，注意分辨率要保存16*16、32*32``180*180三个版本，另外你可以在这个网站改变图片的分辨率，在这个网站把png格式的图片转化成svg格式。

方便起见，依然把自己的4个图标文件放在/themes/next/source/images文件夹下，然后修改主题的配置文件，修改路径，分别指向自己的png或svg文件，随后生成并部署博客即可。

参考文献

0%