ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Hexo.io多语言博客搭建:从零开始创建支持中英文的国际化网站

Hexo.io多语言博客搭建:从零开始创建支持中英文的国际化网站 Hexo.io多语言博客搭建从零开始创建支持中英文的国际化网站【免费下载链接】siteThe website for Hexo. https://hexo.io/项目地址: https://gitcode.com/gh_mirrors/site14/site 想写英文文章给海外读者又想让国内访客看到简体中文界面Hexo 多语言博客正是解决方案。Hexo 是一个由 Node.js 驱动的快速、简洁且强大的博客框架内置完整的国际化i18n机制只需几行配置就能让同一个博客站点同时支持中文、英文乃至更多语言。本文带你从零开始一步步搭建一个支持中英文的国际化博客网站。为什么选择 Hexo 搭建多语言博客⚡速度极快静态生成上百页内容几秒内完成渲染内置国际化无需额外框架language配置 语言文件即可实现多语言生态丰富数百款主题与插件可选主题自带多语言语言文件纯 Markdown 写作新手友好专注内容本身 本站Hexo 官网就是一个多语言博客的范例同一套内容提供 en、zh-cn、zh-tw、ja、ko、es 等 8 种语言版本。第一步安装 Hexo 并初始化站点确保已安装 Node.js 后执行以下命令即可创建博客项目hexo init my-blog cd my-blog npm install初始化完成后项目结构如下详见 source/docs/setup.md. ├── _config.yml # 站点配置多语言设置就在这里 ├── package.json ├── scaffolds ├── source # 内容目录多语言页面将放入此处 └── themes # 主题目录语言文件所在处如果你想参考本站的多语言实现方式可以克隆本仓库研究git clone https://gitcode.com/gh_mirrors/site14/site第二步配置默认语言与多语言列表打开站点根目录的 _config.yml修改language项。它支持两种写法单一默认语言language: zh-cn多语言列表可按优先级排序language: - zh-cn - en本站的实际配置就是language: en并在 _config.yml 中通过i18n_dir机制自动识别访问者语言。完整文档见 source/docs/internationalization.md。第三步主题语言文件如何让界面变“中文”Hexo 的界面文案菜单、按钮、分页文字等存放在主题的languages文件夹中支持 YAML 或 JSON 格式。以本站使用的 navy 主题为例英文文案themes/navy/languages/en.ymlmenu.docs: Docs中文文案themes/navy/languages/zh-cn.ymlmenu.docs: 文档# themes/navy/languages/zh-cn.yml 片段 menu: docs: 文档 api: API news: 新闻 themes: 主题当站点语言匹配zh-cn时所有模板中的翻译占位符会自动替换为中文文案。绝大多数主流主题都自带zh-cn.yml你几乎不需要手动编写。第四步为每种语言创建内容目录这是实现“中英双版本内容”的关键。Hexo 默认启用i18n_dir: :lang即根据 URL 第一段自动识别语言/index.html en默认语言 /zh-cn/index.html zh-cn简体中文只需在source下按语言代码建子目录放入对应语言的页面英文首页source/index.md中文首页source/zh-cn/index.md副标题为“快速、简洁且高效的博客框架”source/ ├── index.md # 默认语言英文 ├── zh-cn/ │ ├── index.md │ ├── docs/ # 中文文档 │ └── api/ # 中文 API └── ja/ └── index.md # 日文首页注意路径中的语言代码必须存在对应的语言文件才会被识别为语言避免与archives等普通目录混淆。第五步用 Front-matter 为单个页面指定语言如果某个页面没有放在语言子目录中可以直接在文件头部的lang字段覆盖自动检测字段说明见 source/docs/front-matter.md--- title: 我的双语文章 lang: zh-cn ---此外站点还常用_data数据文件集中管理语言信息。本站在 source/_data/languages.yml 中定义了各语言名称如zh-cn: 简体中文、en: English供主题渲染语言切换菜单。数据文件的更多用法见 source/docs/data-files.md。可选用插件批量生成多语言版本如果你希望一篇 Markdown 自动生成中英文两个版本可参考 Hexo 官方插件站收录的 hexo-multiple-language-generate 插件——通过简单配置即可轻松实现不同语言版本博客的生成。插件列表可在 source/plugins/index.md 中浏览。预览与生成验证多语言效果在博客目录中执行hexo server # 本地预览访问 /zh-cn/ 查看中文界面 hexo generate # 生成静态站点生成速度之快令人印象深刻——这是 Hexo 2.8 时代生成控制台的实际截图31 个文件仅用 0.408 秒访问http://localhost:4000/与http://localhost:4000/zh-cn/即可分别看到英文和简体中文版本——你的国际化博客已搭建完成✅总结一张清单回顾多语言博客搭建步骤步骤操作关键文件1初始化 Hexo 站点source/docs/setup.md2设置language默认语言/语言列表_config.yml3确认主题语言文件就位themes/navy/languages/zh-cn.yml4按source/zh-cn/等目录放内容source/zh-cn/index.md5必要时用lang字段覆盖语言source/docs/front-matter.md6hexo generate验证效果—掌握以上六步你就拥有了一个可无限扩展语言版本的 Hexo 多语言博客——无论面向中文读者还是全球访客都能获得原生般的阅读体验。【免费下载链接】siteThe website for Hexo. https://hexo.io/项目地址: https://gitcode.com/gh_mirrors/site14/site创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表