前言

平时我也会用到很多网站，但是零零散散的很不方便，每次都要到处找，虽然也有很多导航类的网站，比如小康导航，但是感觉部署麻烦，而且通常需要跳转到博客的站外，就想着直接在博客内置一个收藏页呗，用来收藏一些平时经常用到的网站。

你可以直接点击 我的收藏 前往我的收藏页查看效果。

新建收藏页

1.前往你的 Hexo 博客的根目录

2.输入hexo new page stars

3.你会找到 source/stars/index.md 这个文件

4.修改这个文件：

1
2
3
4
---
title: 我的收藏
date: 2020-07-05 00:00:00
---

然后你需要在 _data/butterfly.yml 或者对应的主题配置文件中 修改 menu 或对应 菜单/页面/导航 的相关设置:

1
2
menu:
  收藏网址: /stars/ || fas fa-star

添加样式

你可以单独写一份 CSS 样式，然后在页面中使用link 标签引入，也可以和我一样直接把样式写在这个 index.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
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
<style>
.links-content {
  margin-top:1rem;
}

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

.card {
  position:relative;
  width:25%;
  padding:0;
  border-radius:10px;
  transition-duration:.3s;
  margin-bottom:1rem;
  margin-left:16px;
  display:block;
  float:left;
  box-shadow:0 2px 6px 0 rgba(0,0,0,.12);
  background: transparent;
  overflow:hidden;
}

.card:hover:before, .card:focus:before, .card:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.card:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.15s;
  transition-duration: all 0.15s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.card:hover,.card:hover > .card-header a,.card:hover > .card-content a{
    transform:scale(1);
}

@media(max-width:567px) {
  .card{
      margin-left:16px;
      width:calc((100% - 16px)/2)
  }
  .card:nth-child(2n+1) {
      margin-left:0
  }
  .card:not(:nth-child(2n+1)) {
      margin-left:16px
  }
}

@media(min-width:567px) {
  .card {
    margin-left:16px;
    width:calc((100% - 32px)/3)
  }
  .card:nth-child(3n+1) {
    margin-left:0
  }
  .card:not(:nth-child(3n+1)) {
    margin-left:16px
  }
}

@media(min-width:768px) {
  .card {
    margin-left:16px;
    width:calc((100% - 48px)/4)
  }
  .card:nth-child(4n+1) {
    margin-left:0
  }
  .card:not(:nth-child(4n+1)) {
    margin-left:16px
  }
}

.posts-expand .post-body img {
  margin:0;
  padding:0;
  border:0
}

.card .card-header {
  display:block;
  text-align:center;
  padding:.25rem .25rem;
  font-weight:500;
  color:#222222;
  white-space:nowrap;
}

.card .card-header a {
  font-style:normal;
  color:#222222;
  font-weight:700;
  text-decoration:none;
  border:0;
  overflow:hidden
}

.card .card-header a:hover {
  color:#222222;
  text-decoration:none;
  border:0
}

.card .card-content {
  display:block;
  text-align:center;
  padding: 0 .25rem .25rem .25rem;
  font-weight:500;
  font-size: smaller;
  color:#222222;
  white-space:nowrap;
}
.card .card-content div {
  overflow:hidden
}
.card .card-content a {
  font-style:normal;
  color:#222222;
  font-weight:500;
  text-decoration:none;
  border:0;
  overflow:hidden
}
</style>

添加内容

当然我们不需要自己手动去一个一个的写每一个 Card 那样太麻烦了，我们选用 JSON 文件，使用 JS 进行渲染。首先我们需要添加一下页面的正文部分，你可以像我这样写：

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
## 我的常用

<div><div class="links-content"><div class="link-navigation mine"></div></div></div>

## 官方文档

<div><div class="links-content"><div class="link-navigation docs"></div></div></div>

## 代码托管

<div><div class="links-content"><div class="link-navigation code"></div></div></div>

## 技能训练

<div><div class="links-content"><div class="link-navigation skill"></div></div></div>

## 学习平台

<div><div class="links-content"><div class="link-navigation school"></div></div></div>

## 开发者社区

<div><div class="links-content"><div class="link-navigation community"></div></div></div>

## 云服务

<div><div class="links-content"><div class="link-navigation serve"></div></div></div>

## 站长工具

<div><div class="links-content"><div class="link-navigation sitetool"></div></div></div>

## 设计素材

<div><div class="links-content"><div class="link-navigation design"></div></div></div>

## 实用工具

<div><div class="links-content"><div class="link-navigation tools"></div></div></div>

处理 JSON 文件

JSON 文件可以是 JSON 数组和 JSON 对象的形式，这里我提供了两份代码，你们可以自由选择。记得把 JSON 文件和 JS 文件都放在 stars 文件夹中，当然我个人还是推荐第二种。

多个 JSON 数组文件

  • 可以引入单个文件，分类多个文件，方便查找添加数据
  • 文件多，可能影响网页加载速度

JSON 文件示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
  {
    "nickname": "Github",
    "site": "https://github.com/",
    "content": "全球最大的面向开源及私有软件项目的托管平台"
  },
  {
    "nickname": "Gitlab",
    "site": "https://gitlab.com/",
    "content": "支持无限的公有项目和私有项目的代码托管平台"
  },
  {
    "nickname": "Coding",
    "site": "https://coding.net/",
    "content": "国内首个一站式云端软件服务平台"
  },
  {
    "nickname": "Gitee",
    "site": "https://gitee.com/",
    "content": "国内最大的开源社区 OSChina 的代码托管平台"
  }
]

JS 代码

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
// 多个JSON数组文件多次调用
star = {
  init: function (url, className) {
    var that = this
    $.getJSON(url, function (data) {
      that.render(data, className)
    })
  },
  render: function (data, name) {
    var nickname,
      site,
      li = ''
    for (var i = 0; i < data.length; i++) {
      nickname = data[i].nickname
      site = data[i].site
      content = data[i].content
      li +=
        '<div class="card" onclick="window.open(\'' +
        site +
        '\')" >' +
        '<div class="card-header">' +
        '<div>' +
        nickname +
        '</div>' +
        '</div>' +
        '<div class="card-content">' +
        '<div>' +
        content +
        '</div>' +
        '</div>' +
        '</div>'
    }
    $(name).append(li)
  },
}
// 传入文件和对应的className
link.init('./mine.json', '.mine')

单个 JSON 多对象文件

  • 所有的网址都合并在一个 JSON 文件中
  • 当收藏的网址多了之后，不太好查找

JSON 文件示例

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
{
  ".mine": [
    {
      "nickname": "LeanCloud控制台",
      "site": "https://leancloud.cn/dashboard/applist.html#/apps",
      "content": "应用管理，数据控制"
    },
    {
      "nickname": "百度统计",
      "site": "https://tongji.baidu.com/web/10000188477/overview",
      "content": "查看网站的百度统计信息"
    },
    {
      "nickname": "NexT",
      "site": "https://theme-next.org/docs/",
      "content": "NexT主题官方文档"
    }
  ],
  ".docs": [
    {
      "nickname": "JavaScript",
      "site": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference",
      "content": "JavaScript API 文档"
    },
    {
      "nickname": "HTML",
      "site": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element",
      "content": "HTML API 文档"
    },
    {
      "nickname": "CSS",
      "site": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference",
      "content": "CSS API 文档"
    }
  ]
}

值得注意的是：对象的 key 必须填写 className , 比如上面的 .code

JS 代码

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
// 采用一个多对象JSON文件存储所有数据的方式
stars = {
  init: function (url) {
    var that = this
    $.getJSON(url, function (data) {
      for (var className in data) {
        var classData = data[className]
        that.render(classData, className)
      }
    })
  },
  render: function (data, name) {
    var nickname,
      site,
      li = ''
    for (var i = 0; i < data.length; i++) {
      nickname = data[i].nickname
      site = data[i].site
      content = data[i].content
      li +=
        '<div class="card" onclick="window.open(\'' +
        site +
        '\')" >' +
        '<div class="card-header">' +
        '<div>' +
        nickname +
        '</div>' +
        '</div>' +
        '<div class="card-content">' +
        '<div>' +
        content +
        '</div>' +
        '</div>' +
        '</div>'
    }
    $(name).append(li)
  },
}
// 传入json文件的路径
stars.init('./allStars.json')

引入 JS 文件

当然最后要记得在 index.md 中引入我们的 JS 文件，建议放在文首引入。

为了方便我直接使用了 JQuery ，所以我们还要引入一个JQuery 。

以下是我收藏页的完整代码：

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
---
title: 我的收藏
comments: false
type: stars
---

<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="./stars.js"></script>

<style>
.links-content {
  margin-top:1rem;
}

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

.card {
  position:relative;
  width:25%;
  padding:0;
  border-radius:10px;
  transition-duration:.3s;
  margin-bottom:1rem;
  margin-left:16px;
  display:block;
  float:left;
  box-shadow:0 2px 6px 0 rgba(0,0,0,.12);
  background: transparent;
  overflow:hidden;
}

.card:hover:before, .card:focus:before, .card:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.card:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.15s;
  transition-duration: all 0.15s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.card:hover,.card:hover > .card-header a,.card:hover > .card-content a{
    transform:scale(1);
}

@media(max-width:567px) {
  .card{
      margin-left:16px;
      width:calc((100% - 16px)/2)
  }
  .card:nth-child(2n+1) {
      margin-left:0
  }
  .card:not(:nth-child(2n+1)) {
      margin-left:16px
  }
}

@media(min-width:567px) {
  .card {
    margin-left:16px;
    width:calc((100% - 32px)/3)
  }
  .card:nth-child(3n+1) {
    margin-left:0
  }
  .card:not(:nth-child(3n+1)) {
    margin-left:16px
  }
}

@media(min-width:768px) {
  .card {
    margin-left:16px;
    width:calc((100% - 48px)/4)
  }
  .card:nth-child(4n+1) {
    margin-left:0
  }
  .card:not(:nth-child(4n+1)) {
    margin-left:16px
  }
}

.posts-expand .post-body img {
  margin:0;
  padding:0;
  border:0
}

.card .card-header {
  display:block;
  text-align:center;
  padding:.25rem .25rem;
  font-weight:500;
  color:#222222;
  white-space:nowrap;
} 

.card .card-header a {
  font-style:normal;
  color:#222222;
  font-weight:700;
  text-decoration:none;
  border:0;
  overflow:hidden
}

.card .card-header a:hover {
  color:#222222;
  text-decoration:none;
  border:0
}

.card .card-content {
  display:block;
  text-align:center;
  padding: 0 .25rem .25rem .25rem;
  font-weight:500;
  font-size: smaller;
  color:#222222;
  white-space:nowrap;
}
.card .card-content div {
  overflow:hidden
}
.card .card-content a {
  font-style:normal;
  color:#222222;
  font-weight:500;
  text-decoration:none;
  border:0;
  overflow:hidden
}
</style>

## 我的常用

<div><div class="links-content"><div class="link-navigation mine"></div></div></div>

## 官方文档

<div><div class="links-content"><div class="link-navigation docs"></div></div></div>

## 代码托管

<div><div class="links-content"><div class="link-navigation code"></div></div></div>

## 技能训练

<div><div class="links-content"><div class="link-navigation skill"></div></div></div>

## 学习平台

<div><div class="links-content"><div class="link-navigation school"></div></div></div>

## 开发者社区

<div><div class="links-content"><div class="link-navigation community"></div></div></div>

## 云服务

<div><div class="links-content"><div class="link-navigation serve"></div></div></div>

## 站长工具

<div><div class="links-content"><div class="link-navigation sitetool"></div></div></div>

## 设计素材

<div><div class="links-content"><div class="link-navigation design"></div></div></div>

## 实用工具

<div><div class="links-content"><div class="link-navigation tools"></div></div></div>

下载地址

相关代码我已经上传到 Github 。代码位置存放于 HexoCustomFile/stars 文件夹中。你只需要下载这三个文件即可快速部署：