hexo创建一个友情链接页面

发布时间：2024-09-15 03:16:27

更新时间：2024-09-14 19:16:29

👀 阅读量：

尽管hexo自带links功能，但是这样看起来单一无趣，那么为了改善友链，我们可以自定义一个页面

创建新页面

找到你的本地博客位置，输入 hexo new page 友情链接 你的本地博客目录就会出现blog\source\友情与链接\index.md 打开文件发现空空如也

1
---
2
title: 友情与链接
3
date: 2024-09-12 20:35:40
4
---

添加代码

如下一大长串

1
---
2
title: 友情与链接
3
date: 2024-09-12 20:35:40
4
---
5

6
## **友情链接**
7

8
<div class="post-body">
9
   <div id="links">
10
      <style>
11
         .links-content{
12
         margin-top:1rem;
13
         }
14
         .link-navigation::after {
15
         content: " ";
16
         display: block;
17
         clear: both;
18
         }
19
         .card {
20
         width: 45%;
21
         font-size: 1rem;
22
         padding: 10px 20px;
23
         border-radius: 4px;
24
         transition-duration: 0.15s;
25
         margin-bottom: 1rem;
26
         display:flex;
27
         }
28
         .card:nth-child(odd) {
29
         float: left;
30
         }
31
         .card:nth-child(even) {
32
         float: right;
33
         }
34
         .card:hover {
35
         transform: scale(1.1);
36
         box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
37
         }
38
         .card a {
39
         border:none;
40
         }
41
         .card .ava {
42
         width: 3rem!important;
43
         height: 3rem!important;
44
         margin:0!important;
45
         margin-right: 1em!important;
46
         border-radius:4px;
47
         }
48
         .card .card-header {
49
         font-style: italic;
50
         overflow: hidden;
51
         width: 100%;
52
         }
53
         .card .card-header a {
54
         font-style: normal;
55
         color: #2bbc8a;
56
         font-weight: bold;
57
         text-decoration: none;
58
         }
59
         .card .card-header a:hover {
60
         color: #d480aa;
61
         text-decoration: none;
62
         }
63
         .card .card-header .info {
64
         font-style:normal;
65
         color:#a3a3a3;
66
         font-size:14px;
67
         min-width: 0;
68
         overflow: hidden;
69
         white-space: nowrap;
70
         }
71
      </style>
72
      <div class="links-content">
73
         <div class="link-navigation">
74
            <div class="card">
75
                  <img class="ava" src="https://xingwangzhe.fun/avatar.webp" alt="1" />
76
               <div class="card-header">
77
                  <div>
78
                     <a href="https://xingwangzhe.github.io">xingwangzhe</a>
79
                  </div>
80
                  <div class="info">记录学习生活的琐事，或者技术文章:)</div>
81
               </div>
82
            </div>
83
            <div class="card">
84
                  <img class="ava" src="https://xingwangzhe.fun/avatar.webp" alt="1" />
85
               <div class="card-header">
86
                  <div>
87
                     <a href="https://xingwangzhe.github.io">xingwangzhe</a>
88
                  </div>
89
                  <div class="info">记录学习生活的琐事，或者技术文章:)</div>
90
               </div>
91
            </div>
92
         </div>
93
      </div>
94
   </div>
95
</div>
96
</section>
97
</body>

关键代码

1
           <div class="card">
2
               <img class="ava" src="https://xingwangzhe.github.io/images/avatar.jpg" alt="123" />
3
               <--双引号里是网站图标，你可以通过F12在<head></head>之间找到-->
4
               <div class="card-header">
5
                  <div>
6
                     <a href="https://xingwangzhe.github.io">xingwangzhe</a>
7
                     <--双引号里面是网站链接，后面的文本是标题-->
8
                  </div>
9
                  <div class="info">记录学习生活的琐事，或者技术文章:)</div>
10
                  <--这段文本是网站描述-->
11
               </div>
12
            </div>

你可以通过多次重复使用这些代码来实现添加友链的效果

效果如下

友情链接

别忘了这是markdown.md

你可以自定义后续的内容：）

参考推荐

Hexo个人博客自定义友链页面 hexo NexT 添加友链页面

hexo创建一个友情链接页面

作者: xingwangzhe

本文链接: https://xingwangzhe.fun/posts/62fedd1e

本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

xingwangzhe

随机文章

hexo创建一个友情链接页面

创建新页面

添加代码

关键代码

效果如下

友情链接

别忘了这是markdown.md

参考推荐

hexo创建一个友情链接页面

留言评论

文章目录

本文分类

文章标签

站内搜索

xingwangzhe

随机文章

hexo创建一个友情链接页面

创建新页面

添加代码

关键代码

效果如下

友情链接

别忘了这是markdown.md

参考推荐

hexo创建一个友情链接页面

留言评论

文章目录

本文分类

文章标签