以上为本博客自定义div： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201119104955230.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzOTg2OTA=,size_16,color_FFFFFF,t_70#pic_center)

教程开始

此教程涉及到html语法转为pug语法，可进入此转换网站转换为pug语法

转换以后开始第一步自定义div：

在你的blog\themes\butterfly\layout文件夹下新建pug文件(文件名自定义)，将一下代码复制到pug：

（此为自定义div）

1
<iframe width="100%" height="394 " src="https://cybermap.kaspersky.com/cn/widget/dynamic/dark" frameborder="0"></div><div class="recent-post-item" style="width:100%;min-height:600px"><iframe src="//player.bilibili.com/player.html?aid=499578926&amp;bvid=BV1YK411K7Ri&amp;cid=235056114&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen style="height:96.5%;width:97.5%;border-radius:12px 8px 8px 12px;margin:10px"></iframe>

<iframe width="100%" height="394 " （iframe框架宽度可自定义为自己想要的大小）
div class="recent-post-item" style="width:100%;min-height:600px （视频及自定义div宽度可自定义为自己想要的大小）

第二步自定义div：

打开blog\themes\butterfly\layout/index.pug
在这里插入图片描述
然后将一下代码：

1
2
.recent-post-item(style='width:100%;min-height:400px')
   include gongji.pug

粘贴到以下位置：
在这里插入图片描述
（注意空格，pug文件强烈要求tab空格语法）
然后hexo clean hexo g hexo d

以上教程为自定义div效果，下一步开始自定义视频div教程：

在这里插入图片描述

自定义视频div：

打开blog\themes\butterfly\layout/index.pug
将以下代码复制到此位置：

1
2
3
.recent-post-item(style='width:100%;min-height:600px')
   iframe(src='https://hair.jingpin88.com/share/cn3nEgL7rQxgZmmG', scrolling='no', border='0', frameborder='no', framespacing='0', allowfullscreen, style="height:96.5%;width:97.5%;border-radius:12px 8px 8px 12px;margin:10px")
.recent-post-item(style='height:auto;width:100%;border-radius:25px;')

在这里插入图片描述
（注意空格，pug文件强烈要求tab空格语法）
然后hexo clean hexo g hexo d