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

ydXeinhIS

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


目录

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

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

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

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

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

const items = [];const rows = document.querySelectorAll('tr[height="35"]');for (const row of rows) {    const cells = row.querySelectorAll('td');    const id = cells.item(1).textContent.trim();    const links = cells.item(2).querySelectorAll('a');    const category = links.item(0).textContent.slice(1, -1);    const title = links.item(1).textContent.trim();    const updatedAt = cells.item(3).textContent.trim();    items.push({        id,        category,        title,        updatedAt,    });}function stringToDOM(htmlString) {    const parser = new DOMParser();    const doc = parser.parseFromString(htmlString, "text/html");    return doc;}function downloadAsFile(filename, content) {    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });    const url = URL.createObjectURL(blob);    const a = document.createElement("a");    a.href = url;    a.download = filename;    a.style.display = "none";    document.body.appendChild(a);    // 触发点击事件，模拟用户点击下载    a.click();    // 释放URL对象，避免内存泄漏    URL.revokeObjectURL(url);    document.body.removeChild(a);}function sleep(delayTime = 1000) {        return new Promise(resolve => setTimeout(resolve, delayTime));}const recordIds = ["580", "579", ...];for (const id of recordIds) {    fetch(`${baseUrl}/article_edit.php?aid=${id}`)    .then(response => response.text())    .then(html => {        const element = stringToDOM(html);        const content = element.querySelector('textarea#body');        if (content) {            downloadAsFile(`${id}.txt`, content.value);        }    });    await sleep(1500);}

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

from lxml import etreeparser = etree.HTMLParser()def find_images(html: str) -> list[str]:    """解析HTML，抽取img标签中图片的路径"""    tree = etree.fromstring(html, parser)    images = []    for image in tree.xpath('//img'):        image_url = image.get('src')        if image_url.startswith('/uploads'):            images.append(image_url)    return imagesimages = []for file in (data_dir / 'articles').rglob('*.txt'):    with open(file, mode='r', encoding='utf8') as fp:        html = fp.read()    images.extend(find_images(html))print('Found {} images'.format(len(images)))网站文章转Markdown

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

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

from lxml import etreefrom markdownify import markdownify as mdparser = etree.HTMLParser()def handle_image_tags(title, html: str) -> str:    """解析HTML，过滤图片标签，更新图片标签的src属性"""    tree = etree.fromstring(html, parser)    for index, image in enumerate(tree.xpath('//img')):        image_url = image.get('src')        image_name = Path(image_url).name        if not image_url.startswith('/uploads') or image_name not in valid_images:            image.getparent().remove(image)            continue        image.set('src', '/{}'.format(image_name))        image.set('alt', '{}-{}'.format(title, index + 1))    return etree.tostring(tree, encoding='utf8', method='html').decode('utf8')def convert_article_to_markdown(title: str, created_at: str, content: str) -> str:    """HTML文章转Markdown"""    metadata = """---outline: deeptitle: {}author: 江津阳光社工date: {}version: 1.0---# {}""".format(title, created_at, title)    converted = md(content, heading_style='ATX').strip()    return metadata + '\n' + convertedtable = str.maketrans(r'\/:*?"<>|', '_' * 9)filename = title.translate(table) + '.md'Vitepress项目快速开始

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

import { defineConfig } from 'vitepress'import { withSidebar } from 'vitepress-sidebar';function nav() {  return [    {      text: '关于我们',      items: [        {            text: '荣誉资质',            link: '/about-us/awards-and-certifications/中心资质.md',        },        {            text: '组织架构',            link: '/about-us/organizational-structure/江津阳光社工中心组织架构.md',        },      ]    },    // ...  ]}// https://vitepress.dev/reference/site-configconst vitePressOptions = {  title: "江津阳光社会工作服务中心",  description: "让儿童都能健康快乐成长，让社区更加和谐幸福。",  lang: "zh-CN",  locales: {    "/": {      label: "简体中文",      lang: "zh-CN",    },  },  lastUpdated: true,  themeConfig: {    nav: nav(),    search: {      provider: "local",      options: {        placeholder: "搜索文章",        translations: {          button: { buttonText: "搜索文章" },          modal: {            searchBox: {              resetButtonTitle: "清除查询条件",              resetButtonAriaLabel: "清除查询条件",              cancelButtonText: "取消",              cancelButtonAriaLabel: "取消",            },            startScreen: {              recentSearchesTitle: "搜索历史",              noRecentSearchesText: "没有搜索历史",              saveRecentSearchButtonTitle: "保存至搜索历史",              removeRecentSearchButtonTitle: "从搜索历史中移除",              favoriteSearchesTitle: "收藏",              removeFavoriteSearchButtonTitle: "从收藏中移除",            },            errorScreen: {              titleText: "无法获取结果",              helpText: "你可能需要检查你的网络连接",            },            footer: {              selectText: "选择",              navigateText: "切换",              closeText: "关闭",              searchByText: "搜索提供者",            },            noResultsScreen: {              noResultsText: "无法找到相关结果",              suggestedQueryText: "你可以尝试查询",              reportMissingResultsText: "你认为该查询应该有结果？",              reportMissingResultsLinkText: "点击反馈",            },          },        },      },    },    footer: {      copyright: `版权所有 © 2019-${new Date().getFullYear()} 重庆市江津阳光社会工作服务中心`    },    docFooter: {      prev: '上一页',      next: '下一页'    },    outline: {      label: '页面导航'    },    lastUpdated: {      text: '最后更新于',      formatOptions: {        dateStyle: 'short',        timeStyle: 'medium'      }    },    langMenuLabel: '多语言',    returnToTopLabel: '回到顶部',    sidebarMenuLabel: '菜单',    darkModeSwitchLabel: '主题',    lightModeSwitchTitle: '切换到浅色模式',    darkModeSwitchTitle: '切换到深色模式',    skipToContentLabel: '跳转到内容',  }};const vitePressSidebarOptions = [    {        documentRootPath: 'docs',        scanStartPath: 'about-us',        basePath: '/about-us/',        resolvePath: '/about-us/',        collapsed: true,        capitalizeFirst: true,        useTitleFromFrontmatter: true,        useFolderTitleFromIndexFile: true,    },    // ...];export default defineConfig(withSidebar(vitePressOptions, vitePressSidebarOptions));注意：由于VitePress Sidebar插件默认按目录名生成侧边栏，需要在目录下添加index.md文件，指定名称才能让侧边栏显示为中文。
---title: 荣誉资质---EdgeOne Pages零帧起手

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

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

参考材料

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