目前通过域名访问样式
继上回通过域名访问到我们的Hexo博客,之后优化博客样式。
Hexo是有丰富的主题列表,可以在官方文档找自己喜欢的主题。
主题列表
主题推荐
主题列表中我目前是看到两个主题比较吸引人分别拉下来试了一下,效果都不错,
Butterfly主题
Butterfly样式
Butterfly 官网地址 —— themes-butterfly Git地址 /themes-butterfly Gitee地址
![]() |
![]() |
安装
在你的 Hexo文件夹里的themes新建文件夹butterfly,进入文件夹中拉去butterfly主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git
应用主题
修改 Hexo 根目录下的 _config.yml,把主题改为 butterfly
theme: butterfly
安装插件
如果你没有 pug 以及 stylus 的渲染器,请下载安裝:
npm install hexo-renderer-pug hexo-renderer-stylus --save
下载之后,预览主题
hexo clean //清理缓存
hexo d //构建项目
hexo s //预览项目
展示链接
默认没有图片是蓝色的,需要自己下载图片在_config.butterfly.yml
里修改
(注意:图片资源放到\themes\butterfly\source\img
,避免hexo clean
清除掉资源)
#首页主题照片
index_img: /img/index.jpg
# Favicon(网站图标)
favicon: /img/favicon.png
# Avatar (头像)
avatar:
img: /img/logo.jpg
effect: false
#博客资料配置项 Site
title: QG Liu # 标题
subtitle: '20191222' #title文案
description: '山高自有客行路,水深自有渡船人。' #浮动文案
keywords:
author: QG Liu #作者名称
language: zh-CN #语言
运行效果
升级建议
为了避免之后拉最新的Butterfly
主题更新覆盖掉 _config.butterfly.yml
文件,建议在根目录复制一份 _config.butterfly.yml
,并把主题目标的 _config.yml
內容复制到 _config.butterfly.yml
去( 注意: 复制的是主題的 _config.yml
,而不是 hexo 的 _config.yml
)
Acrylic
![]() |
![]() |
git clone -b main https://github.com/hexo-theme-Acrylic/Hexo-Theme-Acrylic-Next.git
应用主题
修改 Hexo 根目录下的 _config.yml,把主题改为 Acrytic
theme: Acrytic
站点信息配置
-config.yml
文件配置基础信息
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: QG Liu
language: zh-CN
timezone: ''
_config.Acrytic.yml
配置站点信息
# 站点设置
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样式预览
升级建议
为了避免之后拉最新的Acrytic
主题更新覆盖掉 _config.Acrytic.yml
文件,建议在根目录复制一份 _config.Acrylic.yml
,并把主题目标的 _config.yml
內容复制到 _config.Acrylic.yml
去( 注意: 复制的是主題的 _config.yml
,而不是 hexo 的 _config.yml
)
到这里主题相关配置就结束啦,祝大家搭站顺利!🎈欢迎大家来互踩~