hexo添加_在Hexo中添加Html属性功能

1 写在前面

众所周知，Hexo网站的整体样式、风格由主题Theme预先确定，Markdown文件中主要专注于文章内容的编写，经过Hexo渲染后形成静态html页面。但是，Hexo并没有限制博主通过在MD文件中增加Html、JavaScript等代码来实现除Markdown语法以外的功能，比如实现Button、Tabs、Menu、Navigation等静态Html常用的功能，本文将通过在Markdown中增加Tabs页为例子介绍实现方法，使得非技术人员也可以在Blog中实现很多出彩的功能。

2 达到效果

如：在某篇文章中作三个不同的城市简单介绍，通常使用无序列表或者表格的方式，这次我们采用Tabs方式(效果如下)。

Tabs

Click on the buttons inside the tabbed menu:

London

Paris

Tokyo

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

3 实现方式

技术实现主要是使用Hexo的Raw标签和html语法，只需要在Markdown文件中编辑即可。

3.1 使用Raw标签

Hexo提供Raw标签，用于实现在MD文件中添加不需要Hexo渲染的代码，Hexo会将Raw标签中的内容直接复制到html文件中。Hexo官网Tag Plugins介绍。使用时将我们编辑的html代码替换标签中的content即可。

1

2

3{% raw %}

content

{% endraw %}

3.2 实现Tabs的html代码

为了体现html的规范性，我从w3schools.com获取的Tabs代码，大家可以拷贝w3schools中的例子代码，按照自己的内容修改即可，下面是本次例子的代码，大家直接拷贝粘贴到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

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83{% raw %}

body {font-family: Arial;}

/* Style the tab */

.tab {

overflow: hidden;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

/* Style the buttons inside the tab */

.tab button {

background-color: inherit;

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

transition: 0.3s;

font-size: 17px;

}

/* Change background color of buttons on hover */

.tab button:hover {

background-color: #ddd;

}

/* Create an active/current tablink class */

.tab button.active {

background-color: #ccc;

}

/* Style the tab content */

.tabcontent {

display: none;

padding: 6px 12px;

border: 1px solid #ccc;

border-top: none;

}

Tabs

Click on the buttons inside the tabbed menu:

London

Paris

Tokyo

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

function openCity(evt, cityName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " active";

}

{% endraw %}

4 写在最后

以上通过Tabs例子实现在MD中增加html功能，大家也可以拓展实现JavaScript等脚本语言功能。

参考资料：

Hexo官网Tag Plugins标签Tag Plugins

W3schools官网html代码w3schools.com