nav 安装部署

Dockerfile安装

git拉取代码后,可以用docker编译docker部署
我分了两种部署方式,一种是调试状态,一种是线上生产状态
调试状态

FROM liwenchao1995/centos7:v01
WORKDIR /opt/nav/
CMD ["/bin/bash", "-c", "source /etc/profile && yarn && yarn start --host 0.0.0.0 >> run.log 2>&1 & tail -f /dev/null"]


#docker build -t nav:v01 .
#docker run -itd --name nav -p 7000:7001 -v  /home/liwenchao/nav/nav/:/opt/nav/  nav:v01

线上生产状态

FROM liwenchao1995/centos7:v01
WORKDIR /opt/nav/
CMD ["/bin/bash", "-c", "source /etc/profile && yarn && yarn start --host 0.0.0.0 >> run.log 2>&1 & tail -f /dev/null"]


#docker build -t nav:v01 .
#docker run -itd --name navbuild -v  /home/liwenchao/nav/nav/:/opt/nav/  nav:v01

#will have a dist directory create by app in /home/liwenchao/nav/nav/dist

1.1 nav介绍

nav是一个纯静态、支持SEO、在线编辑的强大导航网站,由css,js纯静态文件组成,无需依赖后端服务既简单又方便,没有繁杂的配置和数据库等, 开箱即用。
🍰 内置 800+ 实用网站。
🍰 支持 SEO。
🍰 完全纯静态, 提供自动化部署功能。
🍰 三叉树分类、结构清晰、分类清晰。
🍰 支持一个网站关联多个网址
🍰 颜值与简约并存,不再是杀马特时代。
🍰 完全开源,轻松定制化。
🍰 支持多种浏览模式,创新。
🍰 支持足迹记忆。
🍰 支持移动端浏览。
🍰 支持搜索查询。
🍰 支持自定义引擎搜索。
🍰 多款主题切换。
🍰 支持暗黑模式。
🍰 支持后台管理, 无需部署。
🍰 支持从Chrome书签导入
🍰 多种Loading加载动画

2.1 下载地址

https://github.com/xjh22222228/nav

2.1.1 目录结构

3.1 安装部署

3.1.1 部署方式一 gh-pages免费

1、Fork 当前项目。
2、https://github.com/settings/tokens 申请 token, 勾选相应的权限, 如果不懂就全部选中,复制并保存Token。
3、https://github.com/用户名/nav/settings/secrets/actions/new 添加申请的token, name填写 TOKEN 大写。
4、打开 https://github.com/用户名/nav/actions 点击 绿色按钮
5、务必修改项目配置文件 nav.config.ts
6、5分钟后打开 https://用户名.github.io/nav 就能看到一个非常强大的导航网站了。

3.1.2 部署方式二 Vercel免费

和方式一的步骤一样,除了第4步不用。
具体使用跟着步骤走即可 https://github.com/apps/vercel

3.1.3 部署方式三 Netlify免费

https://www.netlify.com/

3.1.4 在本地安装测试时

1、git clone https://github.com/xjh22222228/nav;cd nav #clone代码
2、yarn 编译安装模块到node_module文件夹下
3、yarn start 在本地启动,可以访问本地http://127.0.0.1:7001
4、yarn build 编译打包,生成dist文件夹,可以放到其他nginx下面作为静态资源访问

mv dist nav
vim nginx.conf 
...
        location  /nav {
           index /nav/index.html;
        }
...

nginx启动后访问 http://127.0.0.1:80/nav/

4.1 升级版本

在升级之前请备份根目录下的 data 文件夹和 nav.config.ts, 升级完后替换即可。

注意:

这里的nav.config.ts 里面的信息要填写你的github地址,否则后面用token同步数据会报错,因为你的token无法同步到别人的gitlab。
点击右上角 Watch 按钮第一时间跟踪版本升级。

5.1 登录后台

将路由地址修改为 system 即可进入,如: https://www.nav3.cn/#/light 修改为 https://www.nav3.cn/#/system
登录需要的token是第三步3.1.1获取的token

这里我创建了一个有90天时效的token

6.1 支持书签导入

支持从 Chrome 书签导入,会自动检测满足三级分类的导航,其他一律设为未分类:

7.1 二次开发

代码基于TypeScript 开发的内容。
https://www.html.cn/qa/javascript/23399.html
TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是 JavaScript 的超集,包含了 JavaScript 的所有元素,可以载入 JavaScript 代码运行,并扩展了 JavaScript 的语法。

7.1.1 区别

TypeScript 可以使用 JavaScript 中的所有代码和编码概念,TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如,TypeScript 使用类型和接口等概念来描述正在使用的数据,这使开发人员能够快速检测错误并调试应用程序
TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作,同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 中的数据要求带有明确的类型,JavaScript不要求。
TypeScript 为函数提供了缺省参数值。
TypeScript 引入了 JavaScript 中没有的“类”概念。
TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中。
TypeScript 的优势
下面列举 TypeScript 相比于 JavaScript 的显著优势:

1. 静态输入

静态类型化是一种功能,可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能,就会允许开发人员编写更健壮的代码并对其进行维护,以便使得代码质量更好、更清晰。

2. 大型的开发项目

有时为了改进开发项目,需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果,因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

3. 更好的协作

当发开大型项目时,会有许多开发人员,此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能,而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

4. 更强的生产力

干净的 ECMAScript 6 代码,自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

JavaScript 的优势

相比于 TypeScript,JavaScript 也有一些明显优势。

1. 人气

JavaScript 的开发者社区仍然是巨大而活跃的,在社区中可以很方便地找到大量成熟的开发项目和可用资源。

2. 学习曲线

由于 JavaScript 语言发展的较早,也较为成熟,所以仍有一大批开发人员坚持使用他们熟悉的脚本语言 JavaScript,而不是学习 TypeScript。

3. 本地浏览器支持

TypeScript 代码需要被编译(输出 JavaScript 代码),这是 TypeScript 代码执行时的一个额外的步骤。

4. 不需要注释

为了充分利用 TypeScript 特性,开发人员需要不断注释他们的代码,这可能会使项目效率降低。

5. 灵活性

有些开发人员更喜欢 JavaScript 的灵活性。
以上就是typescript和js的区别是什么的详细内容,更多请关注html中文网其它相关文章!

本文摘自:https://blog.yuaogroup.top/archives/nav#特性

posted @ 2022-03-16 11:08  liwenchao1995  阅读(178)  评论(0编辑  收藏  举报