Vitepress+EdgeOne Pages快速迁移旧网站内容

Vitepress+EdgeOne Pages快速迁移旧网站内容


目录

• Vitepress+EdgeOne Pages快速迁移旧网站内容
  
  
  
  • 下载旧网站文章、图片
    
  • 网站文章转Markdown
    
  • Vitepress项目快速开始
    
  • EdgeOne Pages零帧起手
    
  • 参考材料
    
  
  

去年在阿里云码上公益平台报名了一个公益项目，这周收到了公益组织负责人的邮件，请求帮助开发一个用于查询志愿者服务时长的网页，另外该组织官网的服务器即将到期，需要尽快迁移服务器上的网站数据。
第一个需求比较简单，使用飞书多维表格的查询视图很快就完成了；第二个就相对复杂了，各种debuff因素加满：

• 官网是基于老旧的CMS系统做的，没有导出文章、图片的功能
  
• 密码丢了，无法远程登录服务器
  
• 服务器几天后就到期，时间紧
  

通过对比AI工具给出的几种建议方案，最终决定使用Vitepress+腾讯云EdgeOne Pages快速搭建网站，迁移旧网站的文章。
本文详细记录使用Vitepress+腾讯云EdgeOne Pages迁移旧网站内容的过程。
下载旧网站文章、图片

• 登录网站CMS后台，打开浏览器开发者工具，通过DOM获取网站文章列表
  
• 通过fetch方法发送网络请求，提取响应网页中的文章内容（富文本，HTML），保存文章内容到本地
  

1. const items = [];
2. const rows = document.querySelectorAll('tr[height="35"]');
3. for (const row of rows) {
4.     const cells = row.querySelectorAll('td');
5.     const id = cells.item(1).textContent.trim();
6.     const links = cells.item(2).querySelectorAll('a');
7.     const category = links.item(0).textContent.slice(1, -1);
8.     const title = links.item(1).textContent.trim();
9.     const updatedAt = cells.item(3).textContent.trim();
10.     items.push({
11.         id,
12.         category,
13.         title,
14.         updatedAt,
15.     });
16. }
18. function stringToDOM(htmlString) {
19.     const parser = new DOMParser();
20.     const doc = parser.parseFromString(htmlString, "text/html");
21.     return doc;
22. }
24. function downloadAsFile(filename, content) {
25.     const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
26.     const url = URL.createObjectURL(blob);
27.     const a = document.createElement("a");
28.     a.href = url;
29.     a.download = filename;
30.     a.style.display = "none";
31.     document.body.appendChild(a);
33.     // 触发点击事件，模拟用户点击下载
34.     a.click();
36.     // 释放URL对象，避免内存泄漏
37.     URL.revokeObjectURL(url);
38.     document.body.removeChild(a);
39. }
41. function sleep(delayTime = 1000) {
42.         return new Promise(resolve => setTimeout(resolve, delayTime));
43. }
45. const recordIds = ["580", "579", ...];
46. for (const id of recordIds) {
47.     fetch(`${baseUrl}/article_edit.php?aid=${id}`)
48.     .then(response => response.text())
49.     .then(html => {
50.         const element = stringToDOM(html);
51.         const content = element.querySelector('textarea#body');
52.         if (content) {
53.             downloadAsFile(`${id}.txt`, content.value);
54.         }
55.     });
56.     await sleep(1500);
57. }

复制代码

• 通过Python lxml解析HTML，抽取其中的图片标签，获取图片链接
  
• 根据图片链接，下载图片到本地
  

1. from lxml import etree
3. parser = etree.HTMLParser()
6. def find_images(html: str) -> list[str]:
7.     """解析HTML，抽取img标签中图片的路径"""
8.     tree = etree.fromstring(html, parser)
9.     images = []
10.     for image in tree.xpath('//img'):
11.         image_url = image.get('src')
12.         if image_url.startswith('/uploads'):
13.             images.append(image_url)
14.     return images
17. images = []
18. for file in (data_dir / 'articles').rglob('*.txt'):
19.     with open(file, mode='r', encoding='utf8') as fp:
20.         html = fp.read()
21.     images.extend(find_images(html))
23. print('Found {} images'.format(len(images)))

复制代码

网站文章转Markdown

Vitepress推荐把图片放到public目录下，在Markdown中通过以/为前缀的路径进行引用，为了保证网站文章在转Markdown后图片路径是正确的，需要在转换之前更新HTML中图片标签的src属性。

• 更新图片标签的src属性
  
• 使用Python markdownify把网站文章转换为Markdown
  

1. from lxml import etree
2. from markdownify import markdownify as md
4. parser = etree.HTMLParser()
7. def handle_image_tags(title, html: str) -> str:
8.     """解析HTML，过滤图片标签，更新图片标签的src属性"""
9.     tree = etree.fromstring(html, parser)
10.     for index, image in enumerate(tree.xpath('//img')):
11.         image_url = image.get('src')
12.         image_name = Path(image_url).name
13.         if not image_url.startswith('/uploads') or image_name not in valid_images:
14.             image.getparent().remove(image)
15.             continue
16.         image.set('src', '/{}'.format(image_name))
17.         image.set('alt', '{}-{}'.format(title, index + 1))
18.     return etree.tostring(tree, encoding='utf8', method='html').decode('utf8')
21. def convert_article_to_markdown(title: str, created_at: str, content: str) -> str:
22.     """HTML文章转Markdown"""
23.     metadata = """---
24. outline: deep
25. title: {}
26. author: 江津阳光社工
27. date: {}
28. version: 1.0
29. ---
31. # {}""".format(title, created_at, title)
32.     converted = md(content, heading_style='ATX').strip()
33.     return metadata + '\n' + converted
36. table = str.maketrans(r'\/:*?"<>|', '_' * 9)
37. filename = title.translate(table) + '.md'

复制代码

Vitepress项目快速开始

• 参考Vitepress快速开始初始化项目，启动起来
  
• 把转换后的网站文章移动docs目录下
  
• 安装插件VitePress Sidebar，自动生成侧边栏
  
• 安装插件vitepress-plugin-image-viewer，点击预览文章中的图片
  
• 编辑Vitepress配置文件docs/.vitepress/config.mjs，最后上传代码到Github:
  

1. import { defineConfig } from 'vitepress'
2. import { withSidebar } from 'vitepress-sidebar';
4. function nav() {
5.   return [
6.     {
7.       text: '关于我们',
8.       items: [
9.         {
10.             text: '荣誉资质',
11.             link: '/about-us/awards-and-certifications/中心资质.md',
12.         },
13.         {
14.             text: '组织架构',
15.             link: '/about-us/organizational-structure/江津阳光社工中心组织架构.md',
16.         },
17.       ]
18.     },
19.     // ...
20.   ]
21. }
23. // https://vitepress.dev/reference/site-config
24. const vitePressOptions = {
25.   title: "江津阳光社会工作服务中心",
26.   description: "让儿童都能健康快乐成长，让社区更加和谐幸福。",
27.   lang: "zh-CN",
28.   locales: {
29.     "/": {
30.       label: "简体中文",
31.       lang: "zh-CN",
32.     },
33.   },
34.   lastUpdated: true,
35.   themeConfig: {
36.     nav: nav(),
38.     search: {
39.       provider: "local",
40.       options: {
41.         placeholder: "搜索文章",
42.         translations: {
43.           button: { buttonText: "搜索文章" },
44.           modal: {
45.             searchBox: {
46.               resetButtonTitle: "清除查询条件",
47.               resetButtonAriaLabel: "清除查询条件",
48.               cancelButtonText: "取消",
49.               cancelButtonAriaLabel: "取消",
50.             },
51.             startScreen: {
52.               recentSearchesTitle: "搜索历史",
53.               noRecentSearchesText: "没有搜索历史",
54.               saveRecentSearchButtonTitle: "保存至搜索历史",
55.               removeRecentSearchButtonTitle: "从搜索历史中移除",
56.               favoriteSearchesTitle: "收藏",
57.               removeFavoriteSearchButtonTitle: "从收藏中移除",
58.             },
59.             errorScreen: {
60.               titleText: "无法获取结果",
61.               helpText: "你可能需要检查你的网络连接",
62.             },
63.             footer: {
64.               selectText: "选择",
65.               navigateText: "切换",
66.               closeText: "关闭",
67.               searchByText: "搜索提供者",
68.             },
69.             noResultsScreen: {
70.               noResultsText: "无法找到相关结果",
71.               suggestedQueryText: "你可以尝试查询",
72.               reportMissingResultsText: "你认为该查询应该有结果？",
73.               reportMissingResultsLinkText: "点击反馈",
74.             },
75.           },
76.         },
77.       },
78.     },
80.     footer: {
81.       copyright: `版权所有 © 2019-${new Date().getFullYear()} 重庆市江津阳光社会工作服务中心`
82.     },
84.     docFooter: {
85.       prev: '上一页',
86.       next: '下一页'
87.     },
89.     outline: {
90.       label: '页面导航'
91.     },
93.     lastUpdated: {
94.       text: '最后更新于',
95.       formatOptions: {
96.         dateStyle: 'short',
97.         timeStyle: 'medium'
98.       }
99.     },
101.     langMenuLabel: '多语言',
102.     returnToTopLabel: '回到顶部',
103.     sidebarMenuLabel: '菜单',
104.     darkModeSwitchLabel: '主题',
105.     lightModeSwitchTitle: '切换到浅色模式',
106.     darkModeSwitchTitle: '切换到深色模式',
107.     skipToContentLabel: '跳转到内容',
108.   }
109. };
111. const vitePressSidebarOptions = [
112.     {
113.         documentRootPath: 'docs',
114.         scanStartPath: 'about-us',
115.         basePath: '/about-us/',
116.         resolvePath: '/about-us/',
117.         collapsed: true,
118.         capitalizeFirst: true,
119.         useTitleFromFrontmatter: true,
120.         useFolderTitleFromIndexFile: true,
121.     },
122.     // ...
123. ];
125. export default defineConfig(withSidebar(vitePressOptions, vitePressSidebarOptions));

复制代码

注意：由于VitePress Sidebar插件默认按目录名生成侧边栏，需要在目录下添加index.md文件，指定名称才能让侧边栏显示为中文。

1. ---
2. title: 荣誉资质
3. ---

复制代码

EdgeOne Pages零帧起手

EdgeOne Pages是基于Tencent EdgeOne基础设施打造的前端开发和部署平台，专为现代Web开发设计，帮助开发者快速构建、部署静态站点和无服务器应用。通过集成边缘函数能力，实现高效的内容交付和动态功能扩展，支持全球用户的快速访问。

• 连接Github仓库
  
• 填写构建参数：
  
  
  
  • 输出目录：docs/.vitepress/dist
    
  • 编译命令：pnpm run docs:build
    
  • 安装命令：pnpm install
    
  
  
• 点击开始部署，部署完成后就可以通过临时（3小时）的域名访问网页了，添加自定义域名后，即可通过自己的域名访问网站。
  

参考材料

• 飞书多维表格的查询视图
  
• VitePress由Vite和Vue驱动的静态站点生成器
  
• EdgeOne Pages文档
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！