@TOC

目前通过域名访问样式

目前样式
继上回通过域名访问到我们的Hexo博客，之后优化博客样式。
Hexo是有丰富的主题列表，可以在官方文档找自己喜欢的主题。
主题列表
主题列表

主题推荐

主题列表中我目前是看到两个主题比较吸引人分别拉下来试了一下，效果都不错，

Butterfly主题

Butterfly样式

Butterfly 官网地址 —— themes-butterfly Git地址 /themes-butterfly Gitee地址

Butterfly模板样式#1
Butterfly模板样式#2

安装

在你的 Hexo文件夹里的themes新建文件夹butterfly，进入文件夹中拉去butterfly主题

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

1
theme: butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安裝：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

下载之后，预览主题

1
2
3
hexo clean    //清理缓存
hexo d        //构建项目
hexo s        //预览项目

展示链接
默认没有图片是蓝色的，需要自己下载图片在_config.butterfly.yml里修改
（注意：图片资源放到\themes\butterfly\source\img,避免hexo clean清除掉资源）

1
2
3
4
5
6
7
8
#首页主题照片
index_img: /img/index.jpg
# Favicon（网站图标）
favicon: /img/favicon.png
# Avatar (头像)
avatar:
  img: /img/logo.jpg
  effect: false
1
2
3
4
5
6
7
#博客资料配置项 Site
title: QG Liu   # 标题
subtitle: '20191222'  #title文案
description: '山高自有客行路，水深自有渡船人。' #浮动文案
keywords:
author: QG Liu   #作者名称
language: zh-CN   #语言

运行效果
butterfly样式展示

升级建议

为了避免之后拉最新的Butterfly主题更新覆盖掉 _config.butterfly.yml文件，建议在根目录复制一份 _config.butterfly.yml，并把主题目标的 _config.yml 內容复制到 _config.butterfly.yml 去( 注意: 复制的是主題的 _config.yml ，而不是 hexo 的 _config.yml)

Acrylic

Acrylic模板样式#1
Acrylic模板样式#2
### 安装 在你的 Hexo文件夹里的themes新建文件夹acrytic，进入文件夹中拉去acrytic主题 
1
git clone -b main https://github.com/hexo-theme-Acrylic/Hexo-Theme-Acrylic-Next.git

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 Acrytic

1
theme: Acrytic

站点信息配置

-config.yml文件配置基础信息

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: QG Liu
language: zh-CN
timezone: ''

_config.Acrytic.yml配置站点信息

1
2
3
4
5
6
7
8
# 站点设置
site:
  name:                   # 左上角显示内容
    class:  text          #i_class/text/img 
    custom: QG Liu       #自定义内容
  siteIcon: /img/avatar.webp # 网页icon
  icon: /img/avatar.webp     # 页脚的icon、加载动画默认的icon
  icp:                       # ICP

Acrylic样式预览

Acrylic样式

升级建议

为了避免之后拉最新的Acrytic主题更新覆盖掉 _config.Acrytic.yml文件，建议在根目录复制一份 _config.Acrylic.yml，并把主题目标的 _config.yml 內容复制到 _config.Acrylic.yml 去( 注意: 复制的是主題的 _config.yml ，而不是 hexo 的 _config.yml)

到这里主题相关配置就结束啦，祝大家搭站顺利！🎈欢迎大家来互踩~