【4】详细记录大学生自学搭建个人网站全过程，从0开始到小有成果

　　接上文，我们已经能通过ip地址访问到云服务器部署的hexo网站了，但是默认的页面是有点简陋了，我们对hexo更换Butterfly主题并进行一些必要的配置。

cef518d1-bd25-44b3-a8dc-332a0b5dac62

7 更换成Butterfly主题和基础设置

　　在hexo的众多主题中，butterfly可能是最适合初学者使用的主题了，因为他简洁、美观、成熟、教程丰富、易于上手。这里还是老规矩，先展示本文参考的教程帖子。

序号 标题 链接 备注
1 Hexo搭建Butterfly主题并快速美化 https://blog.csdn.net/mjh1667002013/article/details/129290903# 非常推荐的Butterfly入门帖
2 Butterfly官网 Butterfly - A Simple and Card UI Design theme for Hexo Butterfly官方网站，有官网教程
3 Butterfly安装文档(三)主题配置-1 Butterfly安装文档(三)主题配置-1 - 知乎 (zhihu.com) 比较全面详细
4 Hexo butterfly 自定义文章封面 && 主页顶部图片更改 Hexo butterfly 自定义文章封面 && 主页顶部图片更改_hexo top-img-CSDN博客 可以参考

7.1 安装Butterfly

　　在你的Hexo博客根目录里，博主是D:\MyHexoBlogs\myblogs右键打开Git Bash，输入以下命令安装：

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

　　安装pug和stylus渲染器。

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

　　文件结构和各部分作用如下所示：

image-20240415145320052

　　修改项目根目录下的_config.yml文件，开启主题。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
91aadee10de7d5bfba9b9c8521d4837

　　为了减少升级主题后带来的不便，请使用以下方法。

　　把主题文件夹中的 _config.yml 重命名为 _config.butterfly.yml，复制到 Hexo 根目录下与_config.yml同级。

　　Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ，如果存在同名配置，会使用__config.butterfly.yml 的配置，其优先度较高。一些固定资料可以设置在_config.yml中，比如网站的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 _config.butterfly.yml 中。

　　保存config文件后，我们在Git Bash中输入以下代码来重启更新。

$ hexo clean
$ hexo g
$ hexo d

7.2 设置网站标题

　　打开_config.yum，找到以下部分，下面是一些可修改的项目：

title: 网站标题（必填）
subtitle: 网站副标题
description: 网站描述
keywords: 关键字
author: 站长名称（必填）
language: zh-CN
timezone: Asia/Shanghai

　　比如博主此时的_config.yum修改成这样：

a1d77995de29413aebbfc20405eeef3

　　对应的网页部分是这样：

665f1dbdc8adcc67239868ee822e485 7c3b1b866103bbe44b0019683cb08df 372c021f55461c3ea58de1802220b88

7.3 设置顶部导航栏

　　在_config.butterfly.yml中设置，直接把Menu部分替换成如下即可，如果不想出现某一块就注释掉这一行。

menu:
  主页: / || fas fa-home
  博文 || fa fa-graduation-cap:
    分类: /categories/ || fa fa-archive
    标签: /tags/ || fa fa-tags
    归档: /archives/ || fa fa-folder-open
  生活 || fas fa-list:
    分享: /shuoshuo/ || fa fa-comments-o
    相册: /photos/ || fa fa-camera-retro
    音乐: /music/ || fa fa-music
    影视: /movies/ || fas fa-video
  友链: /links/ || fa fa-link
  留言板: /comment/ || fa fa-paper-plane
  #留言板: /messageboard/ || fa fa-paper-plane
  关于笔者: /about/ || fas fa-heart

　　对应的网页部分是这样：

199c52758e54d872d9f150d1b6a8d83

7.4 代码块显示设置

　　在_config.butterfly.yml中设置，找到以下区块并修改。

highlight_theme: light  #  有darker / pale night / light / ocean / mac / mac light / false 代码主题可选
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条

　　同时把_config.yml的highlight添加enable:false。（这一步博主测试过好像不改也不影响）

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

7.5 本地搜索

　　在Git Bash中安装搜索hexo本地搜索插件。

$ npm install hexo-generator-search --save

　　在配置文件_config.butterfly.yml中把local_search的enable改为true。

# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

　　配置完成后如下所示：

11e60f3f4fb8d2e2f1a9bc88894dc2a

7.6 修改主页打字效果的副标题

　　在配置文件_config.butterfly.yml中按照如下修改，loop给上true之后，就滚动播放sub里面小标题内容。

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  loop: true
  typed_option:
  # source 调用第三方网页的句子
  source: 1
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  # source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 永远年轻，永远热泪盈眶
    - 好好学习，天天向上
    - 要记得好好生活哦~

　　博主稍作修改之后，出来的效果这样的：

6b8889a31c9125e52bfe19ceb31d218

06385294d687886e9d343ae69906043d833e338baecb39f05510321e37c496

7.7 图片相关

　　图片是个人博客的难点，这里先写一些基础的图片设置，等下几篇再说难的图片设置。

　　图片可以用云链接或者放在本地路径：/themes/butterfly/source/img中，修改主题配置文件_config.butterfly.yml。

　　tips：图片路径最好不要出现中文。

1、网站logo：
favicon: /img/favicon.png

2、头像
avatar:
  img: /img/avatar.jpg #图片路径
  effect: false #头像会一直转圈 
  
3、【首页】背景图
index_img: /img/background.jpg

4、【文章详情页】的默认顶部大图
#当没有在front-matter设置top_img和cover的情况下会显示该图
default_top_img: /img/default_top_img.jpg

5、【归档页】顶部大图
archive_img: /img/archive.jpg

6、【标签页】顶部大图
tag_img: /img/tag_img.jpg

7、【分类页】顶部图大图
category_img: /img/category_img.jpg

8、默认的文章封面
cover:
  index_enable: true #  是否展示文章封面
  aside_enable: true
  archives_enable: true
  position: both # 封面展示的位置 left/right/both
  # 当没有设置cover时，默认展示的文章封面
  default_cover:
    # 当配置多张图片时，会随机选择一张作为 cover
    
9、如果为每一篇文章设置不同的封面，可以在各自的.md文件头部手动添加配置
---
title: Hello World        # 标题
tags: [hello]             # 标签
categories:               # 分类
description: hello word~  # 描述
top_img: /img/hello-1.png # 顶部背景图
cover: /img/hello-1.png   # 文章封面
---

10、异常图片
#配置了该属性后会替换无法展示的图片
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

　　tips：博主在这里踩过坑，当设置文章封面和顶图时，想把图片的路径改在博客.md文件所在的同名文件夹内，但都发现无法访问，所以还是按照上面的代码段把图片放在/themes/butterfly/source/img中，如果采用远程连接直接放网址即可。

　　下载网上图片的话可以用浏览器插件，博主推荐用【图片助手ImageAssistant】组件来下载清晰的图片。这里博主也放一些可能用到的素材网站，当然大家用自己的设计是最好的！

序号 标题 链接 备注
1 阿里巴巴矢量图库 https://www.iconfont.cn/ 五星推荐，可以找到喜欢的logo和网页插图！
2 CNU视觉联盟 首页 - CNU视觉联盟 国内的一个综合类摄影网站，界面简洁，主要分为两个板块灵感&原创。
3 天空之城 https://www.skypixel.com/ 可以找到一些优秀的航拍作品。

　　之后我们介绍图片懒加载，就是图片在还没加载出来的时候，出现一个转圈圈的动图。

　　在你的Hexo博客根目录里打开Git Bash，新增hexo-lazyload-image模块。

$ npm install hexo-lazyload-image --save

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

lazyload:
  enable: true
  loadingImg: /img/loading.gif
98980b6b-c419-4ab4-8a55-5f2af02debd2 c46bbc11-c4af-4bae-94f6-88dd3c4e5f60

　　最后我们设置图片可以点击放大查看，以为很多时候图片是被缩小的，特别在手机端肯定会看不清信息，在_config.butterfly.yml中修改。

medium_zoom: false
fancybox: true

　　这个效果你随便点击一个图片就能看到。

7.8 版权信息

　　修改主题配置文件_config.butterfly.yml的enable为true，这样复制的文字就会在超过一定长度后加上版权信息。

# copy settings
# copyright: Add the copyright information after copied content
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: false  # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

　　文章版权信息的enable改为true，这样就可以在这个页面下方看到版权信息啦。

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

　　tips：对CC系列知识共享许可证的理解及整理(CC BY-NC-SA 4.0的使用方法)，可以参考对CC系列知识共享许可证的理解及整理(CC BY-NC-SA 4.0的使用方法)-CSDN博客。

　　Okk，至此我们就更换好了主题，做好了基础的美化工作，下一节我们开始正式上传文章！

9099cbf3-299c-4f74-935c-a4a97c133f67