超长前言：

友友们看了那么多教程或许已经有了自己 DIY 的想法，开始对其他博主美化魔改教程有了自己的认知和理解，或者想按照自己的审美来改，但却又无从下手，没有思绪，本篇就给博客新人们分享下经验思路，涨涨姿势，早日脱离美化魔改的苦海。（本篇仅针对Butterfly 主题，其它主题的友友们仅供参考噢）

美化魔改虽说比较费时费力，但能看到最终效果还是能令人开心一整天。但过度沉迷于美化魔改之中，有些违背搭建博客的初衷，其实博客是用来分享、记录知识的一个载体，在美化魔改上所花的时间应远少于在文章上的。可是不经历乘风破浪怎能返璞归真？传统功夫点到为止，咋们开始吧！

H2美化魔改是什么？

美化指的是使博客外观更加好看，一般是对 css、styl 样式文件的更改。

魔改指的是对博客源码的更改，通常会更改布局框架的结构，其中我认为魔改包含了美化。

两者的区别：美化通常不用改源码，只需更改自定义插入的样式代码，而魔改则需要更改源码。

魔改的缺点是主题升级后，魔改的地方都会被更新后的代码给覆盖，重新魔改一遍很麻烦，所以我建议升级的时候可以按照 GitHub 上源码的版本对比功能来一点一点更新代码。

H2自定义美化魔改技巧

前提：对 html、css、js 有一定的了解，最好有系统的学习，会使你事半功倍。

本栏分享的技巧包括自定义美化魔改、如何模仿他人网站的布局、样式、动态功能。

1. 善用F12

   F12通常用于对 css 样式的捕捉定位。你看到别人网站某个地方很好看，可以按下F12键，用鼠标定位到那里，将会弹出一个代码框，左栏是 html 代码，右栏是与选中元素对应的相关 css 代码以及全局通用 css 代码，将对应代码粘在自定义 css 文件里即可。若本地渲染后没有效果，可能是样式定位失败或者代码语法错误。

2. 善用Ctrl + U

   Ctrl + U用于查看当前网页的源码（并非整个博客源码），再按下Ctrl + F搜索例如像.js的关键词，即可查看博主在该页面使用到的 js 代码，逐个打开看或者“见名知意”来选择性的打开，这样有助于快速定位到网页对应板块使用到的 js 代码，除了搜索.js你也可以搜索.css、.png、.jpg等关键词来获取相应文件，当然使用时先得遵守各位博主的版权协议。

3. 有时候想调整页面布局，通常是更改 pug 源码，pug 是种类似于 html 的代码语言。若你想调整某板块的布局，先用 F12 获取它的 class 或 id，通过在代码编辑器里搜索关键词定位到 pug 源码，做适当更改，严格注意代码的缩进，Hexo 三连后即可看到效果。

4. 最后，你的模仿能力和英语不至于太差。善于模仿代码语言的编写格式和能直接通过英文看懂代码含义，有助于你去美化魔改，很适合像我这种对语言不熟但又想改它的人。比如，我将 fontawesome 图标换成阿里图标后，发现它不能旋转，于是我在 vscode 代码编辑工具里全局搜索360，就搜到了类似于(-100px) rotate(-360deg)的代码，通过英文意思能大概知道是旋转 360 度的功能，但据观察推测，styl 和 css 应该是差不多的语言，只是语法不同，而且 styl 单词长得像 style 单词？于是我将该部分代码移植到对应处，效果就有了，建议友友们多思考多实践。

注意：第 4 条是一个跳过编程语言学习、走捷径的方法（耍小聪明），在此仅提供思路，不具有普适性也不推荐，还是建议深入了解前端知识，有想法有能力者最好系统学习下，毕竟磨刀不误砍柴工嘛（严肃）。

H2如何添加自定义 css、js 代码

修改<BlogRoot>\themes\butterfly\_config.yml或<BlogRoot>\_config.butterfly.yml（如果你创建了）的代码

结束语：

如果你很多概念看不懂的话，建议百度深入了解、系统学习。如果哪个地方表述有问题，欢迎留言！