Hexo 博客主题更换和基础配置

简介: Hexo 博客主题更换和基础配置

更换主题

Hexo 启动后,如果发现站点语言不是简体中文,需要到站点配置文件_config.yml 中修改语言为 zh-CN

1.png

下载主题和配置

推荐 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

image.gif

现在就可以启动本地博客预览了,打开 Git Bash 一键三连:hexo cl && hexo g hexo s

image.gif

看到这个界面就是更换主题成功了,看起来依然简陋了些,因为我们还没有对主题做一些配置

主题基础配置

根据 butterfly 官网文档说明,建议将主题配置文件_config.yml 复制一份更名为_config.butterfly.yml 放到站点根目录,以后只需在_config.butterfly.yml 配置即可

image.gif

如果使用了 _config.butterfly.yml, 配置主題的 _config.yml 將不會有效果。

Hexo 會自動合併主題中的_config.yml 和 _config.butterfly.yml 裏的配置,如果存在同名配置,會使用_config.butterfly.yml 的配置,其優先度較高。

更改站点信息

站点信息配置

打开站点配置文件_config.yml,看到如下参数:

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支持多个关键词
author 您的名字
language 站点语言。简体中文用户使用不同主题可能需要设置成不同值。参考你的主题文档,常见的有 zh-Hanszh-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 cleanhexo server 才能生效,否则会有缓存导致界面不生效。hexo d 命令是最后要上传线上部署的命令,本地预览无需每次 hexo d

相关文章
|
5月前
hexo主题集成pug
hexo主题集成pug
30 1
|
6月前
|
安全 JavaScript 前端开发
如何下载博客模板部署在自己的服务器上
如何下载博客模板部署在自己的服务器上
35 0
|
6月前
|
前端开发 算法 JavaScript
hexo博客3:主题选择
hexo博客3:主题选择
81 0
|
10月前
|
数据采集 数据挖掘 Shell
[Hexo]部署博客及更新博文
找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。
|
12月前
|
存储 API 开发工具
Hexo博客功能扩展 - 图床介绍和迁移
上面就是所有的图床使用了,可以看到图床的选择还是很多的,这里不推荐渣浪的库来存自己的图片,比较推荐使用稳定的SM.MS或者路过图床这种比较稳定而且运行时间比较久的网站,并且对于使用用户有比较好的支持
159 0
|
12月前
|
域名解析 网络协议 Shell
hexo博客功能扩展 - 使用七牛云作为图床服务
由于购买的是国外的域名,DNS解析较慢
118 0
|
Shell 开发工具 git
Hexo系列(四) NexT主题配置
Hexo系列(四) NexT主题配置
138 0
|
JavaScript 应用服务中间件 Go
使用Hexo建立一个轻量、简易、高逼格的博客
在之前的一篇文章中,介绍了如何使用Hugo在[三分钟之内建立一个简单的个人博客系统](https://v3u.cn/a_id_81),它是基于go lang的,其实,市面上还有一款类似的静态页生成器,就是Hexo 读音/hækso/ ,它是基于node.js的,和Hugo一样,Hexo 正常来说,不需要部署到我们的服务器上,我们的服务器上保存的,其实是基于在hexo通过markdown编写的文章,然后hexo帮我们生成静态的html页面,然后,将生成的html上传到我们的服务器。简而言之:hexo是个静态页面生成、上传的工具。
使用Hexo建立一个轻量、简易、高逼格的博客
Typecho如何更换主题
本篇文章针对初次使用Typecho搭建博客的朋友们,相信每个Typecho站长都想拥有属于自己的一个个性主题来记录自己的专属时刻,那么新人站长该如何更换主题呢,本篇文章将从以下几个方面来介绍
805 0
Typecho如何更换主题
|
Shell 开发工具 git
关于Hexo使用Next主题的一些优化
肯定还会跟我一样,使用主题之后还不满意的小伙伴,不光想要好,还想要更好! 那就来看看如何优化你的博客,让他变得更富有细节吧 ~