hexo美化配置(一)

记录下hexo配置的一些笔记

侧边栏添加近期文章推荐

1566632016922

找到siderbar.swig的 if theme.links代码,在endif后面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 近期文章推荐 #}
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

如下图:

1566632303679

在theme/next/_config.yml 末尾添加配置变量

1
2
3
4
# 近期文章推荐
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

自定义友情链接样式

在 hexo/themes/next/layout 目录下新建一个 link.swig文件,写入以下代码:

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}

<div id="links">
<style>
.container .main-inner {
width: 1100px;
}
.links-content{
margin-top:1rem;
}

.link-navigation::after {
content: " ";
display: block;
clear: both;
}

.card {
width: 45%;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}

@media(max-width: 1400px){
.card{
width: 40% !important;
}
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;

}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 100%;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}

span.focus-links {
font-style: normal;
margin-left: 10px;
position: unset;
left: 0;
padding: 0 7px 0 5px;
font-size: 11px;
border-color: #42c02e;
border-radius: 40px;
line-height: 24px;
height: 22px;
color: #fff !important;
background-color: #42c02e;
display: inline-block;
}
span.focus-links:hover{
background-color: #318024;
}

.friends-btn{
text-align: center;
color: #555!important;
background-color: #fff;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
border: none!important;
transition-property: unset;
padding: 0 15px;
margin: inherit;
}

.friends-btn:hover{
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
margin: inherit;
}
}
</style>
<div class="links-content">
<div class="link-navigation">

{% for link in theme.mylinks %}

<div class="card">
<img class="ava" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> <a href="{{ link.site }}"><span class="focus-links">关注</span></a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>

{% endfor %}

</div>
{{ page.content }}
</div>
</div>

{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}

修改 hexo/themems/next/layout/page.swig 文件,在

1
2
#}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#

下面添加以下代码

1
2
3
<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
#}{{ __('title.links') + page_title_suffix }}{#

然后还是在这个 page.swig 文件中,引入新建的 swig 页面:

复制

1
2
3
<!-- 友情链接-->
{% elif page.type === 'links' %}
{% include 'links.swig' %}

这个代码位置可以放到下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    {% elif page.type === 'categories' %}
<div class="category-all-page">
<div class="category-all-title">
{{ _p('counter.categories', site.categories.length) }}
</div>
<div class="category-all">
{{ list_categories() }}
</div>
</div>
+ {% elif page.type === 'links' %}
+ {% include 'links.swig' %}
{% else %}
{{ page.content }}
{% endif %}
</div>

然后我们使用 GitBash 新建一个菜单栏:在hexo根目录

1
hexo new page "links"

这样在 hexo/source 目录下会生成一个 links 文件夹,打开其中的 index.md 文件,在标题头中写入 type = "links" 这个属性头,如下:

1
2
3
4
title: 友情链接
date: 2019-08-25 23:42:21
type: "links"
comments: false

最后,我们添加友链的话,需要在主题配置文件 hexo/themes/next/_config.xml 文件末尾添加:

1
2
3
4
5
6
7
8
9
10
11
# 友情链接
mylinks:
- nickname: 柯大佬 # 昵称
avatar: /images/keyan.jpg # 头像地址
site: https://keyanjie.net/ #友链地址
info: Alan's Notebook

- nickname: 思佳 # 昵称
avatar: http://39.106.56.59/image/saihongji.jpg # 头像地址
site: http://39.106.56.59/ #友链地址
info: Clovers' Blog

在menu下面新增links:

1
2
3
4
5
6
7
menu:
# home: / || home
# top: /top/ || signal
# categories: /categories/ || th
# tags: /tags/ || tags
# /links/是地址,user是图标
links: /links/ || user

保持这个格式就行,然后就会从上往下渲染到 links 页面,当然,菜单栏汉化需要在 next 主题目录下 languages 文件中找到 zh-CN 或者 zh-Hans.yml 文件,新增 links :

1
2
3
4
5
6
menu:
#home: 首页
#archives: 时间轴
#categories: 分类
#tags: 标签
links: 友链

模仿知乎卡片样式链接

1566783094475

创建linkcard.js放到source/js/src/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload=function(){
var LinkCards=document.getElementsByClassName('LinkCard');
if(LinkCards.length != 0){
var LinkCard=LinkCards[0];
var link=LinkCard.href;
var title=LinkCard.innerText;
LinkCard.innerHTML="<style type=text/css>.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard{position:relative;display:block;margin:1em auto;width:390px;box-sizing:border-box;border-radius:12px;max-width:100%;overflow:hidden;color:inherit;text-decoration:none}.ztext{word-break:break-word;line-height:1.6}.LinkCard-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:center}.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:inherit;background-color:rgba(246,246,246,0.88)}.LinkCard-text{overflow:hidden}.LinkCard-title{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(16px * 1.25 * 2);font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}.LinkCard-meta{display:flex;margin-top:4px;font-size:14px;line-height:20px;color:#999;white-space:nowrap}.LinkCard-imageCell{margin-left:8px;border-radius:6px}.LinkCard-image{display:block;width:60px;height:auto;border-radius:inherit}</style><span class=LinkCard-backdrop style=background-image:url(https://zhstatic.zhihu.com/assets/zhihu/editor/zhihu-card-default.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center><svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=图标 src=https://site-1258928558.cos.ap-guangzhou.myqcloud.com/linkcard.png></span></span>";

for (var i = LinkCards.length - 1; i >= 1; i--) {
LinkCard=LinkCards[i];
title=LinkCard.innerText;
link=LinkCard.href;
LinkCard.innerHTML="<span class=LinkCard-backdrop style=background-image:url(https://zhstatic.zhihu.com/assets/zhihu/editor/zhihu-card-default.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center><svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=图标 src=/images/linkcard.png></span></span>";
}
}
}

然后在next\layout\_macro\post.swig中找到

1
<div class="post-block">

在它下一行添加引用下面代码

1
2
<!--知乎卡片链接-->
<script type="text/javascript" src="/js/src/linkcard.js"></script>

在你需要引用的markdown里面html 链接写法, a 标签加上class="LinkCard"

1
<a href="https://github.com/Lruihao/lruihao.github.io" target="_blank" class="LinkCard">Lrui

其中需要注意的是,其中有一个图片链接为:/images/linkcard.png,要永久使用,你需要下载
https://site-1258928558.cos.ap-guangzhou.myqcloud.com/linkcard.png中的图片,放到theme/next/source/images目录下。

-------------    本文结束  感谢您的阅读    -------------
胡想成 wechat
欢迎关注个人公众号!
您的支持,是我装逼的最大动力!

本文标题:hexo美化配置(一)

文章作者:胡想成

发布时间:2019年08月24日 - 15:08

最后更新:2020年04月25日 - 21:04

原始链接:xchu.net/2019/08/24/hexo配置/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0许可协议,转载请注明出处!