1. 前言

闲来无事，为博客加入导航页面，省的每次都要手动输入网站。

导航页面不止可以收录网址，还能搜索对应网址，以便日常的使用。

预览页面

✅来自本站，本站可确保其安全性，请放心点击跳转
Ldyer的导航页
ldyer

alt text

2. 创建guide页面

1
hexo new page guide

然后找到目录 Hexo根目录\source\guide\index.md

在页面中改为以下信息（title和date改为你的，其他不变）

1
2
3
4
5
6
---
title: Ldyer的导航
date: 2025-09-20 17:52:23
type: guide
aside: false
---

3. 创建guide.yml

在 Hexo根目录\source\_data\ 文件夹下创建 guide.yml，把里面的信息改为导航页的信息。这是我本人的信息，你可以在此基础上更具你的需求修改：

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

- nav_name: 常用网站
  url_list:
    - name: Bilibili
      url: https://www.bilibili.com/
      ico: https://static.hdslb.com/mobile/img/512.png
    - name: Github
      url: https://www.github.com/
      ico: https://static.vecteezy.com/system/resources/previews/024/555/259/large_2x/github-logo-transparent-free-png.png
    - name: 微博
      url: https://weibo.com/
      ico: https://weibo.com/favicon.ico
    - name: CSDN
      url: https://www.csdn.net/
      ico: https://g.csdnimg.cn/static/logo/favicon32.ico
    - name: 知乎
      url: https://www.zhihu.com/
      ico: https://static.zhihu.com/heifetz/assets/apple-touch-icon-152.81060cab.png
    - name: 小红书
      url: https://www.xiaohongshu.com/explore
      ico: https://portal-oss.zhiye.com/606053/image/64a7c220-d135-4c65-a619-68b486441921.jpg

- nav_name: 壁纸
  url_list:
    - name: 哲风壁纸
      url: https://haowallpaper.com/homeView
      ico: https://haowallpaper.com/favicon.ico
    - name: 暖糖壁纸
      url: https://www.nuantang.net/
      ico: https://www.nuantang.net/favicon.ico
    - name: 壁纸汇
      url: https://www.bizhihui.com/
      ico: https://s.panlai.com/images/favicon.ico

- nav_name: AI网站
  url_list:
    - name: ChatGPT
      url: https://chat.openai.com/
      ico: https://ts2.tc.mm.bing.net/th/id/OIP-C.jWNGaQtFMzuqxjgC0EVbNAHaHa?rs=1&pid=ImgDetMain&o=7&rm=3
    - name: DeepSeek
      url: https://www.deepseek.com/
      ico: https://www.deepseek.com/favicon.ico
    - name: Gemini
      url: https://aistudio.google.com/
      ico: https://ts3.tc.mm.bing.net/th/id/OIP-C.DrtxUDos-cXhc9wXnPsGigHaHa?rs=1&pid=ImgDetMain&o=7&rm=3
    - name: 元宝
      url: https://yuanbao.tencent.com/
      ico: https://cdn-hybrid-prod.hunyuan.tencent.com/manual/favicon.png
    - name: KIMI
      url: https://www.kimi.com/
      ico: https://statics.moonshot.cn/kimi-web-seo/favicon.ico
    - name: 朱雀AI检测
      url: https://www.zhuquequai.com/
      ico: https://www.zhuquequai.com/favicon.ico
    - name: 豆包
      url: https://www.doubao.com/chat/
      ico: https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/logo-icon.png


- nav_name: 在线工具
  url_list:
    - name: 梗图在线制作
      url: https://www.zuomeme.com/#google_vignette
      ico: https://www.zuomeme.com/favicon.ico
    - name: 转WebP格式
      url: https://cdkm.com/cn/jpg-to-webp#google_vignette
      ico: https://cdkm.com/favicon.ico
    - name: 一键抠图
      url: https://tool.lu/cutout/
      ico: https://tool.lu/favicon.ico
    - name: 图片改尺寸
      url: https://www.sojson.com/image/change.html
      ico: https://scdn.sojson.com/sojson/favicon16.png
    - name: 图片加文字
      url: https://add-text-to-image.com/zh#google_vignette
      ico: https://add-text-to-image.com/favicon.ico
    - name: 去水印
      url: https://magiceraser.org/zh/remove-watermark-from-image/
      ico: https://magiceraser.org/favicon.ico
    - name: 图像拼接
      url: https://www.lddgo.net/image/stitching-image
      ico: https://www.lddgo.net/img/icon.png
    - name: 网页图标抓取
      url: https://gonglue.qinggl.com/app/img/icon.jsp
      ico: https://www.qinglue.cn/com/favicon.ico
    - name: 图片模糊
      url: https://tool.xuecan.net/image-blur/
      ico: https://tool.xuecan.net/favicon.ico
    - name: 图片压缩
      url: https://www.imgdiet.com/compress
      ico: https://www.imgdiet.com/favicon-32x32.ico


- nav_name: 开发相关
  url_list:
    - name: 百度统计
      url: https://tongji.baidu.com/web5/welcome/login
      ico: https://tongji.baidu.com/favicon.ico
    - name: 腾讯云
      url: https://cloud.tencent.com/
      ico: https://cloudcache.tencent-cloud.com/qcloud/favicon.ico?t=201902181234
    - name: 阿里云
      url: https://www.aliyun.com/
      ico: https://img.alicdn.com/tfs/TB1_ZXuNcfpK1RjSZFOXXa6nFXa-32-32.ico
    - name: IconFont
      url: https://www.iconfont.cn/
      ico: https://img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg
    - name: Vercel
      url: https://vercel.com/1dyers-projects
      ico: https://pica.zhimg.com/v2-f060fabb487e362c66cfbff27fe1da34_720w.jpg?source=172ae18b
    - name: Huggingface
      url: https://huggingface.co/
      ico: https://hub-avatar.baai.ac.cn/user/45017.png
    - name: 夏柔API
      url: https://api.aa1.cn/
      ico: https://api.aa1.cn/assets/img/favicon.png

- nav_name: 免费影音
  url_list:
    - name: 百思派电影网
      url: https://www.bestpipe.cn/
      ico: https://hu3ercs23.aaxyd.cn/template/jianbai/statics/img/favicon.ico
    - name: 茶杯狐
      url: https://cupfox.love/
      ico: https://picx.zhimg.com/80/v2-5393cb76a824b11d7771ecdce592c87d.png

上述变量的意义：

  • nav_name 代表分类
  • name 代表网站名
  • url 跳转的链接
  • ico 代表网站的图标

这里推荐一个网站，可以输入网址，直接获取对应网站的图标，省的一个个找过去：

引用站外地址，不保证站点的可用性和安全性
网页图标抓取
轻略

4. 创建guide.pug

在 Hexo根目录\themes\butterfly\layout\includes\page\ 下创建文件 guide.pug ,并且输入以下内容：

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
block content
  #guide
    .guide-header
      h1.guide-title 资源导航大全
      .guide-search
        input(type="text", placeholder="搜索网站名称...", id="searchInput")
        i.fas.fa-search

    .guide-container
      each category in site.data.guide
        .guide-category
          h2.category-title= category.nav_name
          .category-content
            each item in category.url_list
              a.guide-item(href=item.url, target="_blank", rel="noopener")
                .item-icon
                  img(src=item.ico, alt=item.name, onerror="this.style.display='none'")
                .item-info
                  h3.item-name= item.name
                  .item-url= item.url.replace(/^https?:\/\/(www\.)?/, '').split('/')[0]

    .guide-footer
      p 共收录 #{site.data.guide.reduce((acc, curr) => acc + curr.url_list.length, 0)} 个优质网站资源

  script.
    document.addEventListener('DOMContentLoaded', function() {
      const searchInput = document.getElementById('searchInput');
      const guideItems = document.querySelectorAll('.guide-item');

      searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        guideItems.forEach(item => {
          const itemName = item.querySelector('.item-name').textContent.toLowerCase();
          const itemUrl = item.querySelector('.item-url').textContent.toLowerCase();
          item.style.display = (itemName.includes(searchTerm) || itemUrl.includes(searchTerm)) ? 'flex' : 'none';
        });
      });
    });

5. 创建guide.css

在 Hexo根目录\themes\butterfly\source\css\ 下创建文件 guide.css ,然后输入以下内容

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
#guide {
  max-width: 1200px;
  padding: 0 1.5rem;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* 标准语法 */
}

.guide-header { text-align: center; margin-bottom: 2.5rem; }
.guide-title {
  font-size: 2.5rem; font-weight:700; margin-bottom:0.5rem;
  background: linear-gradient(135deg, #6e8efb, #a7ffb0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.guide-search { position: relative; max-width: 500px; margin: 0 auto 2rem auto; }
.guide-search input {
  width:100%; padding:0.9rem 1rem 0.9rem 3rem; border:2px solid #e2e8f0; border-radius:50px;
  font-size:1rem; transition: all 0.3s ease; box-shadow:0 4px 8px rgba(0,0,0,0.06);
}
.guide-search input:focus { outline:none; border-color:#0f130f; box-shadow:0 4px 14px rgba(167,119,227,0.25);}
.guide-search i { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#2c4436; }

.guide-container {
  column-count: 3;         /* 列数 */
  column-gap: 2rem;
  align-items: center;
}

.guide-category {
  display: inline-block;   /* 必须保持 inline-block */
  width: 100%;             /* 列宽占满 column 容器 */
  margin-bottom: 1.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
}

.guide-category:hover { transform: translateY(-6px); box-shadow:0 14px 32px rgba(0,0,0,0.18); }

.category-title { background: linear-gradient(135deg, #79d558, #e4a77c); color:#fff; padding:1rem 1.2rem; margin:0; font-size:1.3rem; font-weight:600; }
.category-content { padding:1.2rem; display:grid; gap:1rem; }

.guide-item { display:flex; align-items:center; padding:0.9rem 1rem; border-radius:10px; background:#f8fafc; transition:all 0.3s ease; text-decoration:none; color:inherit; }
.guide-item:hover { background:#edf2f7; transform:translateX(6px); box-shadow:0 4px 12px rgba(167,119,227,0.15); }

.item-icon { width:42px; height:42px; flex-shrink:0; margin-right:1rem; display:flex; align-items:center; justify-content:center; background:white; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.item-icon img { width:24px; height:24px; object-fit:contain; }
.fallback-icon { font-size:1.3rem; }

.item-info { overflow:hidden; }
.item-name { margin:0; font-size:1.05rem; font-weight:600; color:#2d3748; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-url { font-size:0.8rem; color:#718096; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.guide-footer { text-align:center; padding:1.5rem; color:#718096; font-size:0.9rem; border-top:1px solid #e2e8f0; }

/* 响应式列数 */
@media (max-width: 1200px) { .guide-container { column-count: 3; } }
@media (max-width: 992px)  { .guide-container { column-count: 2; } }
@media (max-width: 768px)  { .guide-container { column-count: 1; } }

/* 动画 */
@keyframes fadeInUp { from{opacity:0; transform:translateY(20px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }

当然了，你可以根据你喜欢的样式进行修改。

6. 引入

找到文件 Hexo根目录\themes\butterfly\layout 下的 page.pug 文件，然后再找到

1
case page.type

这一行，在它下面插入代码，就像这样：

1
2
3
case page.type
    when 'guide'
        include includes/page/guide.pug

pug引入完成后，在 _config.butterfly.yml 中引入css

1
- <link rel="stylesheet" href="/css/guide.css">

然后更新页面，就能出现导航页了，为了便于访问，你可以把它放在博客主页上方的导航栏中~