hexo个人博客搭建(二)butterfly主题配置

   日期:2024-12-26    作者:b933732 移动:http://oml01z.riyuangf.com/mobile/quote/49101.html

一、回顾安装butterfly主题

1、在hexo项目根目录下执行操作clone主题

hexo个人博客搭建(二)butterfly主题配置

 

2、如果沒有 pug 以及 stylus 的渲染器,还需要下载,否则在项目运行时会报错

 

3、修改项目根目录下的_config.yml文件(称为站点配置文件,开启主题

 

4、升级建议

为了減少升级主题带来的不便,我们还需要做以下操作
把主题文件夹中的 复制到 Hexo 根目录下,同重命名为

Hexo会自动合并主题中的和 里的配置,如果存在同名配置,会使用的配置,其优先度较高。

二、设置网站个人资料

修改根目录下的站点配置文件_config.yml

修改网站各种资料,例如标题、副标题和邮箱等个人资料

 

主题支持三种语言

  1. default(en)
  2. zh-CN (简体中文)
  3. zh-TW (繁体中文)

三、导航菜单

修改主题配置文件

 
 

四、代码块显示设置

1、highlight_copy

开启代码复制功能, 修改主题配置文件

 
2、highlight_shrink
  • true 全部代码框不展开,需点击 打开
  • false 代码狂展开,有 点击按钮
  • none 不显示 按钮
    修改主题配置文件
 
3、code_word_wrap

在默认情况下, 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话,可以开启代码换行

 
4、我的
 

站点配置文件:将line_number的值改为false

 
5、效果图

五、本地搜索功能

1、安装插件

 

2、主题配置文件

 

3、效果图

六、创建文件夹

1、分类

 

会出现source/categories/index.md文件

2、标签

命令行输入

 

会出现文件

…以此类推创建自己要的子页面

七、修改副标题

1、修改主题配置文件 :
 
2、副标题字体大小颜色

在 hemesbutterflysourcecss_layout中的head.styl:

 

效果图:sub句子轮流出现

八、图片设置

图片可以用云图片链接或者放在本地文件夹位置:/themes/butterfly/source/img

1、网站图标
 
2、头像
 
3、主页封面图片
 
4、文章详情页的顶部图片

当没有在设置和的情况下会显示该图
修改主题配置文件

 
5、归档页顶部图片
 
6、tag页顶部图
 
7、category页顶部图
 
8、文章封面

每篇文章都可以设置一张封面,可以为每篇文章设置默认封面

也可以修改每个md文件的front-matter的cover属性,会覆盖上面的默认封面。修改主题配置文件_config.butterfly.yml

 
9、错误页面

配置了该属性后会替换无法展示的图片

 

效果图

九、图片懒加载

1.新增hexo-lazyload-image模块

 

2.在主目录配置文件_config.yml增加配置

 

这个就是图片没加载出来的时候,出现一个动图转转转的文章页样式

十、图片大图查看

修改主题配置文件

 

十一、文章页样式

以下修改主题配置文件

1、复制的内容后面加上版权信息
 
2、文章版权信息

在底部会出现对应的作者、链接、声明

 

效果图

3、相关文章

在文章最下面出现推送

 
4、打赏

给文章结尾设置打赏按钮,可以放上收款二维码

 

效果图

十二、侧边栏样式

以下修改主题配置文件

1、调整侧边栏出现位置
 
2、个人信息
 
 
 
3、公告栏设置
 
4、Toc目录
 
 

十三、特效/美化

以下均为修改主题配置文件 :

1、鼠标点击的效果

有冒光特效、烟火特效、爱心特效、文字特效,选择其中一个将设置为true就可以

 
2、打字效果
 
3、自定义主题色

可以修改部分的UI颜色

 
4、网站背景

默认显示白色,可设置图片或者颜色
修改主题配置文件

 

我的修改为渐变色,步骤

(1)在目录下创建css文件

可以自己调色

 

(2)修改配置文件的引入方式

 

(3)如果背景色不生效,设置

 
 
5、footer 背景

footer 的背景,当设置 时,将与主题色一致。
修改主题配置文件

 
6、背景特效

有三种,自己选择开启,将设置为true就可以

修改主题配置文件

 

十四、字数统计

1、项目目录右键打开 Git Bash Here,

2、npm install hexo-wordcount --save yarn add hexo-wordcount

3、修改主题配置文件

 
 

十五、文章分享功能

、、三个选一个开启

addThis官网:https://www.addthis.com/


 

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号