Nav-Manage-为静态导航带来强大的管理扩展!

 

Nav-Manage-为静态导航带来强大的管理扩展!插图

前言

Nav-Manage项目本身是为我的个人导航站NOISE导航而开发的,但导航本身是开源的,加上静态部署的导航网站或许会是每个人的首选,所以在此基础上,做了多种功能的进一步强化,让导航站更像一个属于你个人的产品,也让管理书签网址类的形式多一种选择!

还有,这是我首次开发浏览器扩展项目,如果前端样式不美观还请多多谅解!

说明

Nav-Manage由后端API+前端扩展组成

服务基础为WebStack 网址导航 Hugo 主题

数据格式标准为

---
- taxonomy: 常用推荐
  icon: far fa-star
  links:
    - title: 频道页面
      logo: https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/7877y.jpeg
      url: https://tg.noisework.cn
      description: 我的TG频道页面
    - title: NOISE&Blog
      logo: pin.png
      url: https://www.noiseblogs.top
      description: 我的博客站
    - title: NOISE主页
      logo: https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/20230801/NOISELOGO.4cy9whhpaf00.jpg
      url: https://www.noisework.cn/home
      description: 个人引导页,站点入口
- taxonomy: 媒体创作
  icon: fas fa-folder-open fa-lg
  list:
    - term: CG三维
      links:
        - title: CG爱好者
          logo: www.cgahz.com.ico
          url: http://www.cgahz.com
          description: 影视后期相关资源
        - title: CG99-CG设计网
          logo: cg99.ico
          url: https://www.cg99.com
          description: 专注全球CG设计行业,以CG模型为主的资源下载和分享平台

理论上支持所有该格式标准的项目,所以你可以进一步延伸使用。

这是为静态导航而开发的功能增强为主的扩展,开源仓库为后端,前端请安装扩展使用!

后端支持一键部署到 Railway和Zeabur

使用该项目,你可以轻松添加删除你的网站书签、更新推送通知到你的社群,更好的获取网站更新内容及带来一些自动化的体验!

项目地址:https://github.com/rcy1314/nav-manage

演示导航站:NOISE导航

Nav-Manage-为静态导航带来强大的管理扩展!插图1安装扩展

Gooogle chrome:已提交,待审核通过

Microsoft Edge:已提交,待审核通过

暂未通过审核,你可以访问主页使用终端菜单功能或添加我的微信后,发送关键词”nav扩展“来获取前端扩展

Nav-Manage-为静态导航带来强大的管理扩展!插图2

一键部署

使用 Railway 部署

点击下面的按钮,快速将应用部署到 Railway:

Nav-Manage-为静态导航带来强大的管理扩展!插图3

部署成功后确保项目设置中开启网络选项,默认开启http,该链接为服务端地址

Nav-Manage-为静态导航带来强大的管理扩展!插图1

使用 Zeabur 部署

点击下面的按钮,快速将应用部署到 Zeabur:

Nav-Manage-为静态导航带来强大的管理扩展!插图4

点击模版后输入环境变量点击部署,确保项目设置中开启网络选项,该链接为服务端地址

Nav-Manage-为静态导航带来强大的管理扩展!插图5

环境变量说明

在 Railway 或 Zeabur 上,你需要设置以下环境变量:

  • PORT: 服务器监听的端口(可选,默认是 8980)。

  • DATA_DIR: 存储 数据 文件的目录(如果没有设置 DATA_DIR,则默认使用 /data/ 作为文件路径)

  • GITHUB_TOKENGitHub 访问令牌,用于认证 API 请求。(GitHub API 限制:如果你在短时间内发送了太多请求,GitHub API 可能会限制你的请求。确保在调用 API 时遵循 GitHub 的速率限制。)

  • GITHUB_REPO: GitHub 仓库(格式:username/repo)。

  • GITHUB_BRANCH: 默认分支(可选,默认是 main)。

  • TELEGRAM_BOT_TOKEN可选:用于发送 Telegram 消息的机器人令牌。你需要在 Telegram 中创建一个机器人并获取此令牌。

  • TELEGRAM_CHAT_ID可选:指定接收 Telegram 消息的聊天 ID。可以是个人聊天 ID 或群组 ID。

  • NAVIGATION_URL可选:指定导航站的 URL,用于在 Telegram 消息中提供链接。

  • WEBHOOK_URL :可选:Webhook 通知,可联动自动化集成推送到其它平台

  • STORAGE_FILE_PATH:可选:持久化存储更新数据,用于嵌入网站等

API请求示例

添加数据到文件

fetch('http://你部署的域名/api/yaml', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        filePath: 'path/to/file.yaml',
        newData: { key: 'value' }
    })
})
.then(response => response.json())
.then(data => {
    console.log('添加数据响应:', data);
})
.catch(error => console.error('添加数据时出错:', error));

删除条目

fetch('http://你部署的域名/api/delete', {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        filePath: 'path/to/file.yaml',
        entryToDelete: { key: 'value' }
    })
})
.then(response => response.json())
.then(data => {
    console.log('删除条目响应:', data);
})
.catch(error => console.error('删除条目时出错:', error));

更新条目

fetch('http://你部署的域名/api/update', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        filePath: 'path/to/file.yaml',
        entryToUpdate: { key: 'oldValue' },
        newData: { key: 'newValue' }
    })
})
.then(response => response.json())
.then(data => {
    console.log('更新条目响应:', data);
})
.catch(error => console.error('更新条目时出错:', error));

请确保将 'http://你部署的域名' 替换为实际的域名,并根据需要调整路径和参数。

获取更新通知

fetch('http://你部署的域名/api/notifications')
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            console.log(data.message);
        } else {
            data.forEach(update => {
                console.log(`标题: ${update.title}`);
                console.log(`Logo: ${update.logo}`);
                console.log(`URL: ${update.url}`);
                console.log(`描述: ${update.description}`);
            });
        }
    })
    .catch(error => console.error('获取更新通知时出错:', error));

搜索请求

const keyword = '示例关键词';
const filePath = 'path/to/file.yaml';

fetch(`http://你部署的域名/api/search?keyword=${encodeURIComponent(keyword)}&filePath=${encodeURIComponent(filePath)}`)
    .then(response => response.json())
    .then(results => {
        results.forEach(link => {
            console.log(`标题: ${link.title}`);
            console.log(`描述: ${link.description}`);
            console.log(`URL: ${link.url}`);
        });
    })
    .catch(error => console.error('搜索请求失败:', error));

Webhook 触发

fetch('http://你部署的域名/api/webhook', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        event: 'exampleEvent',
        data: { key: 'value' }
    })
})
.then(response => response.json())
.then(data => {
    console.log('Webhook 响应:', data);
})
.catch(error => console.error('Webhook 请求失败:', error));

获取文件

fetch('http://你部署的域名/api/files?filePath=path/to/file.yaml')
    .then(response => response.json())
    .then(data => {
        console.log('文件内容:', data);
    })
    .catch(error => console.error('获取文件时出错:', error));

删除文件

fetch('http://你部署的域名/api/files', {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        filePath: 'path/to/file.yaml'
    })
})
.then(response => response.json())
.then(data => {
    console.log('删除文件响应:', data);
})
.catch(error => console.error('删除文件时出错:', error));

⚠️

示例为 'http://你部署的域名/API'

TG通知预览

Nav-Manage-为静态导航带来强大的管理扩展!插图6

结合webhook微信的通知

Nav-Manage-为静态导航带来强大的管理扩展!插图7

功能说明

  1. 获取文件列表GET /data – 返回 /data 文件夹中的数据 文件列表。

  2. 获取特定文件内容GET /data/:filename – 返回指定数据文件的内容。

  3. 添加数据到 文件POST /api/yaml – 向指定的 数据 文件添加新数据条目。

  4. 搜索条目GET /api/search – 在指定数据 文件中搜索条目。

  5. 删除条目DELETE /api/delete – 从指定的数据文件中删除条目。

  6. 更新条目PUT /api/update – 更新指定数据文件中的条目。

  7. 获取更新数据:GET /api/notifications – 获取最新更新站点的数据。

  8. Webhook 通知:通过环境变量 WEBHOOK_URL 发送 Webhook 通知。可选设置

  9. 持久化存储:通过 STORAGE_FILE_PATH 环境变量指定仓库路径json文件来存储更新数据,已设置限制为最大存储40条

注意事项

确保在 GitHub 上创建一个访问令牌,并为其分配必要的权限(必须包含读取和写入仓库权限)。

Nav-Manage-为静态导航带来强大的管理扩展!插图1

安装所有依赖的命令

在项目根目录下,运行以下命令以安装所有依赖:

npm install

本地及云服务器运行使用

前提,本地或云服务器有安装node.js,版本兼容16及以上

下载安装:https://nodejs.org/zh-cn/download/package-manager

仓库中的next-local文件夹中的文件为运行文件,你可以下载到本地使用

注意!本地的代码和一键部署的不同,需要你手动修改代码中文件路径然后启动服务!

  • 修改用于存储网站更新数据的json文件为你自己的实际文件路径(必须设置)

  • 修改所有标注”请修改你的文件实际路径“为你的文件路径,比如我把server放入根目录,则数据文件路径为/data/ (此项必须设置)

  • 修改你的wenhook地址为实际使用地址(可忽略保持空字符)

  • 修改telegram bot token及你的tg频道(可为空)

  • 361行中添加了运行hugo的命令,如果你没有想让网站自动更新可删除该命令代码

修改后,运行安装依赖

npm install express js-yaml cors axios

如果你的云服务器已安装好node.js和依赖,可以使用进程管理器一键启动

一键部署导航站

这是为没有部署导航站的朋友准备的

✅ 【点击展开】

说明:这是导航站的部署模版,非本项目的一键部署,如果一键部署链接失效请使用模版地址fork或导入部署即可!

项目来源:https://github.com/shenweiyan/WebStack-Hugo

模版地址:https://github.com/rcy1314/webstack-hugo-templates

Netlify

Nav-Manage-为静态导航带来强大的管理扩展!插图8

Vercel

Nav-Manage-为静态导航带来强大的管理扩展!插图9

GitHub Pages

点击使用 GitHub Pages 部署

Webify

Nav-Manage-为静态导航带来强大的管理扩展!插图10

复刻模版后选择导入

Cloudflare Pages

Nav-Manage-为静态导航带来强大的管理扩展!插图11

复刻模版后选择导入

GitHub action 工作流运行

构建页面工作流将在您点击 “Start Workflow” 按钮后立即运行,并且在每次 main 分支有变动时也会自动运行

自动检测失效链接工作流将在您点击 “Start Workflow” 按钮后立即运行,需要定时运行时取消cron前的#符号即可

</details>

致谢

感谢shenweiyan带来的WebStack 网址导航 Hugo 主题项目

补充

要使用自动化检测并删除失效链接请前往详细文档查看

  • 打赏
  • 分享
分享到...
Nav-Manage-为静态导航带来强大的管理扩展!插图12
请选择打赏方式
Nav-Manage-为静态导航带来强大的管理扩展!插图12
Nav-Manage-为静态导航带来强大的管理扩展!插图13 Nav-Manage-为静态导航带来强大的管理扩展!插图14
  • 微信
  • 支付宝
© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容