【6000字详解】养网站防老第6步：利用ChatGPT给网站增加多语言支持

原创 我是哥飞 哥飞

大家好，我是哥飞。

网站养老系列，哥飞已经更新了7篇了：

养网站防老：网站可以做成一生的事业
养网站防老第1步，挖掘出第1个需求
养网站防老第2步：分析搜索意图
养网站防老第1.5步：用一个公式来判断关键词是否值得做，让你选择关键词不再犹豫
养网站防老第3步：根据搜索意图使用ChatGPT的GPT4生成网页
养网站防老第4步：手动调整布局和样式
养网站防老第5步：内页和内链建设在此前的步骤中，我们把首页和内页都做好了，但是只有英文一种语言，今天我们借助ChatGPT给网站增加多语言支持。
大家可能会发现，哥飞在一些步骤中推荐大家使用 ChatGP T，这是因为这次网站养老系列教程，更主要的读者是初学者。
哥飞希望通过这个教程，让完全不懂海外网站开发，甚至有一点技术基础但是对于前端不太熟悉的同学，也能够顺利地跟着教程学会如何开发海外网站。
所以 使用 ChatGP T ，不仅仅可以提高效率，还可以让初学者也能做出及格线以上水平的网站。
那么到底要做哪些语言呢？我们用数据说话，打开Semrush，查看这个关键词各个国家的搜索量。

Keyword Overview: Phone Number Generator ①

排名前六的分别是： GH 、 US 、 NG 、 UK 、 IN、 PH， 我们通过询问ChatGPT，可以得到这些国家信息和主要语言。

GH、US、NG、UK、IN、PH 分别是哪些国家，说什么语言？

GPT4的回答：

123456789101112131415161718192021
这些是国家的缩写，以下是对应的国家及其主要官方语言：
GH - 加纳 (Ghana)
语言：英语（官方）
US - 美国 (United States)
语言：英语（官方，但并没有在联邦层面明文规定）
NG - 尼日利亚 (Nigeria)
语言：英语（官方）
UK - 英国 (United Kingdom)
语言：英语（主要官方语言）
IN - 印度 (India)
语言：印度有多种官方语言。印地语和英语是中央政府的官方语言。
PH - 菲律宾 (Philippines)
语言：菲律宾语（或称塔加洛语）和英语都是官方语言。
这些国家中，英语在多数国家都有官方地位或被广泛使用。
刚好挺巧的，这些国家都会说英语，也就是其实我们这个网站只需要有英文就足够了，但是我们今天为了给大家讲解如何给网站增加多语言支持，所以我们以印地语和菲律宾语为例来说明。
我们需要先问一下GPT4，印地语和菲律宾语一般缩写是什么。

印地语和菲律宾语一般缩写是什么？我需要用这些缩写来创建子目录给网站增加多语言支持

GPT4的回答：

为了网站多语言支持，通常我们会采用语言代码作为子目录的命名。以下是对应的ISO 639-1语言代码：
印地语 (Hindi)：HI
菲律宾语 (Filipino)：TL
（这个是基于它的另一个名字，塔加洛语 Tagalog）
所以，如果你要为网站增加这两种语言的支持，
你可以创建名为 “HI” 和 “TL” 的子目录。

所以，我们需要在网站根目录，也就是 index.html 的同级，创建两个子目录，分别是“hi”和“tl”，创建好之后我们网站目前的目录结构如下：

然后，我们需要在原先的页面中增加语言切换按钮，同样，先问GPT4:

如果我要在网站增加语言切换按钮，英文我用 English ，那么 hi 和 tl 用什么名称？

GPT4回答：

1
2
3
4
5
6
7
8
9
10

在为网站添加语言切换按钮时，我们通常会使用该语言的自称来表示。
对于你提到的语言，可以这样表示：
英文 (English)：English
印地语 (Hindi)：
हद
菲律宾语 (Filipino)：Filipino 或 Tagalog
所以，当用户看到 “
हद”，他们就知道这是印地语的按钮；
看到 “Filipino” 或 “Tagalog”，他们就知道这是菲律宾语的按钮。
但是具体使用哪一个（Filipino 或 Tagalog）要取决于你的目标受众和他们更习惯的称呼。如果目标是菲律宾国内用户，“Filipino” 可能更为合适。

哥飞继续问：

如果用 Filipino ，那么简称用 tl 合适吗？

GPT4回答：

1
2
3
4
5
6
7

“Filipino” 是基于"塔加洛语" (Tagalog) 的官方标准版本，用于菲律宾的官方事务和教育。
它们之间有很多共同之处，但"Filipino"被设计为更具包容性，包括了来自菲律宾其他方言和语言的词汇。
在ISO 639-1语言代码中，“TL” 是塔加洛语 (Tagalog) 的代码。
但在许多实际应用中，尤其是在网站的语言选择上，“TL” 也常常用于代表"Filipino"。
所以，如果你决定使用"Filipino"作为名称，使用"TL"作为简称或代码是完全合适的。

所以我们语言名称用“Filipino”，简称用“tl”是完全没问题的。在 logo 和 country-list 中间增加一个 language-list ：

对应的 css 如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14
.language-list{ float: right;
}
.language-list a{ margin-left: 10px; color: #666;
}
.language-list a.curr{ color: #333; font-weight: bold;
}
.language-list a:hover{ color: #247a8c;

效果如下，没有过多美化，直接在右侧增加了三个语言的列表，当前语言加粗加黑：

Phone Number Generator

我们这个网站，默认是英语，所以给英语增加了“curr”类。

接着去修改 china-phone-number-generator.html 文件，依然是把语言切换放进去，跟首页有些小区别的是，因为用户当前在中国手机号页面，所以切换时也需要保持继续在这个页面，对应的代码如下：