Jekyll 项目中英文支持增强方案
当前状况分析
当前项目已经具备基本的中英文支持功能，但存在一些不一致和不完整的地方。主要包括：
- 配置文件中已定义了导航菜单的中英文翻译
- 页面模板支持标题和描述的中英文切换
- 导航栏有语言切换功能
- “关于”页面有完整的中英文版本
- 但博客文章缺乏系统性的双语支持
增强方案
1. 统一前置元数据格式
为所有页面和文章统一使用相同的前置元数据格式：
---
layout: post/page
title: "中文标题" # 默认标题（中文）
title-en: "English Title" # 英文标题
subtitle: "中文副标题" # 默认副标题（中文）
subtitle-en: "English Subtitle" # 英文副标题
description: "中文描述" # 默认描述（中文）
description-en: "English description" # 英文描述
date: YYYY-MM-DD
author: 薛以致用
author-en: Jason Xue
header-img: img/xxx.jpg
catalog: true
tags:
- 标签1
- 标签2
tags-en:
- Tag1
- Tag2
---
2. 修改页面模板
修改 _layouts/page.html 和 _layouts/post.html 文件，确保它们一致地处理双语标题和描述：
<h1 data-title-zh="Jekyll 项目中英文支持增强方案" data-title-en="Jekyll 项目中英文支持增强方案">
<span class="lang-content" data-lang="zh">Jekyll 项目中英文支持增强方案</span>
<span class="lang-content" data-lang="en" style="display:none;">Jekyll 项目中英文支持增强方案</span>
</h1>
<span class="subheading" data-desc-zh="" data-desc-en="">
<span class="lang-content" data-lang="zh"></span>
<span class="lang-content" data-lang="en" style="display:none;"></span>
</span>
3. 全局语言切换机制
创建一个全局的语言切换JavaScript文件 js/language-switcher.js：
// 全局语言切换功能
document.addEventListener('DOMContentLoaded', function() {
// 初始化语言设置
var savedLang = localStorage.getItem('blog-language') || 'zh';
updateLanguageUI(savedLang);
// 更新所有语言相关元素
function updateLanguageUI(lang) {
// 更新导航菜单
var langItems = document.querySelectorAll('.lang-item');
langItems.forEach(function(item) {
if (lang === 'en') {
item.textContent = item.getAttribute('data-lang-en');
} else {
item.textContent = item.getAttribute('data-lang-zh');
}
});
// 更新页面标题和描述
var langContents = document.querySelectorAll('.lang-content');
langContents.forEach(function(item) {
if (item.getAttribute('data-lang') === lang) {
item.style.display = 'inline';
} else {
item.style.display = 'none';
}
});
// 更新语言切换按钮文本
var langToggle = document.getElementById('current-lang');
if (langToggle) {
langToggle.textContent = lang === 'zh' ? '中文' : 'English';
}
// 更新博客文章内容（如果有）
var zhContent = document.querySelector('.zh.post-container');
var enContent = document.querySelector('.en.post-container');
if (zhContent && enContent) {
if (lang === 'en') {
zhContent.style.display = 'none';
enContent.style.display = 'block';
} else {
zhContent.style.display = 'block';
enContent.style.display = 'none';
}
}
// 更新标签
updateTags(lang);
}
// 更新标签显示
function updateTags(lang) {
var tags = document.querySelectorAll('.tag-item');
tags.forEach(function(tag) {
var zhTag = tag.getAttribute('data-tag-zh');
var enTag = tag.getAttribute('data-tag-en') || zhTag;
tag.textContent = lang === 'en' ? enTag : zhTag;
});
}
// 语言切换事件
var langToggleBtn = document.getElementById('language-toggle');
if (langToggleBtn) {
langToggleBtn.addEventListener('click', function() {
var currentLang = localStorage.getItem('blog-language') || 'zh';
var newLang = currentLang === 'zh' ? 'en' : 'zh';
localStorage.setItem('blog-language', newLang);
updateLanguageUI(newLang);
});
}
});
4. 博客文章双语支持模板
为博客文章创建一个双语支持的模板：
<!-- 中文版本 -->
<div class="zh post-container">
<!-- 中文内容 -->
<p>这是中文内容...</p>
</div>
<!-- 英文版本 -->
<div class="en post-container" style="display:none;">
<!-- 英文内容 -->
<p>This is English content...</p>
</div>
5. 标签系统双语支持
修改标签页面 tags.html，支持标签的双语显示：
<a class="tag-item" href="#数据库" title="数据库" rel="2"
data-tag-zh="数据库" data-tag-en="数据库">
数据库
</a>
<a class="tag-item" href="#分库" title="分库" rel="1"
data-tag-zh="分库" data-tag-en="分库">
分库
</a>
<a class="tag-item" href="#分表" title="分表" rel="1"
data-tag-zh="分表" data-tag-en="分表">
分表
</a>
<a class="tag-item" href="#分布式" title="分布式" rel="1"
data-tag-zh="分布式" data-tag-en="分布式">
分布式
</a>
<a class="tag-item" href="#案例" title="案例" rel="3"
data-tag-zh="案例" data-tag-en="案例">
案例
</a>
<a class="tag-item" href="#高可用" title="高可用" rel="1"
data-tag-zh="高可用" data-tag-en="高可用">
高可用
</a>
<a class="tag-item" href="#持续部署" title="持续部署" rel="1"
data-tag-zh="持续部署" data-tag-en="持续部署">
持续部署
</a>
<a class="tag-item" href="#CI/CD" title="CI/CD" rel="1"
data-tag-zh="CI/CD" data-tag-en="CI/CD">
CI/CD
</a>
<a class="tag-item" href="#自动化管道" title="自动化管道" rel="1"
data-tag-zh="自动化管道" data-tag-en="自动化管道">
自动化管道
</a>
<a class="tag-item" href="#最佳实践" title="最佳实践" rel="2"
data-tag-zh="最佳实践" data-tag-en="最佳实践">
最佳实践
</a>
<a class="tag-item" href="#时序" title="时序" rel="1"
data-tag-zh="时序" data-tag-en="时序">
时序
</a>
<a class="tag-item" href="#re:invent" title="re:invent" rel="1"
data-tag-zh="re:invent" data-tag-en="re:invent">
re:invent
</a>
<a class="tag-item" href="#开发者大会" title="开发者大会" rel="1"
data-tag-zh="开发者大会" data-tag-en="开发者大会">
开发者大会
</a>
<a class="tag-item" href="#云计算" title="云计算" rel="7"
data-tag-zh="云计算" data-tag-en="云计算">
云计算
</a>
<a class="tag-item" href="#AWS" title="AWS" rel="15"
data-tag-zh="AWS" data-tag-en="AWS">
AWS
</a>
<a class="tag-item" href="#线下活动" title="线下活动" rel="1"
data-tag-zh="线下活动" data-tag-en="线下活动">
线下活动
</a>
<a class="tag-item" href="#年会" title="年会" rel="1"
data-tag-zh="年会" data-tag-en="年会">
年会
</a>
<a class="tag-item" href="#尾牙" title="尾牙" rel="1"
data-tag-zh="尾牙" data-tag-en="尾牙">
尾牙
</a>
<a class="tag-item" href="#学习" title="学习" rel="4"
data-tag-zh="学习" data-tag-en="学习">
学习
</a>
<a class="tag-item" href="#airbnb" title="airbnb" rel="1"
data-tag-zh="airbnb" data-tag-en="airbnb">
airbnb
</a>
<a class="tag-item" href="#OTA" title="OTA" rel="1"
data-tag-zh="OTA" data-tag-en="OTA">
OTA
</a>
<a class="tag-item" href="#远程办公" title="远程办公" rel="1"
data-tag-zh="远程办公" data-tag-en="远程办公">
远程办公
</a>
<a class="tag-item" href="#CDN" title="CDN" rel="1"
data-tag-zh="CDN" data-tag-en="CDN">
CDN
</a>
<a class="tag-item" href="#Open Connect" title="Open Connect" rel="1"
data-tag-zh="Open Connect" data-tag-en="Open Connect">
Open Connect
</a>
<a class="tag-item" href="#艺术" title="艺术" rel="1"
data-tag-zh="艺术" data-tag-en="艺术">
艺术
</a>
<a class="tag-item" href="#读书" title="读书" rel="2"
data-tag-zh="读书" data-tag-en="读书">
读书
</a>
<a class="tag-item" href="#旅游" title="旅游" rel="1"
data-tag-zh="旅游" data-tag-en="旅游">
旅游
</a>
<a class="tag-item" href="#新知" title="新知" rel="3"
data-tag-zh="新知" data-tag-en="新知">
新知
</a>
<a class="tag-item" href="#直播" title="直播" rel="2"
data-tag-zh="直播" data-tag-en="直播">
直播
</a>
<a class="tag-item" href="#自我反省" title="自我反省" rel="2"
data-tag-zh="自我反省" data-tag-en="自我反省">
自我反省
</a>
<a class="tag-item" href="#向上成长" title="向上成长" rel="3"
data-tag-zh="向上成长" data-tag-en="向上成长">
向上成长
</a>
<a class="tag-item" href="#职业思考" title="职业思考" rel="3"
data-tag-zh="职业思考" data-tag-en="职业思考">
职业思考
</a>
<a class="tag-item" href="#DevOps" title="DevOps" rel="2"
data-tag-zh="DevOps" data-tag-en="DevOps">
DevOps
</a>
<a class="tag-item" href="#研发团队" title="研发团队" rel="1"
data-tag-zh="研发团队" data-tag-en="研发团队">
研发团队
</a>
<a class="tag-item" href="#研发运营一体化" title="研发运营一体化" rel="1"
data-tag-zh="研发运营一体化" data-tag-en="研发运营一体化">
研发运营一体化
</a>
<a class="tag-item" href="#自动化" title="自动化" rel="1"
data-tag-zh="自动化" data-tag-en="自动化">
自动化
</a>
<a class="tag-item" href="#性能测试" title="性能测试" rel="1"
data-tag-zh="性能测试" data-tag-en="性能测试">
性能测试
</a>
<a class="tag-item" href="#架构" title="架构" rel="5"
data-tag-zh="架构" data-tag-en="架构">
架构
</a>
<a class="tag-item" href="#随机方法" title="随机方法" rel="1"
data-tag-zh="随机方法" data-tag-en="随机方法">
随机方法
</a>
<a class="tag-item" href="#蒙特卡罗" title="蒙特卡罗" rel="1"
data-tag-zh="蒙特卡罗" data-tag-en="蒙特卡罗">
蒙特卡罗
</a>
<a class="tag-item" href="#云转型" title="云转型" rel="1"
data-tag-zh="云转型" data-tag-en="云转型">
云转型
</a>
<a class="tag-item" href="#历史" title="历史" rel="1"
data-tag-zh="历史" data-tag-en="历史">
历史
</a>
<a class="tag-item" href="#公有云" title="公有云" rel="2"
data-tag-zh="公有云" data-tag-en="公有云">
公有云
</a>
<a class="tag-item" href="#成本" title="成本" rel="2"
data-tag-zh="成本" data-tag-en="成本">
成本
</a>
<a class="tag-item" href="#省钱" title="省钱" rel="2"
data-tag-zh="省钱" data-tag-en="省钱">
省钱
</a>
<a class="tag-item" href="#读书笔记" title="读书笔记" rel="2"
data-tag-zh="读书笔记" data-tag-en="读书笔记">
读书笔记
</a>
<a class="tag-item" href="#领导力" title="领导力" rel="1"
data-tag-zh="领导力" data-tag-en="领导力">
领导力
</a>
<a class="tag-item" href="#团队" title="团队" rel="1"
data-tag-zh="团队" data-tag-en="团队">
团队
</a>
<a class="tag-item" href="#云技术讲堂" title="云技术讲堂" rel="6"
data-tag-zh="云技术讲堂" data-tag-en="云技术讲堂">
云技术讲堂
</a>
<a class="tag-item" href="#安全" title="安全" rel="1"
data-tag-zh="安全" data-tag-en="安全">
安全
</a>
<a class="tag-item" href="#性能" title="性能" rel="1"
data-tag-zh="性能" data-tag-en="性能">
性能
</a>
<a class="tag-item" href="#事件驱动" title="事件驱动" rel="3"
data-tag-zh="事件驱动" data-tag-en="事件驱动">
事件驱动
</a>
<a class="tag-item" href="#事件风暴" title="事件风暴" rel="1"
data-tag-zh="事件风暴" data-tag-en="事件风暴">
事件风暴
</a>
<a class="tag-item" href="#微服务" title="微服务" rel="3"
data-tag-zh="微服务" data-tag-en="微服务">
微服务
</a>
<a class="tag-item" href="#事件溯源" title="事件溯源" rel="2"
data-tag-zh="事件溯源" data-tag-en="事件溯源">
事件溯源
</a>
<a class="tag-item" href="#云原生" title="云原生" rel="2"
data-tag-zh="云原生" data-tag-en="云原生">
云原生
</a>
<a class="tag-item" href="#转码" title="转码" rel="1"
data-tag-zh="转码" data-tag-en="转码">
转码
</a>
<a class="tag-item" href="#容器转码" title="容器转码" rel="1"
data-tag-zh="容器转码" data-tag-en="容器转码">
容器转码
</a>
<a class="tag-item" href="#开发" title="开发" rel="1"
data-tag-zh="开发" data-tag-en="开发">
开发
</a>
<a class="tag-item" href="#数据处理" title="数据处理" rel="1"
data-tag-zh="数据处理" data-tag-en="数据处理">
数据处理
</a>
<a class="tag-item" href="#Spark" title="Spark" rel="1"
data-tag-zh="Spark" data-tag-en="Spark">
Spark
</a>
<a class="tag-item" href="#数仓" title="数仓" rel="2"
data-tag-zh="数仓" data-tag-en="数仓">
数仓
</a>
<a class="tag-item" href="#云数仓" title="云数仓" rel="2"
data-tag-zh="云数仓" data-tag-en="云数仓">
云数仓
</a>
<a class="tag-item" href="#混沌工程" title="混沌工程" rel="1"
data-tag-zh="混沌工程" data-tag-en="混沌工程">
混沌工程
</a>
<a class="tag-item" href="#reinvent" title="reinvent" rel="4"
data-tag-zh="reinvent" data-tag-en="reinvent">
reinvent
</a>
<a class="tag-item" href="#云计算大会" title="云计算大会" rel="4"
data-tag-zh="云计算大会" data-tag-en="云计算大会">
云计算大会
</a>
<a class="tag-item" href="#解读" title="解读" rel="4"
data-tag-zh="解读" data-tag-en="解读">
解读
</a>
<a class="tag-item" href="#杂说" title="杂说" rel="1"
data-tag-zh="杂说" data-tag-en="杂说">
杂说
</a>
<a class="tag-item" href="#职场" title="职场" rel="1"
data-tag-zh="职场" data-tag-en="职场">
职场
</a>
<a class="tag-item" href="#理财" title="理财" rel="1"
data-tag-zh="理财" data-tag-en="理财">
理财
</a>
<a class="tag-item" href="#AI" title="AI" rel="1"
data-tag-zh="AI" data-tag-en="AI">
AI
</a>
<a class="tag-item" href="#财报分析" title="财报分析" rel="1"
data-tag-zh="财报分析" data-tag-en="财报分析">
财报分析
</a>
<a class="tag-item" href="#亚马逊" title="亚马逊" rel="3"
data-tag-zh="亚马逊" data-tag-en="亚马逊">
亚马逊
</a>
<a class="tag-item" href="#技术" title="技术" rel="1"
data-tag-zh="技术" data-tag-en="技术">
技术
</a>
<a class="tag-item" href="#开发者体验" title="开发者体验" rel="1"
data-tag-zh="开发者体验" data-tag-en="开发者体验">
开发者体验
</a>
<a class="tag-item" href="#组织架构" title="组织架构" rel="1"
data-tag-zh="组织架构" data-tag-en="组织架构">
组织架构
</a>
<a class="tag-item" href="#管理" title="管理" rel="1"
data-tag-zh="管理" data-tag-en="管理">
管理
</a>
在 _config.yml 中添加标签翻译映射：
# 标签翻译
tag_translations:
云计算: "Cloud Computing"
架构设计: "Architecture Design"
微服务: "Microservices"
数据分析: "Data Analytics"
# 添加更多标签翻译...
6. 首页和其他页面统一
确保首页 index.html 和其他页面使用一致的前置元数据格式：
---
layout: page
title: "薛以致用"
title-en: "Jason Xue's Blog"
description: "避免空谈，成为构建者、创业者和创造者"
description-en: "Avoid empty talk, become a builder, an entrepreneur, and a creator."
---
实施步骤
- 统一所有页面的前置元数据格式
- 修改页面模板以一致处理双语内容
- 创建全局语言切换JavaScript文件
- 为现有博客文章添加英文版本（或至少添加英文标题和描述）
- 实现标签系统的双语支持
- 测试所有页面在中英文切换下的显示效果
效果预期
实施以上方案后，网站将具备完整的双语支持功能：
- 用户可以通过导航栏的语言切换按钮在中英文之间切换
- 所有页面标题、描述、内容都会根据当前语言设置显示相应版本
- 博客文章可以有完整的中英文版本
- 标签系统支持中英文显示
- 语言偏好会被保存，用户下次访问时自动应用
这样的双语支持将大大提升国际用户的访问体验，同时保持对中文用户的友好支持。
