更换主题
Hexo 启动后,如果发现站点语言不是简体中文,需要到站点配置文件_config.yml
中修改语言为 zh-CN
下载主题和配置
推荐 butterfly 主题,官网地址
根据官网文档给出的命令安装:git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
下载渲染器:npm install hexo-renderer-pug hexo-renderer-stylus --save
接着来到站点配置文件,最下面配置主题为 butterfly
现在就可以启动本地博客预览了,打开 Git Bash 一键三连:hexo cl && hexo g hexo s
看到这个界面就是更换主题成功了,看起来依然简陋了些,因为我们还没有对主题做一些配置
主题基础配置
根据 butterfly 官网文档说明,建议将主题配置文件_config.yml
复制一份更名为_config.butterfly.yml
放到站点根目录,以后只需在_config.butterfly.yml
配置即可
如果使用了 _config.butterfly.yml, 配置主題的 _config.yml 將不會有效果。
Hexo 會自動合併主題中的_config.yml 和 _config.butterfly.yml 裏的配置,如果存在同名配置,會使用_config.butterfly.yml 的配置,其優先度較高。
更改站点信息
站点信息配置
打开站点配置文件_config.yml
,看到如下参数:
参数 | 描述 |
title | 网站标题 |
subtitle | 网站副标题 |
description | 网站描述 |
keywords | 网站的关键词。支持多个关键词 |
author | 您的名字 |
language | 站点语言。简体中文用户使用不同主题可能需要设置成不同值。参考你的主题文档,常见的有 zh-Hans 和 zh-CN |
timezone | 网站时区。默认您的电脑时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai。 |
其中,description 主要用于 SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。 | |
更多站点配置可以参考 Hexo 官网文档 |
主题基本配置
更换网站图标
打开_config.butterfly.yml
配置文件,找到 favicon: /img/favicon.png
。上传一张站点图标到 themes/butterfly/source/img
下,并在配置文件中 favicon 指定图标路径,例如 favicon: /img/coding.png
更换头像
找到 img 参数,设置图片的 url 即可
avatar: img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png effect: false
侧边栏设置
修改网站公告
card_announcement: enable: true content: 欢迎来到我的博客
设置 GitHub 链接
button: enable: true icon: fab fa-github text: 欢迎访问的GitHub link: https://github.com/gaolengjun
开启标签颜色
card_tags: enable: true limit: 40 # if set 0 will show all color: true
开启预加载
instantpage: true
开启图片懒加载
lazyload: enable: true field: site # site/post placeholder: blur: true
开启特效
开启彩带动画
canvas_fluttering_ribbon: enable: true mobile: false
开启背景特效
canvas_nest: enable: false color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) opacity: 0.7 # the opacity of line (0~1), default: 0.5. zIndex: -1 # z-index property of the background, default: -1. count: 99 # the number of lines, default: 99. mobile: false
将 enable
的参数值改 true
则开启效果
开启鼠标点击特效
activate_power_mode: enable: false colorful: true # open particle animation (冒光特效) shake: true # open shake (抖動特效) mobile: false # Mouse click effects: fireworks (鼠標點擊效果: 煙火特效) fireworks: enable: false zIndex: 9999 # -1 or 9999 mobile: false # Mouse click effects: Heart symbol (鼠標點擊效果: 愛心) click_heart: enable: false mobile: false # Mouse click effects: words (鼠標點擊效果: 文字) ClickShowText: enable: false text: # - I # - LOVE # - YOU fontSize: 15px random: false mobile: false
将 enable
的参数值改 true
则开启效果
页面美化
beautify: enable: true field: post # site/post title-prefix-icon: '\f0c1' title-prefix-icon-color: '#F47466'
开启副标题打字效果
subtitle: enable: true # Typewriter Effect (打字效果) effect: true
开启加载动画
preloader: enable: true
开启背景图
background: url(https://img.picgo.net/2023/03/08/pexels-jess-loiterton-43210692d969838a3e3cd38.jpeg)
设置顶部 banner 图
index_img: 'https://img.picgo.net/2023/03/08/pexels-simon-berger-13235508ef90135cadcb226.md.jpeg'
默认文章封面
default_cover: - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg - https://img.picgo.net/2023/03/08/pexels-cottonbro-studio-3661244af70966fb4b7b24e.jpeg
就介绍这么多主题基础配置,更多功能开关可以更改 enable
参数为 true
打开,自行探索。每次修改主题后一定要 hexo clean
再 hexo server
才能生效,否则会有缓存导致界面不生效。hexo d
命令是最后要上传线上部署的命令,本地预览无需每次 hexo d