Enjoy the good lift everyday!
Hexo博文加入原生html+css | PyGo²

Hexo博文加入原生html+css

背景

用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 乌镇之旅 %}
<!-- tab 点点滴滴 -->
<div class="phote-page">
<div class="phote-list">
<div class="phote-column">
<img src="images/fristniupai/1.jpg">
<img src="images/fristniupai/5.jpg">
<img src="images/fristniupai/9.jpg">
</div>
<div class="phote-column">
<img src="images/fristniupai/8.jpg">
<img src="images/fristniupai/2.jpg">
<img src="images/fristniupai/6.jpg">
</div>
<div class="phote-column">
<img src="images/fristniupai/3.jpg">
<img src="images/fristniupai/7.jpg">
<img src="images/fristniupai/11.jpg">
</div>
<div class="phote-column">
<img src="images/fristniupai/4.jpg">
<img src="images/fristniupai/10.jpg">
</div>
</div>
</div>
<!-- endtab -->
{% 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部分用raw-endraw内置tags包起来就可以,示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="timeline">
<div class="timeline-item" date-is='1997/07 ~ 2013/07'>
<div>上学阶段</div>
<p>
书中自有黄金屋,书中自有颜如玉
</p>
</div>
<div class="timeline-item" date-is='2014/03 ~ 2016/06'>
<div>盲目阶段</div>
<p>
一艘没有航行目标的船
</p>
</div>
<div class="timeline-item" date-is='2016/07 ~ 至今'>
<div>追求阶段</div>
<p>
生活的理想就是理想的生活
</p>
</div>
</div>

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

  • 本文作者:mingliang.gao【一个爱老婆的python程序猿。。。。。。】
  • 本文链接: https://gis90.github.io/articles/5369/
  • 版权声明: 本博客所有文章欢迎转载,转载请注明出处!
觉得有帮助,请喝个咖啡
0%