提交 fa3c61c3 authored 作者: Gorvey's avatar Gorvey

feat: update docs

上级 7ee020ce
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
# home-land-pages
# 项目说明
本项目是基于 Framer 平台开发的静态网站项目,用于展示和部署公司官网相关的静态资源。
## 技术栈
- Framer:用于设计和开发响应式网页
- 静态资源托管:用于部署和展示网站内容
## 关于 Framer 平台
Framer 是一个强大的网页设计和开发平台,提供丰富的模板和组件库。
- 官网地址:[www.framer.com](https://www.framer.com)
- 模板市场:[Framer Templates](https://www.framer.com/marketplace/templates/)
- 项目工作空间:[项目链接](https://framer.com/projects/test-landing--aRiYrO4qSwSjW8Ir2ITm-3GqQ9)
> 注意:访问 Framer 平台需要科学上网
## 项目结构
- `iep/`: 智慧教育平台官网相关资源
官网静态页面
\ No newline at end of file
# Framer离线化处理指南
## 前言
Framer 不提供源代码,并且只能部署在Framer的服务器上,国内没有加速渠道打开非常慢。所以只能将Framer产出的HTML,CSS,JS文件下载到本地离线运行
## 离线化步骤
### 1. 准备工作
- Framer平台产出的页面URL
- 工具-[WebCopy](https://www.cyotek.com/)
- VSCode插件-Live Server
-
### 2. 使用 [WebCopy](https://www.cyotek.com/) 下载页面
![WebCopy下载页面示意图](./docs/image/1.png)
1. 打开 WebCopy 工具
2. 在 URL 输入框中输入 Framer 项目地址
3. 点击copy按钮,等待下载完成
这个工具会下载HTML中的网络资源,css,js,图片,字体文件。并且会自动替换原地址为本地下载后的地址
实例:
原地址: https://framerusercontent.com/sites/icons/default-favicon-light.v1.png
修改后:
```
<link href="sites/icons/default-favicon-light.v1.png" rel="icon" media="(prefers-color-scheme: light)">
```
部分图片,js文件由js发送的这个工具替换不到,需要手动处理
### 3. 使用VSCode插件Live Server运行页面
1. 安装Live Server插件
- 打开VSCode
- 点击左侧扩展图标(或按Ctrl+Shift+X)
- 搜索"Live Server"
- 安装"Live Server"插件(作者:Ritwick Dey)
2. 运行页面
- 在VSCode中打开下载好的项目文件夹
- 右键点击index.html文件
- 选择"Open with Live Server"
- 浏览器会自动打开页面,默认地址为 http://127.0.0.1:5500
### 4. 检查网络请求
![2](./docs/image/2.png)
![3](./docs/image/3.png)
1. 检查图片,js资源是否下载成功。如果遇到404的需要手动操作
2. 去除Framer 追踪js文件
```
<body>
<script async="" src="script?v=2" data-fid="f4e5c00c7c75198d89a1b539478a97332a181e07337aac424d6dc6ffa56c6acf" data-no-nt=""></script>
```
3. 修改html header标签中的meta信息
```
<meta name="framer-search-index" content="https://framerusercontent.com/sites/7Dgvxw2WMZrjEKI773L803/searchIndex-_-3UbMwLNc_I.json">
```
4. 改变页面宽度,响应式布局会发起图片请求。是从js里面发起的,需要手动替换
![4](./docs/image/4.png)
![5](./docs/image/5.png)
### 5. 最后-断网运行
1. 查看页面是否和原页面一致
- 对比原页面和离线页面的视觉效果
- 检查所有交互功能是否正常工作
- 验证响应式布局在不同设备尺寸下的表现
2. 检查网络请求
- 打开浏览器开发者工具(F12)
- 切换到 Network 标签页
- 刷新页面,确认没有发起任何非本地的请求
- 特别注意检查以下类型的请求:
* 图片资源
* JavaScript 文件
* CSS 样式表
* 字体文件
4. 最终确认
- 完全断开网络连接
- 重新打开页面,确认所有功能正常运行
- 离线化处理结束
\ No newline at end of file
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论