我们用浏览器书签收藏网址时,受限于浏览器的交互方式,网址多了找起来比较麻烦,跨平台使用还要登录账号,不是太方便,所以搭建一个属于自己的导航网站就很有必要了。

下面是我整理的一些导航网站及源码,按照网址添加方式分类,这决定着使用的方便程度,太复杂不如使用浏览器

静态导航

静态导航的优点是不需要服务器,使用Github等代码托管即可免费部署,缺点是添加网址比较麻烦,网址多的话不推荐使用。

HTML

Webstack

纯静态响应式网址导航,经典开源导航项目,很多热门导航都是基于webstack,比如一导航。

演示:webstack.cc
开源地址:https://github.com/WebStackPage/WebStackPage.github.io
框架:bootstrap
点评:

  • 移动端下拉后导航栏不常驻
  • 通过HTML代码添加网址,一个网址要七八行代码,看起来头疼,管理起来也相当麻烦

所长导航

纯静态响应式网址导航,基于webstack一导航,在此基础上本地静态化修改而来。

演示:Simple So
开源地址:https://github.com/zzd/Simple-Search-Page
框架:HTML
点评:

  • 仿一导航风格
  • 通过HTML代码添加网址,管理起来相当麻烦

Simple-Search-Page

基于Vue,一个极简的搜索页面,兼顾网址导航,并加入更多引流页面。

演示:Simple So
开源地址:https://github.com/zzd/Simple-Search-Page
框架:vue
点评:极简风

Search Next导航

一个简单的浏览器主页 / 新标签页,由React编写,支持本地账户切换,多引擎搜索,网址导航

演示:Search Next
开源地址:https://github.com/virzs/Search-Next
框架:

  • nodejs
  • react
    点评:极简风

MarkDown

Hexo + butterfly

基于Hexo + butterfly制作一个简易导航

  1. 新建一个nav页面

    1
    hexo new page nav

    修改Page Front-matter如下

    1
    2
    3
    4
    5
    ---
    title: Pblood 导航
    comments: false
    toc: true
    ---
  2. 修改themes/butterfly/layout/includes/widget/index.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
    #aside-content.aside-content
    //- post
    if is_post()
    - const tocStyle = page.toc_style_simple
    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
    if showToc && tocStyleVal
    .sticky_layout
    include ./card_post_toc.pug
    else
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})
    .sticky_layout
    if showToc
    include ./card_post_toc.pug
    !=partial('includes/widget/card_recent_post', {}, {cache: true})
    !=partial('includes/widget/card_ad', {}, {cache: true})
    else
    //- page
    + if page.path !== "nav/index.html"
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})

    .sticky_layout
    if showToc
    include ./card_post_toc.pug
    + if page.path !== "nav/index.html"
    !=partial('includes/widget/card_recent_post', {}, {cache: true})
    !=partial('includes/widget/card_ad', {}, {cache: true})
    !=partial('includes/widget/card_newest_comment', {}, {cache: true})
    !=partial('includes/widget/card_categories', {}, {cache: true})
    !=partial('includes/widget/card_tags', {}, {cache: true})
    !=partial('includes/widget/card_archives', {}, {cache: true})
    !=partial('includes/widget/card_webinfo', {}, {cache: true})
    !=partial('includes/widget/card_bottom_self', {}, {cache: true})
  3. 修改<li>列表布局(multi_column 多栏布局)

    目的是优化导航页面的显示效果,通过引入 flex 属性的<div>标签,和widgh属性的<div>标签,将<li>列表组包裹起来,实现列表多栏布局

新建文件themes\butterfly\source\js\listdouble.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
document.addEventListener('DOMContentLoaded', function () {

const adjustMenu = (init) => {
if (init) {
blogNameWidth = document.getElementById('site-name').offsetWidth
const $menusEle = document.querySelectorAll('#menus .menus_item')
menusWidth = 0
className = 0
$menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
const $searchEle = document.querySelector('#search-button')
searchWidth = $searchEle ? $searchEle.offsetWidth : 0
$nav = document.getElementById('nav')
multi = document.getElementsByClassName("multi")
column = document.getElementsByClassName("column")
}

let hideMenuIndex = ''
if (window.innerWidth < 768) hideMenuIndex = true
else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120

if (hideMenuIndex) {
var i
for (i = 0; i < multi.length; i++) {
multi[i].classList.remove('multisty')
}
for (i = 0; i < column.length; i++) {
column[i].classList.remove('columnsty')
}
} else {
for (i = 0; i < multi.length; i++) {
multi[i].classList.add('multisty')
}
for (i = 0; i < column.length; i++) {
column[i].classList.add('columnsty')
}

}
}

// 初始化header
const initAdjust = () => {
adjustMenu(true)
}

// 窗口事件
const unRefreshFn = function () {
window.addEventListener('resize', () => {
adjustMenu(false)
})
}

window.refreshFn = function () {
initAdjust()
}

refreshFn()
unRefreshFn()
})

添加 css 样式

1
2
3
4
5
6
7
8
9
10
/* 列表双栏布局 */
/* 添加 flex 属性 */
.multisty{
display: flex;
align-items: flex-start;
}
/* 设置列表宽度 */
.columnsty{
width: 50%;
}

使用:
先在需要多栏布局的.md文件里添加

1
<script src="/js/multi_column.js"></script>

在需要的位置添加<div class="multi"><div class="column">子标签

示例(双栏布局):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="multi">
<div class="column">

### 综合
- [菜鸟教程](https://www.runoob.com/) yyds
- [简单教程](https://www.twle.cn/) 和菜鸟教程很像的网站,简洁无广告,带社区,有点bug,搜索功能也不好使
* [编程自学之路](https://www.r2coding.com/) 华中科技大学大佬自学编程以来所用资源和分享内容的聚合
* [互联网大厂面试每日一题](https://q.shanyue.tech/)
- [W3School](https://www.w3school.com.cn/) Web 技术教程
- [HOW2J.CN](https://how2j.cn/) java 教程
- [C语言中文网](http://c.biancheng.net/)
- [Bash脚本教程](https://wangdoc.com/bash/index.html) 阮一峰编写的Bash文档
- [现代JavaScript教程](https://zh.javascript.info/)

</div>
<div class="column">

### 前端
* [前端学习路线](https://objtube.github.io/front-end-roadmap/)
* [大圣前端自学编程网](https://shengxinjing.cn/) 十年程序员大圣的前端教程
* [前端知识图谱+B站资源整合](https://gitee.com/jishupang/web_atlas)

</div>
</div>

极客导航

基于Webstack制作的Hogo主题,Hugo是由Go语言实现的静态网站生成器。采用Markdown编辑文档,避免了直接编辑HTML代码的麻烦,相较而言方便了一些。

演示:极客导航
开源地址:https://github.com/iplaycode/webstack-hugo
框架:hugo
点评:markdown语法添加链接,相较于HTML体验好一点

纯静态导航目前看来还是这个相对好用,下面开始搭建教程

安装Hugo
  1. 二进制安装(推荐:简单、快速)
    Hugo Releases下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

Mac下直接使用Homebrew安装:

1
brew install hugo
  1. 源码安装
    源码编译安装,首先安装好依赖的工具:
  • Git
  • Mercurial
  • Go 1.3+ (Go 1.4+ on Windows)
    设置好GOPATH环境变量,获取源码并编译:
1
2
export GOPATH=$HOME/go
go get -v github.com/spf13/hugo

源码会下载到$GOPATH/src目录,二进制在$GOPATH/bin/

如果需要更新所有Hugo的依赖库,增加-u参数:

1
go get -u -v github.com/spf13/hugo

作为一个小白,第一步就卡住了😥,Windows系统下配置环境变量就是不生效,原因未知,换个思路,使用WSL子系统安装,曲线救国

  1. 启用WSL子系统
  2. 使用VScode调用WSL命令行窗口,方便
  3. Hugo Releases找到适合WSL子系统的二进制文件压缩包,使用wget下载
    1
    wget https://github.com/gohugoio/hugo/releases/download/v0.98.0/hugo_0.98.0_Linux-64bit.tar.gz
  4. 使用tar解压
    1
    tar xvf hugo_0.98.0_Linux-64bit.tar.gz
  5. 移动hugo二进制文件到用户可执行程序目录/usr/local/bin,就可以使用hugo命令了
    1
    mv hugo /usr/local/bin
初始化 hugo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 初始化博客,blog是自己的博客根目录名称,可以自定义
hugo new site blog
# 进入博客目录
cd blog
# 克隆webstack-hugo主题到themes目录
git clone https://github.com/iplaycode/webstack-hugo themes/webstack-hugo
# 删除主题git项目残留文件
rm -rf themes/webstack-hugo/.git themes/webstack-hugo/.gitignore themes/webstack-hugo/LICENSE themes/webstack-hugo/README.md
# 将themes/webstack-hugo/exampleSite/目录下的内容复制到博客根目录
cp -a themes/webstack-hugo/exampleSite/* ./
# 本地预览
hugo server
# 生成静态文件(public)
hugo
项目结构
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
.
├── archetypes
│ └── default.md
├── config.toml # 站点配置文件
├── content
│ └── about.md
├── data
│ └── webstack.yml # 网址配置文件
├── layouts
├── public # 静态文件
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── webstack-hugo
├── exampleSite
├── layouts
│ ├── 404.html
│ ├── _default
│ │ └── single.html
│ ├── index.html
│ └── search.html
├── static
└── theme.toml
修改配置

添加公众号二维码,修改webstack.yml配置文件

1
2
3
4
- title: 二维码演示
qrcode: assets/images/webstack-hugo-qrcode.png
logo: assets/images/favicon.png
description: 二维码演示,新增二维码,手机扫一扫

聚合搜索框、夜间模式,修改config.toml站点配置文件

1
2
3
4
[params.search]
enable = true
[params.darkmode]
enable = false

分类标题前面的图标为Font-Awesome-4.7.0,图标样式及名称可到这里参阅

网站图标获取
  1. 域名/favicon.ico
    如:https://www.right.com.cn/favicon.ico
    很多网站的图标都能通过这种方式获取
  2. F12开发者工具寻找
    一般在<head>标签里,或者通过网络工具寻找
  3. 使用第三方图标
  4. 硬核截屏
  5. 使用第三方工具
    一为API:https://api.iowen.cn/doc/favicon.html
部署
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
name: Auto Deploy hugo

on: [push]

jobs: # 工作流
build: # 自定义名称
runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest

steps: # 步骤
- name: Checkout 🛎️
uses: actions/checkout@v3 # 步骤1、检出仓库,获取源码

- name: Setup Hugo
uses: peaceiris/actions-hugo@v2 # 步骤2、安装hugo
with:
hugo-version: latest

- name: Build # 步骤3、构建静态文件
run: hugo

- name: Deploy # 步骤4、部署到gh-pages分支
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./public

步骤4使用deploy_key的方式部署hugogithub pages上。另外还可以使用github_tokenpersonal_token,可参照文档

使用deploy_key,你需要生成一对ssh key密钥,在源码仓库(执行 Github Actions 的仓库)设置私钥,发布仓库(Github Pages 所在仓库)配置公钥。

生成密钥

1
ssh-keygen -f hugo -C '用户邮箱'

在发布仓库(Github Pages 所在仓库)配置公钥,Settings->Deploy Keys->Add deploy key,记得一定要勾上Allow write access选项。

在源码仓库(执行 Github Actions 的仓库)设置私钥,Settings->Secrets->New repository secret,Name填ACTIONS_DEPLOY_KEY,要和ci代码里保存一致。

动态导航

WordPress

WordPress-Webstack

基于 WordPress 的 WebStack 主题,该作者后面还推出了升级版主题 一导航

演示:WordPress-webstack
开源地址:https://github.com/owen0o0/WebStack
框架:

  • Wordpress
  • PHP 5.7+ 7.0+
    点评:使用WordPress改变了原版WebStack笨拙的数据添加方式,可以通过数据库操作网址了

WordPress-一导航

WordPress-webstack 升级版,集网址、资源、资讯于一体的 WordPress 导航主题(付费主题¥218),界面美观,实用性高,花钱的就是好

演示:一导航
付费地址:https://www.iotheme.cn/
框架:

  • Wordpress 5.5+
  • PHP 7.3+

Typecho

Typecho-Gogobody

基于纯静态的网址导航Webstack制作的Typecho主题,仿一导航风格

演示:暂无
开源地址:https://github.com/gogobody/WebStack
框架:

  • Typecho
  • PHP

Typecho-SEOGO

基于Webstack制作的Typecho主题

演示:暂无
开源地址:https://www.seo135.com/seogo/webstack.html
框架:

  • Typecho
  • PHP
    点评:
  • Webstack风格
  • 移动端下拉后导航栏不常驻

注意:作者已经不打算更新了,并且开了一个新坑Typecho二次元导航主题52ecy,售价58¥,付费主题不作介绍,看着质量还可以就提一下

独立后台

Onenav

没啥花里胡哨的功能,中规中矩的一款导航,支持多主题

演示:挖站否导航
开源地址:https://github.com/helloxz/onenav
框架:PHP + SQLite3

Onenav(落幕魔改)

演示:OneNav Extend
开源地址:https://gitee.com/tznb/OneNav
框架:PHP + SQLite3

六零导航

支持多主题

演示:六零导航页
开源地址:https://gitee.com/LyLme/lylme_spage | 静态版
框架:PHP + MySql