TCDN使用说明-2024.4
[TOC]
这个是当前 2024.4 最新的，部署在我们服务器做内测使用的，SAAS版本的，极大降低了TCDN部署服务器的成本。它翻译后的网页支持推送到阿里云OSS、华为云OBS、七牛云Kodo、SFTP、等等多种存储方式，使用其进行存放翻译后的网页，从速度、自定义控制、部署成本等进行了极大幅度的优化。
并且提供了在线的使用体验，降低了使用门槛。
目前已完美适配了网市场云建站系统做的网站，其他建站系统做的网站基本也都支持，如果您的网站支持不够好，可以反馈，我们将进行适配。
[TCDN已开放授权私有部署，详情点击查看。 - 2024.4.30](43504.html)
在线试用步骤:
## 1. 免费注册TCDN账户
[http://tcdn.zvo.cn/reg.html](http://tcdn.zvo.cn/reg.html)
点击链接在线注册开通，免费使用。 （因使用量比较大，当前只限网站页面不超过100个网页的网站，如果你网站页面比较多，可以联系我们放开限制）
另外注册以后，登录的网址为 [http://tcdn.zvo.cn](http://tcdn.zvo.cn)
## 2. 站点管理-添加
通过左侧站点管理，添加一个网站。
这里添加的网站，也就是你要进行翻译的网站，比如你原本网站是中文，要根据这个中文网站来自动生成英文、韩语网站，这里添加的网站就是你的原本的中文网站
其中 sitemap 是非必填的。 一开始的时候这里完全可以忽略不用填写。
这里可以自定义此网站的sitemap.xml
这里如果不设置（也就是留空），那么在执行翻译任务操作时，会自动获取 此网站/sitemap.xml 他们网站本身的这个 sitemap.xml ，如果这个网站没有 sitemap.xml ，那么是没法执行翻译任务的，所以这里就有用了，如果原本网站没有这个文件，就可以自己用在线生成sitemap.xml的工具生成一个此网站的sitemap.xml文件，然后传上来。
另外如果源站人家原本的sitemap.xml文件中的网址不全，或者少了哪些连接、多了哪些无用的连接了，也都可以手动下载人家源站的sitemap.xml文件，经过改动后传上来。
## 3. 翻译管理
点击源站网址、或者 管理 按钮，都可以进入 管理 页面，对这个源站的翻译进行详细的设置、调试等。进入后的页面如下：
其中，鼠标放到某个文字上，会实时出现相应提示说明，便于理解是什么作用，如下
## 4. 添加翻译语种
比如，添加时，访问域名你不知道怎么填写，你可以将鼠标放到 访问域名 这四个字上，会出现相应提示，告诉你这是干什么的，什么作用，如何填写，如下：
## 5. 预览调试
鼠标放到 预览调试 文字上，会出现这个得相关说明。
它可以对某个页面进行翻译预览。它的作用是进行精细的调控，比如翻译之后的页面感觉某个地方不合适，或者某个图片没翻译好，可以通过此来进行调试，因为它可以针对某一个具体的页面进行调试预览，速度会很快，十来秒就能取得翻译的结果，而不需要生成整个网站后在取查看某个页面的翻译结果。
当这个调试的页面感觉翻译没问题后，您就可以放心的对整站进行翻译了。
可以这么理解，您再生成整站前，可以将您网站的某些页面在这里调试预览，提前试一下，看是否有要进行调整的
这里点击预览调试按钮，进行预览调试（预览调试按钮前面有个输入框，默认是 / 也就是使用你源站的首页进行预览调试。 比如你还有个关于我们页面想要调试，你可以再预览调试前面的输入框填写 /aboutus.html 然后再点预览调试，那调试的便是这个关于我们的页面了 ）
然后我们即可看到翻译的结果页面了
（这个案例网站中，像是首页、关于我们这些文字是js动态显示的，所以翻译后看到它的文字依旧是中文，这个就需要用 翻译控制 能力进行精细调节、或者更改源站不要使用js动态控制文本显示）
当我们查看其页面源代码，会发现源代码是已经被翻译之后的
## 6. 翻译控制 - 对翻译结果进行调整
这里打个比方，比如，我们想忽略导航栏，不让顶部导航栏被翻译，那么可以这么做，首先找到顶部导航栏的属性，这里直接取导航栏的id，如下图
得到导航栏的id为 menu_pc_ul
这里我们知道，translate.js 中，如果对某个id忽略不进行翻译，是
````
translate.ignore.id.push('menu_pc_ul');
````
（文档来源： [http://translate.zvo.cn/41547.html](http://translate.zvo.cn/41547.html) ）
然后 翻译控制 的编辑按钮，进行编辑
填入后，点击底部的保存。
即可完成了保存。
如果对这填写的两项有疑惑，不知道是什么作用，可以鼠标放到其上面查看相关说明：
设置完毕后，再执行第五步的预览调试：
即可发现，结果已经发生了变化：
顶部导航栏已经不再被翻译，我们通过翻译控制进行自定义调整已经生效了。
到此，您已可以对页面完成了翻译能力的配置，剩下的，就是吧翻译的结果推送到某个地方进行保存、提供对外访问了。
## 7. 存储设置
配置这个语种翻译之后的网页，是要存储在什么地方。
比如，翻译的语种是日本，您可以在华为云OBS开通一个日本的OBS云存储，配置上，然后将日本这个语种的访问域名绑定到华为云OBS，如此当日本的用户访问时，访问到的是本国的存储节点，达到秒开。
存储方式支持SFTP、FTP、华为云OBS、阿里云OSS、七牛云Kodo……多种存储方式，您可以选择您最熟悉的存储方式配置上。
（存储能力有开源项目 [https://gitee.com/mail_osc/FileUpload](https://gitee.com/mail_osc/FileUpload) 提供支持）
当然，鼠标放到 设置 文字上，也能看到存储设置的相关说明：
点击存储设置按钮后，即可弹出一个存储设置的填写，如下图：
这里你可以选择一个你所熟悉的存储方式，填写完毕，进行保存时，系统会自动进行连接测试，如果填写没问题，能连通，那么就可以设置成功了。
## 8. 执行翻译
进行翻译，执行翻译，将原本网站翻译为指定语种，并存储到您自己设置的存储位置进行存储。
**注意**
1. 执行翻译时，会自动读取您源站根路径下的 sitemap.xml 文件，根据此文件中存在的页面进行翻译。 如果您源站没有 sitemap.xml 文件，则只是会翻译首页提供效果测试
2. 当前因使用人数众多，所以增加了一个限制，sitemap.xml 中不超过100个页面，才会进行翻译，如果超过了100个页面了，需要与我们联系后才能放开限制，以防止有人故意提交页面非常多的网站，占用计算资源，导致其他人排队等待会非常漫长。
2. 点击执行后，会创建一个翻译任务，翻译任务并不会立即执行，而是进入排队期，前面排队的任务（包括别人的）都执行完后才会执行您此次的翻译任务。您可以通过“查看日志”来时时查看任务执行情况
## 9. 查看翻译任务排队情况
由于您提交翻译任务后会进入排队状态，所以只有排队到您的任务时，才会正式被翻译并推送到您自己设置的存储空间。
当前有多少人在排队，你排在第几位，我们可以通过此来查看当前实时的排队情况
同样，鼠标放到文本上，也会显示相应提示：
如果你当前已经提交翻译任务并且已经在执行了，你可以方便的查看当前执行情况及进度，如下图：
其中右上角的 [刷新] 按钮，可以随时点击刷新查看当前任务的最新进度，比如执行到了第几个、是否有某个页面翻译失败等。
[立即结束我的任务] 按钮，可以立即结束你当前正在进行的任务。 当你点击按钮结束任务后，你可以查看日志，便可以看到任务执行完哪一个网址后结束的
## 10. 查看翻译结果及访问
当您的翻译任务排到并执行后，您可以手动登录您在上面第7步所配置的存储中，进入看一下，看看是否已经多了您网站相关的翻译页面。
这些页面便是TCDN自动翻译并将翻译后的网页自动推送过来的。
有了页面，您也就可以绑定域名进行访问了。 比如绑定个二级域名 english.xxxx.com 提供英文翻译页面的访问
如果您想通过目录式访问，比如 www.xxxx.com/english 您可以要在第7步中，将存储空间设置到您本身网站的 english 路径下，这样翻译完成后自然也就能访问到了
## 11. 翻译日志查看
您可以通过翻译日志，来查看您的翻译具体执行情况
可以检索结果，如下图所示，可以检索翻译失败的记录
找到这个失败翻译记录，可以进行下载这个任务翻译失败的url （仅仅只是这个任务的）
自动将本任务中所有翻译失败的url组合为一个sitemap.xml下载下来，您可以将这个翻译失败的sitemap.xml 上传上去重新执行翻译。
## 12. 更多使用扩展
#### 示例一：设置网页翻译属性
比如我想设置网页中翻译时，直接使用[元素整体翻译](http://translate.zvo.cn/42563.html)，这样可以翻译的更准确些，那么就可以设置 [翻译控制] - [翻译前执行的JavaScript] 来进行设置，如下图：
#### 示例二：超链接处理替换
设置网页中所有的超链接（也就是A标签），链接地址中如果包含有 ````http://www.zvo.cn```` 这个域名的，自动替换为 ````http://abc.com/english```` 那么也可以使用翻译控制来进行
其中代码：
````
// 获取当前网页中所有的 a 标签
const links = document.getElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
const link = links[i];
const href = link.getAttribute('href');
if(typeof(href) == 'undefined' || href == null){
continue;
}
if (href.includes('http://www.zvo.cn')) {
if(href.indexOf('http://abc.com/english') > -1){
//已经替换过了
continue;
}
link.href = href.replace('http://www.zvo.cn', 'http://abc.com/english');
}
}
````
#### 示例三：中文翻译为英文，文字变长撑破布局了
中文的文本宽度比英文的要小很多，很多情况下中文站翻译为英文后会出现布局被文本撑破的现象。这样就要针对英文的来进行单独的适配。
比较实际的做法，就是如果是英文站，那么引入一个专门为英文站适配的css样式文件，对原本的某些样式进行重写，以应对英文浏览。那么这个英文适配的css文件 ```````` 把这个样式引入设置到 [翻译控制] - [翻译后追加的html代码] 这样翻译后的页面变会自动将这个引入样式的代码追加到 ````