hexo嵌入html传消息的,Hexo博文加入原生html+css

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

背景

用markdown语法去写博文，hexo g会把md转为html，html可被浏览器识别渲染，就形成了大家看到的web。说实话，自学的我，虽然从事IT开发业2年多的经验了，但是要学习还有很多，之前写了一些关于在markdown中加入一些内置tags等方法使博文变得更加美观，可读。但是如果可以把原生html直接嵌入md文件中，这样写md文件就行云流水，而且样式还可以自定义，岂不美哉。

但是，事情往往哪会那么容易，走一步一个坑，花了几天时间才搞定嵌入，如果实现了的请勿看，本人小白，勿怪。

正文

话不多说，直接看例子。

本人开发了一个相册sidebar功能，但是直接用markdown或者img标签去写，样式单一，就算使用gp标签，图片的样式也是很难看。于是把原生的html嵌入到md文件中，代码如下：1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32### 2018-08-05 第一次吃牛排

第一次吃牛排

{% tabs 2018-07-27 乌镇之旅 %}

{% endtabs %}

写完md文件之后，查看页面，发现还是难看，因为没有加入样式，一般都嵌入html的地方都是指定的开发部分，所有给div标签命名一个id最合适，方便写css样式，把个性化的css的样式写入自动样式文件：blog/theme/next/source/css/_custom/custom.styl，增加对应的代码：1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24// 相册自定义样式

.phote-list {

display: flex;

flex-direction: row;

flex-wrap: nowrap;

align-items: flex-start;

}

.phote-list img {

border-radius: 35px;

// width: 320px;

// height: 230px;

padding: 6px;

background-color: #909497;

margin: 0px 0px 0px 0px;

box-shadow: 15px 15px 15px rgba(50, 50, 50, 0.99);

transition: all 1s ease-in;

}

.phote-list img:hover {

box-shadow: 35px 35px 35px rgba(50, 50, 50, 0.8);

transform: rotate(0deg) scale(1.6);

background-color: black;

padding: 15px;

z-index: top;

}

在css样式中，我对图片加了一个鼠标滑过放大的动画，既然可以自定义样式，加什么特效都随你了。

最后，重启服务hexo g && Hexo s，刷新页面就会看到效果。

问题引入原生的html标签，发现hexo g之后，在生成的.html页面，在div标签会自动加入br标签，导致有些特效出现问题

坑

一开始趟坑的时候，天真的我居然以为可以把原生的html直接粘贴复制到md文件中就可以了。。。。。。结果，哈哈我真是太天真了。不过后来尝试把样式放到自定义文件中，把样式与标签分离，没想到成功了。不管怎么样，记录下来，希望能帮到他人。