Hexo创建个人博客#05:小技巧收集

博客样式

1. 修改文章底部的带#号的标签1

修改之后样式
  • 打开themes/next/layout/_macro/下的post.swig文件,搜索rel="tag">#,将 # 换成<i class="fa fa-tag"></i>
1
2
3
4
5
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>

2. Next主题下让页脚的heart-icon跳动起来

使用NexT主题后,默认的页脚icon会变成user。可以去Font Awesome自行查找替换。

在next文件下的主题配置文件中,找到footer,把icon后面替换成你在Font Awesome上找到的图标的名字就ok了(不必带 fa- 前缀)。

那么如何让页脚的❤icon跳动起来呢?

首先修改主题配置文件

文件位置:~/hexo/themes/next/_config.yml

1
2
footer:
icon: user修改成heart

然后修改footer.swig

文件位置:~/hexo/themes/next/layout/_partials/footer.swig

1
<span class="with-love">修改成<span class="with-love" id="heart">

接着编辑custom.styl

文件位置:~/hexo/themes/next/source/css/_custom/custom.styl

在其中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
\#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(0, 0, 0);
}

其中color的值可以改成你自己喜欢的。

效果请参照博客底部

3. Hexo上给文章添加脚注

首先安装hexo-footnotes插件,进入站点根目录

npm install hexo-footnotes --save

如果hexo可以自动检测所有插件,则不需要修改_config.yml,如果不能自动检测,那么在在站点配置文件中增加:

1
2
plugins:
- hexo-footnotes

安装完成后按官方readme的方式书写。

basic footnote2

and another one3

here is an inline footnote4

注脚的内容最好放在文章的最后面,否则可能会出错误。

文章书写样式

1. 文字增加背景色块

文本书写显示背景色块样式
  • 打开themes/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
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
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
  • 在你需要编辑的文章地方。放置如下代码:
    <span id="inline-blue"> 站点配置文件 </span>
    <span id="inline-purple"> 主题配置文件 </span>
    <span id="inline-yellow"> 站点配置文件 </span>
    <span id="inline-green"> 主题配置文件 </span>
  • 俺们成功啦!

2. 下载样式

文本内下载样式展现
  • 打开themes/next/source/css/_custom 下的 custom.styl 文件,添加属性样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
  • 在你需要编辑的文章地方。放置如下代码
    <a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>
  • Download Now

3. 文档中引用图标

  • 可以去Font Awesome去查找自己想要的图标:点击传送
  • 使用方法:<i class="fa fa-pencil"></i>支持Markdown

样式展现

4. Hexo上给文章添加锚点

锚点(anchor):其实就是超链接的一种,一种特殊的超链接。

锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转,常用的场景就是,页面很长,让用户方便在页面不同部分间跳转,类似于脚注。可以用html的代码来书写。

同页面跳转

设置一个锚点链接锚点。(注意:href属性的属性值最前面要加#)

在页面中需要的位置设置目标,目标写法<p id="test">目标</p>。(注意:目标标签的属性值要与锚点链接中的href属性值一样,但不加#,例如我写的href属性值为#test,那么后面id对应的属性值为test)

案例:

<a href="#red">跳转到红色</a>

跳转到红色

<p id="red">红色</p>

红色

跨页面跳转

和同页面跳转差不多,同样设置锚点链接,在href中的要跳转到的页面路径后面追加#+属性值,即锚点

在跳转页面中需要的位置设置目标,目标写法<p id="test">目标</p>

案例:

<a href="跳转页面.html#test">锚点</a>

锚点

<p id="test">跳转到颜色列表</p>

跳转到颜色列表


  1. 1.https://www.jianshu.com/p/4ef35521fee9
  2. 2.basic footnote content
  3. 3.paragraph
  4. 4.inline footnote
如果有十分,这篇文章你愿意给几分?
0%