博客搭建教程导航

文章页Html标签

  有时候我们想在博客文章里添加一些 hexo 不具有的特性时，就可以在 markdown 文件中添加 Html 标签。

  html、CSS 和 js 可以分开写，也分三个文件写，html始终放在 markdown文件里。分开写的话，CSS 和 js 文件要放在主题的源文件路径 /themes/butterfly/source/ 下的的 css 或者 js 文件夹下。在 Markdown 里的语法为：

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="/css/grid.css">
    
<div class="container1">  
    <iframe class="container-iframe" frameborder="0"></iframe>  
</div>

<script type="text/javascript" src="/js/grid.js"></script>

Bilibili视频适配

参考文章：Bilibili视频适配

  1. 在[BlogRoot].css自定义样式的文件中引入如下代码（这是我的，你可以自行微调）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*哔哩哔哩视频适配*/
.aspect-ratio {
  position: relative;
  width: 90%;
  height: auto;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}
  1. 直接复制插入你的 md 文章就行，修改里面的 src 源为你的视频：
1
2
3
4
5
6
7
8
9
10
11
<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid=474023258&&page=1&as_wide=1&high_quality=1&danmaku=0&autoplay=0 " 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> 
    </iframe>
</div>

源视频的链接获取方法为：在b站官网分享视频时，选择 嵌入代码。若要关闭视频自动播放，在后面添加参数：

1
&autoplay=0