V2EX 17小时前
[程序员] 翻译 wxt 文档并接入 Adsense
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文分享了为WXT框架官网添加中文文档的详细步骤和技术实现。作者凭借两年多的WXT框架开发经验,介绍了如何利用Vitepress框架,在原有的英文文档基础上,通过复制、AI翻译以及关键的配置文件修改(包括多语言配置和重写规则),成功实现了中文文档的集成。此外,文章还提及了为网站接入Google AdSense时,需要使用未注册过的域名,并提供了将ads.txt文件添加到项目中的具体操作方法,为其他开发者提供了宝贵的实践经验。

📝 **文档本地化策略**:为了给WXT框架添加中文支持,作者在项目根目录下的`docs`文件夹内新建了`zh`子目录,并将所有英文Markdown文件及其目录结构完整复制到`zh`目录下,为后续的中文翻译奠定了基础。

🤖 **AI驱动的翻译流程**:利用AI工具对`zh`目录下的Markdown文件进行批量翻译,是实现中文文档快速生成的核心步骤。这种方式大大提高了翻译效率,为后续的集成工作节省了大量时间。

⚙️ **Vitepress配置优化**:关键的步骤在于修改`docs/.vitepress/config.ts`文件。通过新增`locales`配置项,定义了中文(简体中文)和英文(English)的语言选项,并设置了各自的标签和链接。更重要的是,利用`rewrites`功能,将`/zh/index.md`等路径映射到`/index.md`,实现了访问路径的优化,使得中文文档能够以更简洁的URL呈现。

💰 **AdSense接入与域名策略**:在申请Google AdSense时,作者强调必须使用未注册过的域名。由于`honwhy.wang`已被使用,作者选择使用Cloudflare Pages提供的默认域名。为满足AdSense要求,需要在项目根目录的`docs`文件夹中添加一个`public`目录,并将`ads.txt`文件放置其中,以便网站能够成功接入广告。

实话说,这只是一个实验,并没有真正想过会从这里得到多少收益。网站: https://wxt-8h8.pages.dev

本人接触浏览器插件开发 2-3 年了,对 wxt 框架算是比较了解的,之前也是通过阅读源码的方式来解决不少问题。

本人的 project 地址: https://honwhy.wang/projects

回头说下 wxt 的文档,原来使用 vitepress 来写的,我想在此基础上增加中文文档,并设置默认页面是中文的。

解决办法:

1 、项目地址 https://github.com/wxt-dev/wxt在原来<ProjectRoot>/docs/ 新建一个目录 <ProjectRoot>/docs/zh

2 、将原来<ProjectRoot>/docs 下的所有 Markdown 文件(包括目录层次都要保持一致)都拷贝到 zh 目录下

3 、开动 AI 对 zh 目录下的文件进行翻译

4 、配置(这一步要注意 Vitepress 版本变化的情况)在原来 <ProjectRoot>/docs/.vitepress/config.ts 文件中进行修改,

4-1 增加 locale 多语言配置,

export default defineConfig({  extends: knowledge,  locales: {    zh: {      label: '简体中文',      lang: 'zh',      link: '/zh',      themeConfig: {...}    },    root: {      label: 'English',      lang: 'en',    },  }, }

4-2 配置重写(这一步是关键),

export default defineConfig({  extends: knowledge,  locales: {...},  rewrites: {    'zh/index.md': 'index.md',    'zh/guide/:slug*': 'guide/:slug*',  },}

重写的规则是以 Markdown 文件为 key ,映射到另外一个 Markdown 路径,这么解释,比如zh/index.md 原来的访问路径是 https://website.com/zh/index映射成 index.md 后,访问路径就是 https://website.com/index

5 、申请接入 Adsense接入 Adsense 必须用之前未使用过的域名,由于honwhy.wang 之前申请过了,此次如果给这个翻译网站分配子域名是不能申请接入的。 所以,这次就直接使用 cloudflare pages 分配的域名了。

需要按照要求,将 ads.txt 添加到网站中,那么在 <ProjectRoot>/docs/ 中加一个 public 目录,并且添加着 ads.txt 文件就可以了

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

WXT框架 中文文档 Vitepress AI翻译 AdSense
相关文章