前言

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

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

新建收藏页

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

2.输入hexo new page stars

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

4.修改这个文件:

---
title: 我的收藏
date: 2020-07-05 00:00:00
---

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

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

添加样式

你可以单独写一份CSS样式,然后在页面中使用link 标签引入,也可以和我一样直接把样式写在这个 index.md 文件中。以下是我所使用的样式参考:

<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进行渲染。首先我们需要添加一下页面的正文部分,你可以像我这样写:

## 我的常用
<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文件示例

[
{
"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代码

// 多个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文件示例

{
".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代码

// 采用一个多对象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

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

---
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 文件夹中。你只需要下载这三个文件即可快速部署: