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

作者 : noise 发布时间： 2024-09-14

前言

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导航

视频介绍

视频已压缩过了，预览高清视频请前往公众号NOISE宝藏阁查看

安装扩展

Gooogle chrome：已提交，待审核通过

Microsoft Edge：已提交，待审核通过

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

一键部署

使用 Railway 部署

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

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

使用 Zeabur 部署

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

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

环境变量说明

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

PORT: 服务器监听的端口（可选，默认是 8980）。
DATA_DIR: 存储数据文件的目录（如果没有设置 DATA_DIR，则默认使用 /data/ 作为文件路径）
GITHUB_TOKEN: GitHub 访问令牌，用于认证 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));