本文主要记录部署个人导航网的折腾过程。相信大家对网址导航网站并不陌生。这类网站通常将各类网址集合起来，再按照一定条件进行分类。方便各类用户快速找到自己想要的网站。本文博主为大家演示如何使用OneNav搭建属于自己的个人导航网
一、前言
1. 为什么要自己做一个导航页面？
网页导航为了满足更多用户的需求，需要收录大量网址，导致他们的界面千篇一律。再加上新闻、广告，看上去免不了有点杂乱。尽管网址导航众多，但是适配手机端的却很少。许多手机的首页导航页面都是浏览器自带的，不乏充斥着各种热点新闻推送，很少收录一些小众站点。
2. OneNav 是什么？
OneNav 是一款开源免费的专业书签（导航）管理程序。
OneNav 使用 PHP 和 SQLite3 开发，它设计轻巧简洁，并且易于操作。用户可以通过更换或自行开发不同的导航主题来个性化自己的使用体验。OneNav特别适合于那些需要在多设备、多平台、多浏览器之间同步和访问书签的用户。通过部署OneNav，用户可以实现一处添加书签，随处访问的便利。
此外，OneNav还具有后台管理功能，支持加密链接以及浏览器书签的批量导入等实用功能。这些特性使得OneNav不仅仅是一个简单的书签管理工具，它还能帮助用户构建一个集中式的个人导航页，从而更直观高效地组织和访问各类网络资源。
值得一提的是，OneNav还可以通过Docker的方式进行部署，这使得用户可以在自己的NAS(网络附加存储)或其他支持Docker的设备上轻松安装和运行OneNav。
3. 效果展示
网站上线地址：https://nav.yywen.top
小九の导航网二、安装 OneNav
本文介绍的安装方式是使用 Docker-Compose 部署，如果你的服务器上没有安装 Docker 和 Docker-Compose ，可以通过安装 1Panel 的方式解决，1Panel 官方在线安装教程。
博主用的是 Ubuntu 系统，以博主为例就是在控制台输入如下命令：
1
| curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh
|
新建一个文件夹：
1
2
| work=~/docker/onenav
mkdir -p $work; cd $work
|
创建一个 docker-compose.yml 文件：
1
| vim $work/docker-compose.yml
|
填入以下内容：
1
2
3
4
5
6
7
8
9
10
11
| version: '3'
services:
onenav:
container_name: onenav
ports:
- "3080:80"
volumes:
- './data:/data/wwwroot/default/data'
image: 'helloz/onenav'
restart:
always
|
使用以下命令直接启动即可：
最后，在浏览器中输入 http://IP:3080 ，就可以看到主界面了
在云服务器上部署注意在防火墙上放行对应的端口3080
最后添加一下反向代理即可，不清楚的可以参考博主之前的这篇文章：『个人网站之代理篇（五）』
三、使用 OneNav
1. 网站初始化
首次访问站点首页需设置初始用户名、密码：
网站初始化设置完成之后会自动跳转到后台登录页面：
后台登录页面登录完成之后的前后台页面如下：
后台管理页面
前台展示页面可以看见，后台管理主要分为分类管理、链接管理和系统设置这三大类，这些系统功能能讲的就书签导入、站点设置和主题设置这三个，其他的要么是需要订阅才能使用，要么就是有手就行，直接上就完了。
2. 书签导入
对于书签的导入，官方文档已经写的很清楚了，有需要的朋友可以去看看，博主就不在赘述了。
链接地址为：书签导入
3. 站点设置
在站点设置中你可以对网站标题、关键词、描述等信息进行设置。
站点设置
- 网站Logo：可以填写文字，或者图片相对路径、绝对路径、URL地址都是允许的，具体取决于您使用的主题，另外部分主题可能不支持网站logo
- 网站关键词：多个关键词使用英文状态下的,号分隔
自定义header仅对用户首页和过渡页生效，部分主题可能未适配这个功能，默认主题是支持的。
比如您可以添加百度统计代码，比如：
1
2
3
4
5
6
7
8
9
| <script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
|
也或者自定义网站CSS：
1
2
3
4
5
6
7
| <style type="text/css">
.site-main .site-list .list .desc {
display: none;
}
</style>
|
4. 主题设置
在主题设置中你可以配置主题参数以及更换主题。
主题设置参数设置
不同的主题参数是不一样的，需要根据官方文档进行合理的配置，以避免不必要的麻烦。
具体参数怎么设置请参考此文档：主题设置说明
更换主题
如果你是订阅用户，更换主题十分便捷，直接点击下载喜欢的主题之后再进行使用即可。
不是订阅用户那就比较麻烦了，不同的安装方式更换主题的方式也有所不同，但都是需要先将第三方主题下载下来再解压到 templates 目录下，templates 目录为 OneNav 的主题目录
适用于常规方式安装
- 下载第三方主题，并解压至templates目录下
- 打开OneNav后台 - 系统设置 - 主题设置 - 选择要使用的主题
适用于Docker方式安装
- 在您的挂载目录下创建一个templates目录，然后将主题解压至此目录
- 打开OneNav后台 - 系统设置 - 主题设置 - 选择要使用的主题
所有第三方主题均可在：https://soft.xiaoz.org/#/public/onenav/themes 进行下载，此处下载版本有可能会滞后
四、自定义主题
官方提供的主题就那么几个，很难满足全部人的需要，所以官方提供了如何开发自己的主题的文档。
博主也是体验过全部主题之后都没有喜欢的，索性就自己手搓一个吧
1. 主题目录结构
OneNav主题位于站点根目录下的/templates目录，或者是/data/templates，逻辑为：
- 优先读取/templates目录下的主题
- 如果未读取到/templates目录下的主题，则尝试从/data/templates读取
创建一个主题的最最最基本结构如下：
1
2
3
4
| templates
└─theme-name
├─info.json
└─index.php
|
主题目录不能包含特殊字符，比如-/.*!@#$%^&等，目录名称不能包含空格
当然了，一个主题不可能就这么两个简单的文件就搞定了，你可能会需要使用 css、js 和 svg等其他资源，可以在主题目录下创建一个资源文件夹用于存放此类文件，基本结构如下：
1
2
3
4
5
6
7
8
9
| templates
└─theme-name
└─assets
│ ├─css
│ ├─js
│ ├─img
│ └─svg
├─info.json
└─index.php
|
这里博主只是列举个大概，你需要什么便自行添加即可。
2. 主题配置信息
主题配置信息是通过 info.json 来描述的，其内容包含：
1
2
3
4
5
6
7
8
9
10
11
12
13
| {
"name":"theme-cnm",
"description":"Writing code makes me happy.",
"homepage":"https://www.xiaoz.me",
"version":"1.0.0",
"update":"2024/02/29",
"author":"sirius",
"screenshot":"https://img.rss.ink/imgs/2022/03/42ed3ef2c4a50f6d.png",
"config": {
"link_description": "show",
"favicon": "online"
}
}
|
1
2
3
4
5
6
7
8
9
| 字段含义如下：
name：主题名称
description：主题描述
homepage：作者主页
version：主题版本
update：主题更新时间
author：主题作者
screenshot：主题截图
config: 主题自定义配置（选）
|
这个时候回到 OneNav后台 - 系统设置 - 主题设置，可以看到刚刚创建好的 theme-cnm 主题，不过当前没有实际作用，因为 index.php 还没有任何内容。
点击 theme-cnm 主题的参数设置就可以看到刚才自定义的两个参数
3. 主题框架渲染
主题框架渲染是通过 index.php 文件来实现的，index.php 中有什么内容，主题就会显示什么内容，如果你不知道什么是PHP（PHP 是世界上最好的语言），你可以把它当作 HTML 来写
在 index.php 中可以使用以下变量
1
2
3
4
5
6
7
| $site['title']：站点标题
$site['logo']：站点logo
$site['subtitle']：站点副标题
$site['keywords']：站点关键词
$site['description']：站点描述
$site['custom_header']：自定义header
$template：主题文件夹名称，比如HelloWorld
|
注意需要通过 PHP 开始符和结束符包裹，比如 <?php echo $name; ?>
最后给出官方一个完整的示例 demo 如下：
index.php
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $site['title']; ?> - <?php echo $site['subtitle']; ?></title>
<meta name="keywords" content="<?php echo $site['keywords']; ?>" />
<meta name="description" content="<?php echo $site['description']; ?>" />
<style>
header{
width:100%;
}
aside{
width:20%;
float:left;
}
article{
float:80%;
}
footer{
width:100%;
}
</style>
</head>
<body>
<!-- 顶部 -->
<header>
<!-- 网站标题 -->
<h1><?php echo $site['title']; ?></h1>
</header>
<!-- 顶部 -->
<!-- 左侧 -->
<aside>
<?php
foreach ($categorys as $category) {
$font_icon = empty($category['font_icon']) ? '' : "<i class='{$category['font_icon']}'></i> ";
?>
<a href="#category-<?php echo $category['id']; ?>">
<li>
<div><?php echo $font_icon; ?><?php echo htmlspecialchars_decode($category['name']); ?></div>
</li>
</a>
<?php } ?>
</aside>
<!-- 左侧 -->
<!-- 内容 -->
<article>
<!-- 遍历分类目录 -->
<?php foreach ( $categorys as $category ) {
$fid = $category['id'];
$links = get_links($fid);
$font_icon = empty($category['font_icon']) ? '' : "<i class='{$category['font_icon']}'></i> ";
if( $category['property'] == 1 ) {
$property = '<i class="fa fa-expeditedssl" style = "color:#5FB878"></i>';
}
else {
$property = '';
}
?>
<div id = "category-<?php echo $category['id']; ?>" class = "mdui-col-xs-12 mdui-typo-title cat-title">
<?php echo $font_icon; ?>
<?php echo htmlspecialchars_decode($category['name']); ?> <?php echo $property; ?>
<span class = "mdui-typo-caption"><?php echo $category['description']; ?></span>
</div>
<!-- 遍历链接 -->
<?php
foreach ($links as $link) {
$link['description'] = empty($link['description']) ? '作者很懒，没有填写描述。' : $link['description'];
?>
<div class="mdui-col-lg-3 mdui-col-md-4 mdui-col-xs-12 link-space" id = "id_<?php echo $link['id']; ?>" link-title = "<?php echo $link['title']; ?>" link-url = "<?php echo $link['url']; ?>">
<!--定义一个卡片-->
<div class="mdui-card link-line mdui-hoverable">
<!-- 如果是私有链接，则显示角标 -->
<?php if($link['property'] == 1 ) { ?>
<div class="angle">
<span> </span>
</div>
<?php } ?>
<!-- 角标END -->
<a href="/index.php?c=click&id=<?php echo $link['id']; ?>" target="_blank" title = "<?php echo $link['description']; ?>">
<div class="mdui-card-primary" style = "padding-top:16px;">
<div class="mdui-card-primary-title link-title">
<img src="https://favicon.rss.ink/v1/<?php echo base64($link['url']); ?>" alt="HUAN" width="16" height="16">
<span class="link_title"><?php echo $link['title']; ?></span>
</div>
</div>
</a>
<!-- 卡片的内容end -->
<div class="mdui-card-content mdui-text-color-black-disabled" style="padding-top:0px;"><span class="link-content"><?php echo $link['description']; ?></span></div>
</div>
<!--卡片END-->
</div>
<?php } ?>
<!-- 遍历链接END -->
<?php } ?>
</article>
<!-- 内容END -->
<!-- 底部 -->
<footer>
这是底部内容
</footer>
<!-- 底部END -->
</body>
</html>
|
至此，一个简单的自定义主题便完成了，我自己手搓一个比较low的主题也用了两三天，小白如果没有基础的话建议不要自定义主题了。
最后再展示一个成果吧，如果你喜欢我这个主题可以留言给我发给你，当然了，由于博主水平有限，不免会存在一些 Bug，欢迎留言反馈。
小九の导航网五、小结
用了两周多，感觉 OneNav 还是很适合用来当个人导航网的。以后有什么新的用法再来更新喽，想自己动手的可以多看看官方文档。
