手把手教你搭建自己的网页导航

手把手教你搭建自己的网页导航

先看效果

  • 亮色模式

image.png

  • 再看暗色模式

image.png

下面开始搭建

项目地址

源仓库：GitHub - fordes123/ITEM: Typecho 网址导航主题

我修改后的仓库：GitHub - yutian81/ITEM: Typecho 网址导航主题

两者不同：

  • 开启 /search/ 路由重写，解决站内搜索的问题（这不是 bug，只有由于搭建平台不同，比如我搭建于 serv00 虚拟主机，如果不修改，站内搜索就会 404）
  • 在主题外观设置中增加自定义 css 和 js 的选项，原项目是没有的，如图：

开始搭建

这是一个 php 项目，此处以 serv00 为例，也可以在 vps 上搭建

1. 在 Serv00 上添加一个 Website

image.png

2. 为域名绑定证书

image.png

image.png

image.png

3. 创建一个 Mysql 数据库

image.png

注意：数据库服务器地址是 mysql<数字>.serv00.com，假设你是 serv9，那么这里就是 mysql9.serv00.com，这个地址在你注册的时候发给你的邮件中可以找到

4. 上传文件到 Serv00

先下载 Typecho 框架（推荐下载正式版）：Download - Typecho Official Site

再下载原作者软件包：Release v1.2.3 · fordes123/ITEM

或者下载我修改后的软件包：Releases · yutian81/ITEM

将 Typecho 框架和 ITEM 软件包都解压，将 ITEM 软件包中的 theme 文件夹重命名为 ITEM，并放到 Typecho 框架的 usr → themes 文件夹下，并重新打包为 zip

image.png

在 serv00 管理面板找到 file_manager 点击进入它自带的文件管理器，找到你域名下面的 public_html 文件夹，将你刚刚重新打包的 zip 通过 from computer 上传

image.png

右键点击你上传的 zip 包，选择 explorer 进入压缩包，里面有一个 ITEM 文件夹

在这个文件夹上继续右键 explorer ，就是所有文件

全选所有文件，右键 → extract 解压，将所有文件都解压到你域名下的 public_html 文件夹

5. 访问你的域名进入初始化

界面会提示你绑定 mysql 数据库，设置管理员账号、密码；按照界面提示输入即可

然后你就会得到一个这样的导航：青云志网页导航 - 常用网页和在线工具导航

访问 域名/admin 就是你的后台管理页面

其他搭建方式

项目支持 Vercel 和 docker 部署，部署说明以及如何配置见作者 源仓库

美化一下它

你搭建好后会发现跟我的导航站有一点不一样，那是因为我修改过，如果你使用的原作者的代码，那么，现在需要修改几个文件（如果是用我的代码，则不用修改）：

  • theme/functions.php
  • theme/header.php
  • theme/footer.php

从 我仓库里 找到这几个文件，复制它们的全部内容替代源文件

访问 域名/admin 进入管理后台，依次点击 控制台 → 外观 → 设置外观

image.png

往下拉，找到 自定义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
/* 白色半透明毛玻璃效果 */
.card-header,
.card-body,
.site-wrapper,
.list-item.block {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    background: #E8E8E8 !important;
    margin-bottom: 0px !important;    
    padding: 9px 18px 9px 18px !important;
}

.card-body,
.site-wrapper,
.list-item.block {
    background: rgba(255, 255, 255, 0.7) !important;
}

.form-control {
  background: #E8E8E8 !important;
}

/* 暗色模式覆盖 */
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .site-wrapper,
[data-bs-theme="dark"] .list-item.block {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .card-header {
    background: #2D2D2D !important;
}

[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .site-wrapper,
[data-bs-theme="dark"] .list-item.block {
    background: rgba(30, 30, 30, 0.4) !important;
}

[data-bs-theme="dark"] .form-control {
  background: #2D2D2D !important;
}

/* 文字颜色适配 */
.card-header *,
.card-body *,
.list-item.block * {
    color: inherit !important;
}

完工了！顺带说一下这个导航项目的优势

  • 支持二级菜单，很多导航都不支持
  • 界面美观，支持暗黑模式
  • 适配手机浏览器
  • 多种部署方式

感谢TG网友 CH 提出的步骤疏漏

#建站 #容器