Skip to content

EvanNav_v6.2

Choose a tag to compare

View all tags
@EvanTop EvanTop released this 15 Apr 13:24
· 8 commits to main since this release
EvanNav_v6.2
5608800
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

EvanNav_v6.2 Release

  • 轻盈设计，优雅体验，专属你的个人私有化导航和收藏
  • 一位HR写的第一个程序，基于Node.js多点鼓励，多点星星✨
  • 欢迎推荐给任何平台或个人，祝大家玩的愉快！

250shots_so

EvanNav_v6.2版本升级

优化内容概述

本次更新对后台管理界面进行了四项主要优化：

  1. 链接管理分类功能：在"链接管理"标签页面添加了分类过滤功能，与前台分类保持一致，可以在特定分类下新增链接
  2. 按钮布局重组：重新组织了链接管理页面的按钮布局，添加了分类按钮，并将操作按钮移至底部
  3. 页码导航功能：在分页控制区域添加了页码导航，方便在数据量大时快速跳转到指定页面
  4. 搜索功能实现：在后台页面添加了搜索功能，支持模糊搜索链接列表中的内容

修改文件清单

  1. /public/index.html - 添加了分类过滤器、页码导航和搜索框
  2. /public/admin-styles.css - 添加了新元素的样式定义
  3. /public/script.js - 添加了分类过滤、页码导航和搜索功能的实现

详细修改说明

1. 链接管理分类功能

在链接管理标签页面添加了分类过滤功能，使用户可以按分类查看和管理链接。分类与前台分类保持一致，在特定分类下新增的链接会自动归类到当前分类中。

实现方式：

  • 在HTML中添加了分类过滤器容器
  • 添加了adminCurrentCategory全局变量来跟踪当前选中的分类
  • 实现了updateAdminCategoryFilters()函数动态生成分类按钮
  • 修改了renderAdmin()函数，支持按分类过滤链接

2. 按钮布局重组

重新组织了链接管理页面的按钮布局，将分类按钮放在链接列表上方，将"新增链接"、"全部保存"、"导入链接"、"导出链接"等操作按钮移至链接列表底部。

实现方式：

  • 修改了HTML结构，添加了admin-bottom-actions区域
  • 在CSS中添加了相应的样式定义
  • 保留了原有按钮的功能，只是改变了它们的位置

3. 页码导航功能

在"上页"和"下页"按钮之间添加了页码导航，使用户可以直接点击页码跳转到指定页面，方便在数据量大时的翻页操作。

实现方式：

  • 在HTML中添加了页码容器
  • 实现了updateAdminPaginationButtons()函数动态生成页码
  • 添加了页码按钮的样式定义
  • 实现了页码点击跳转功能

4. 搜索功能实现

在后台页面添加了搜索功能，支持模糊搜索链接列表中的内容，包括名称、网址、分类和简介。

实现方式：

  • 在页面顶部添加了搜索框
  • 添加了searchQuery全局变量存储搜索关键词
  • 实现了searchLinks()函数处理搜索逻辑
  • 修改了renderAdmin()函数，支持按搜索关键词过滤链接

使用说明

分类过滤功能

  1. 在"链接管理"标签页中，可以看到链接列表上方的分类按钮
  2. 点击分类按钮可以筛选出该分类下的所有链接
  3. 点击"全部"按钮可以查看所有链接
  4. 在特定分类下点击"新增链接"，新链接会自动归类到当前分类中

页码导航功能

  1. 在链接列表底部的"上页"和"下页"按钮之间可以看到页码
  2. 点击页码可以直接跳转到对应页面
  3. 当页数较多时，会显示省略号，点击首页或末页可以快速跳转

搜索功能

  1. 在后台页面顶部的"返回前台"按钮前可以看到搜索框
  2. 在搜索框中输入关键词，按回车键或等待自动搜索
  3. 搜索结果会实时显示在链接列表中
  4. 搜索支持链接的名称、网址、分类和简介字段

注意事项

  1. 所有优化功能均不影响原有功能，可以放心使用
  2. 搜索功能和分类过滤可以同时使用，实现更精确的筛选
  3. 在移动端设备上，分类按钮和页码会自动适应屏幕宽度，提供良好的用户体验
  4. 所有新增功能都保持了与原有界面风格的一致性

EvanNav_v6.2项目部署文档

一、环境准备

1.1 服务器环境

  • 操作系统：CentOS 7 或 Ubuntu 20.04
  • 硬件要求：至少 1 核 CPU，2GB 内存，20GB 磁盘空间
  • 网络要求：确保服务器能够访问互联网，且防火墙允许 HTTP/HTTPS 流量

1.2 安装 Node.js 环境

  1. 登录宝塔面板：使用浏览器访问 http://your-server-ip:8888，并登录宝塔面板。
  2. 进入软件商店：点击左侧菜单中的“软件商店”。
  3. 安装 Node.js：
    • 在软件商店中搜索“Node.js”。
    • 选择合适的版本（建议使用 LTS 版本）并点击“安装”。

二、项目部署

2.1 上传项目文件

  1. 创建项目目录：mkdir -p /www/wwwroot/project
  2. 上传文件：将项目文件上传到 /www/wwwroot/project 目录，可以使用宝塔面板的文件管理器或通过命令行工具如 SCP、FTP。

2.2 安装项目依赖

  1. 进入项目目录：cd /www/wwwroot/project
  2. 安装依赖：npm install

2.3 启动项目

  1. 启动项目：npm start
  2. 启动 server.js：node server.js

2.4 配置项目

  1. 修改配置：根据您的需求修改 data.json 文件中的内容，包括管理员密码等。

三、项目维护

3.1 数据备份

  1. 手动备份：定期备份 data.json 文件和项目数据。
  2. 自动备份：设置 cron 任务定期备份项目数据。

3.2 更新项目

  1. 拉取更新：通过手动上传更新后的项目文件。
  2. 重新安装依赖：npm install
  3. 重启项目：npm start

四、常见问题

4.1 端口占用问题（建议设置自己的端口，在server.js修改）

  • 检查端口占用：netstat -tulnp | grep 3003
  • 杀死占用进程：kill -9 [PID]

4.2 页面显示异常

  • 清除缓存：清除浏览器缓存后重试。
  • 检查文件：确保所有项目文件都已正确上传。

通过以上步骤，您应该能够成功部署和运行 EvanNav 项目。如有其他问题，请参考 Node.js 的官方文档或联系技术支持。

其他信息

  • 默认后台密码：admin123456

  • 官方网站：evan.plus

  • 公众号（解压密码在公众号中发nav获取）：

  • 公众号

  • 打赏码：

  • 公众号

  • QQ交流群：

  • QQ

Assets 3
Loading