Blog Building

前言：之前一直想搭个博客，但是本身自己专业也不是学计算机的，从0开始搭建网站对于我的学习成本较高，就不了了之了，偶然发现了基于hexo框架+github的方式来搭建博客，参考了很多教程及视频，不是一帆风顺，也有好几次要放弃了，最后还是遇到问题就解决问题，到网上查资料，经过几天的努力,最后搭建了这个博客，目前差不多是个雏形，后面还会继续优化，在此写下这篇文档，记录下当时参考的一些资料文档。

博客搭建

参考教程

http://t.csdnimg.cn/ocJp5

http://t.csdnimg.cn/8707P

基础命令

hexo clean  //清除缓存文件（包括生成的静态文件和草稿）。

hexo g 	    //生成静态文件，即将你的文章、页面等转换为 HTML 等静态文件。
    
hexo s		//启动服务器，用于预览博客效果。

hexo d		//部署博客到指定的服务器，比如 GitHub Pages 或者 CSDN 等。

主题美化

参考教程：

https://butterfly.js.org/

https://blog.csdn.net/mjh1667002013/article/details/129290903

【使用Hexo搭建个人博客手摸手教学(8)|butterfly主题页面配置】 https://www.bilibili.com/video/BV1Fb4y1r7ja/?share_source=copy_web&vd_source=4eaa4760820b4cda603e510d556578ac

【【Hexo】2023年零基础玩转Hexo全网最全系列】 https://www.bilibili.com/video/BV1QD4y1F7pc/?share_source=copy_web&vd_source=4eaa4760820b4cda603e510d556578ac

常用功能

新建文章

1	hexo new post "我的第一篇博客" //新建一篇文章。

然后打开D:\Hexo\source\ _posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。
你可以会直接在vscode里面编写这个markdown文件，可以实时预览，也可以用用其他编辑md文件的软件的工具编写。
编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

导航栏

修改主题配置文件 _config.butterfly.yml（在你用的那个主题的文件夹里的config文件修改）

menu:
  menu: / || fas fa-home
  archives: /archives/ || fas fa-archive
  tags: /tags/ || fas fa-tags
  categories: /categories/ || fas fa-folder-open
  list||fas fa-list:
    link: /link/ || fas fa-link
    about: /about/ || fas fa-heart
  Picture: /gallery || fa-solid fa-image

最左侧的即是展示在网站右上侧的导航栏的各栏的名称,右边是对应的md文件,可以在其中修改该界面的信息

title: zhixiong's page	//网页标题
date: 2024-01-25 20:30:52
type: "tags"
top_img: "./images/3.jpg" //该网页最上方的图片

然后后面的fa fa-link这种，是导航栏各个栏目的图标, 以及侧方个人信息栏社交图标，可在https://fontawesome.com/ 查找使用。

图像

上传图像

网页图像

例 archive_img: http://www.xf5z.com/uploads/2013010764676533.jpg (右键图片，点击复制图片地址)

本地图像

index_img: “./images/1.jpg” (在source里建了个images文件夹，里面存放图片)

Typora与hexo图片上传问题

https://www.cnblogs.com/yinyoupoet/p/13287385.html

相册

https://www.bilibili.com/video/BV1Fw411Q7pS/?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click&vd_source=a9d487fcf1a579639c6348eb5a9321db

https://butterfly.js.org/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A%E5%9C%96%E5%BA%AB

https://blog.csdn.net/qq_45173404/article/details/122877378

取消当前页面评论:

在md文件中加上comments: false

音乐播放器

https://butterfly.js.org/posts/507c070f/?highlight=apla

自定义侧边栏

https://butterfly.js.org/posts/ea33ab97/#widget-%E6%8E%92%E5%BA%8F

动态彩带

好看的彩带背景，会飘动。
修改主题配置文件_config.butterfly.yml。

canvas_fluttering_ribbon:
  enable: true
  mobile: true # false 手机端不显示 true 手机端显示

文章分类

http://t.csdnimg.cn/Uc0Uy

把文章归入分类只需在文章的顶部标题下方添加categories字段，即可自动创建分类名并加入对应的分类中。