本文目录

门户页

从GoEdge v1.3.3开始,GoEdge提供了一个默认的门户页:

启用门户页

在“系统设置” – “基础设置“ – ”用户界面设置“中可以设置门户页面的启用和停用:

其中:

  • 启用门户页面 - 启用门户页面后,访问用户系统首页会自动跳转到 /portal 门户页面
  • Logo图 - 显示在门户页面上的图标,请使用PNG格式;这里单独设置一个Logo,是为了更好地适应门户页面的背景颜色

启用后,等几分钟,再访问用户系统首页,即可自动跳转到门户页面。

和自定义页关系

如果你已经在 用户系统目录/www/ 中开发了自己的 自定义门户页面,那么以自定义的优先。

文章管理

可以在“系统设置” – “基础设置“ – ”用户界面设置“ – “文章管理”中管理门户页面中展示的文章,其中“全站”产品的文章分类“支持与服务”下的文章,将会展示在门户页页脚处。

开发门户页

如果你需要在我们提供的内置门户页基础上开发自己的页面,可以在 https://github.com/TeaOSLab/EdgeUser-Portal获得门户页源码。

项目初始化

使用以下命令初始化项目:

npm install

开发

主要技术栈

前端技术栈主要有:

目录结构

所有门户资源均在 src/ 目录下:

assets/      - 静态资源
components/  - 组件
configs/     - 配置
portal/      - 页面
utils/       - 公用库

修改配置

动手之前,你需要将 configs/configs.js 中的 hostURL 的用户系统URL改为你实际安装的用户系统URL:

// change host below to your user system host or domain
return "http://192.168.2.41:7799" + path
比如你的用户系统地址为https://user.example.com,那么就改成:
// change host below to your user system host or domain
return "https://user.example.com" + path

新增页面

如果要新增一个HTML文件,比如src/portal/test.html,你需要在 vite.config.js 中将此文件加入到 input 文件列表中:

	build: {
		rollupOptions: {
			input: [
				'@/portal/index.html',
				'@/portal/post.html',
				'@/portal/products/index.html',
				'@/portal/products/cdn/index.html',
				'@/portal/test.html'              -- 我们新加的页面
			],
	...			

URL映射

访问URL /page时,系统会尝试查找以下两个不同的路径:

portal/page.html
portal/page/index.html
所以,如果你的页面是 /portal/page/index.html ,那么直接用 /portal/page 访问即可,而不需要 /portal/page/index

测试

使用以下命令启用测试所需的服务:

npm run dev

你可以为你的项目指定访问的域名(比如user.example.com):

npm run dev -- --host user.example.com
如果前端域名和用户系统域名一致,只是端口不同,就可以访问用户系统的登录状态。

编译

使用以下命令编译项目:

npm run build
编译后的所有资源在项目根目录下的 dist/ 目录中,如果此目录不存在,请先创建再编译项目。

部署

将编译后的 dist/ 下的文件拷贝到 edge-user/portal/ 目录下,并重启 edge-user 进程:

edge-user restart
然后即可访问。

GoEdge文档