TCDN使用说明-2024.4

这个是当前 2024.4 最新的，部署在我们服务器做内测使用的，SAAS版本的，极大降低了TCDN部署服务器的成本。它翻译后的网页支持推送到阿里云OSS、华为云OBS、七牛云Kodo、SFTP、等等多种存储方式，使用其进行存放翻译后的网页，从速度、自定义控制、部署成本等进行了极大幅度的优化。
并且提供了在线的使用体验，降低了使用门槛。
目前已完美适配了网市场云建站系统做的网站，其他建站系统做的网站基本也都支持，如果您的网站支持不够好，可以反馈，我们将进行适配。
TCDN已开放授权私有部署，详情点击查看。 - 2024.4.30

在线试用步骤:

1. 免费注册TCDN账户

http://tcdn.zvo.cn/reg.html
点击链接在线注册开通，免费使用。 （因使用量比较大，当前只限网站页面不超过100个网页的网站，如果你网站页面比较多，可以联系我们放开限制）

另外注册以后，登录的网址为 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忽略不进行翻译，是 

  1. translate.ignore.id.push('menu_pc_ul');

（文档来源： http://translate.zvo.cn/41547.html ）

然后 翻译控制 的编辑按钮，进行编辑

填入后，点击底部的保存。

即可完成了保存。
如果对这填写的两项有疑惑，不知道是什么作用，可以鼠标放到其上面查看相关说明：

设置完毕后，再执行第五步的预览调试：

即可发现，结果已经发生了变化：

顶部导航栏已经不再被翻译，我们通过翻译控制进行自定义调整已经生效了。
到此，您已可以对页面完成了翻译能力的配置，剩下的，就是吧翻译的结果推送到某个地方进行保存、提供对外访问了。

7. 存储设置


配置这个语种翻译之后的网页，是要存储在什么地方。
比如，翻译的语种是日本，您可以在华为云OBS开通一个日本的OBS云存储，配置上，然后将日本这个语种的访问域名绑定到华为云OBS，如此当日本的用户访问时，访问到的是本国的存储节点，达到秒开。
存储方式支持SFTP、FTP、华为云OBS、阿里云OSS、七牛云Kodo……多种存储方式，您可以选择您最熟悉的存储方式配置上。
（存储能力有开源项目 https://gitee.com/mail_osc/FileUpload 提供支持）
当然，鼠标放到 设置 文字上，也能看到存储设置的相关说明：

点击存储设置按钮后，即可弹出一个存储设置的填写，如下图：

这里你可以选择一个你所熟悉的存储方式，填写完毕，进行保存时，系统会自动进行连接测试，如果填写没问题，能连通，那么就可以设置成功了。

8. 执行翻译

进行翻译，执行翻译，将原本网站翻译为指定语种，并存储到您自己设置的存储位置进行存储。
注意

  1. 执行翻译时，会自动读取您源站根路径下的 sitemap.xml 文件，根据此文件中存在的页面进行翻译。 如果您源站没有 sitemap.xml 文件，则只是会翻译首页提供效果测试
  2. 当前因使用人数众多，所以增加了一个限制，sitemap.xml 中不超过100个页面，才会进行翻译，如果超过了100个页面了，需要与我们联系后才能放开限制，以防止有人故意提交页面非常多的网站，占用计算资源，导致其他人排队等待会非常漫长。
  3. 点击执行后，会创建一个翻译任务，翻译任务并不会立即执行，而是进入排队期，前面排队的任务（包括别人的）都执行完后才会执行您此次的翻译任务。您可以通过“查看日志”来时时查看任务执行情况

9. 查看翻译任务排队情况

由于您提交翻译任务后会进入排队状态，所以只有排队到您的任务时，才会正式被翻译并推送到您自己设置的存储空间。
当前有多少人在排队，你排在第几位，我们可以通过此来查看当前实时的排队情况

同样，鼠标放到文本上，也会显示相应提示：

如果你当前已经提交翻译任务并且已经在执行了，你可以方便的查看当前执行情况及进度，如下图：

其中右上角的 [刷新] 按钮，可以随时点击刷新查看当前任务的最新进度，比如执行到了第几个、是否有某个页面翻译失败等。
[立即结束我的任务] 按钮，可以立即结束你当前正在进行的任务。 当你点击按钮结束任务后，你可以查看日志，便可以看到任务执行完哪一个网址后结束的

10. 查看翻译结果及访问

当您的翻译任务排到并执行后，您可以手动登录您在上面第7步所配置的存储中，进入看一下，看看是否已经多了您网站相关的翻译页面。
这些页面便是TCDN自动翻译并将翻译后的网页自动推送过来的。
有了页面，您也就可以绑定域名进行访问了。 比如绑定个二级域名 english.xxxx.com 提供英文翻译页面的访问

如果您想通过目录式访问，比如 www.xxxx.com/english 您可以要在第7步中，将存储空间设置到您本身网站的 english 路径下，这样翻译完成后自然也就能访问到了

11. 翻译日志查看


您可以通过翻译日志，来查看您的翻译具体执行情况

可以检索结果，如下图所示，可以检索翻译失败的记录

找到这个失败翻译记录，可以进行下载这个任务翻译失败的url （仅仅只是这个任务的）
自动将本任务中所有翻译失败的url组合为一个sitemap.xml下载下来，您可以将这个翻译失败的sitemap.xml 上传上去重新执行翻译。

12. 更多使用扩展

示例一：设置网页翻译属性

比如我想设置网页中翻译时，直接使用元素整体翻译，这样可以翻译的更准确些，那么就可以设置 [翻译控制] - [翻译前执行的JavaScript] 来进行设置，如下图：

示例二：超链接处理替换

设置网页中所有的超链接（也就是A标签），链接地址中如果包含有 http://www.zvo.cn 这个域名的，自动替换为 http://abc.com/english 那么也可以使用翻译控制来进行

其中代码：

  1. // 获取当前网页中所有的 a 标签
  2. const links = document.getElementsByTagName('a');
  3. for (let i = 0; i < links.length; i++) {
  4.   const link = links[i];
  5.   const href = link.getAttribute('href');
  6.   if(typeof(href) == 'undefined' || href == null){
  7.       continue;
  8.   }
  9.   if (href.includes('http://www.zvo.cn')) {
  10.     if(href.indexOf('http://abc.com/english') > -1){
  11.         //已经替换过了
  12.         continue;
  13.     }
  14.     link.href = href.replace('http://www.zvo.cn', 'http://abc.com/english');
  15.   }
  16. }

示例三：中文翻译为英文，文字变长撑破布局了

中文的文本宽度比英文的要小很多，很多情况下中文站翻译为英文后会出现布局被文本撑破的现象。这样就要针对英文的来进行单独的适配。
比较实际的做法，就是如果是英文站，那么引入一个专门为英文站适配的css样式文件，对原本的某些样式进行重写，以应对英文浏览。那么这个英文适配的css文件 <link rel="stylesheet" href="http://xxxxx.com/english.css"> 把这个样式引入设置到 [翻译控制] - [翻译后追加的html代码] 这样翻译后的页面变会自动将这个引入样式的代码追加到 </html> 后面