Hướng dẫn how do you translate content in html? - làm thế nào để bạn dịch nội dung trong html?

Định nghĩa và cách sử dụng

Thuộc tính translate chỉ định liệu nội dung của một phần tử có nên được dịch hay không.

Kiểm tra: Sử dụng hộp Google Dịch (ở đầu trang) để thay đổi sang ngôn ngữ khác và xem những gì xảy ra với từ "kem" bên dưới:

Ở đây chúng tôi sử dụng dịch = "Không": kem.ice cream.

Ở đây chúng tôi sử dụng lớp = "notranslate": kem.ice cream.

Mẹo: sử dụng lớp = "notranslate" thay vào đó. Use class="notranslate" instead.

Áp dụng cho

Thuộc tính translate là một phần của các thuộc tính toàn cầu và có thể được sử dụng trên bất kỳ phần tử HTML nào.

Thí dụ

Chỉ định rằng một số yếu tố không nên được dịch:

Đừng dịch cái này! Điều này có thể được dịch sang bất kỳ ngôn ngữ.

This can be translated to any language.

Hỗ trợ trình duyệt

Trong các bài viết trước, chúng ta đã thấy cách quốc tế hóa các ứng dụng JavaScript, Angular và Vue thuần túy. Tuy nhiên, người ta vẫn có thể hỏi: Làm thế nào tôi có thể dịch HTML ?,, Có một ứng dụng dịch HTML không? Và câu trả lời là có!

Vì vậy, trong bài viết này, tôi sẽ giải thích cách bắt đầu dịch mã HTML sang các ngôn ngữ khác nhau bằng Lokalise: một dịch vụ đơn giản nhưng rất mạnh mẽ. Bạn sẽ tìm hiểu cách bắt đầu với Lokalise, cách tạo một dự án mới, tải lên các tệp HTML của bạn, thực hiện các bản dịch và tải xuống các tệp HTML được dịch. Đến cuối hướng dẫn này, bạn sẽ có thể dịch HTML như một chuyên gia!

• Trang HTML mẫu để dịch
• Sử dụng Lokalise để dịch HTML
  • Được thiết lập
  • Tải lên tệp HTML để dịch
  • Thêm ngôn ngữ để dịch
  • Thực hiện các bản dịch HTML
  • Người giữ chỗ
  • Tải xuống các tệp HTML được dịch
  • Thiếu các bản dịch
• Phần mở rộng trình duyệt để xem trước các tài liệu HTML
• Sự kết luận
• đọc thêm

Nhận bản demo của Lokalise

Nhận bản demo

Trang HTML mẫu để dịch

Vì vậy, giả sử chúng ta có trang HTML sau me.en.html với nội dung tiếng Anh:

  
  



  
Hi, my name is John Doe!

  


  

    I am a Ruby/Python/Node developer with 8 years' experience.
 I've graduated MIT in 2007 and since that have worked with the following companies:
  

  

    
Macrosoft
    
Pineapple
    
Facelook
  

Đây là một đánh dấu đơn giản cho một trang điển hình của tôi về trang của tôi được tìm thấy trên nhiều trang web cá nhân. Chúng ta cần dịch như sau:

• title của trang.
• Tiêu đề, đoạn văn, và tất cả các mục danh sách.
• Thuộc tính alt cho thẻ img.
• Thuộc tính title cho thẻ abbr.

Tuy nhiên, trong khi điều này có vẻ không phải là một nhiệm vụ phức tạp, hãy xem xét như sau:

• Đầu tiên, điều quan trọng là đảm bảo tất cả các thẻ và thuộc tính của chúng có bản dịch. Tài liệu HTML của bạn càng dài thì càng khó kiểm tra tất cả các nút.
• Ngoài ra, bạn có thể có nhiều trang HTML và mọi tài liệu đều yêu cầu quốc tế hóa.
• Cuối cùng, bạn có thể không quen thuộc với tất cả các ngôn ngữ mà tài liệu phải được dịch. Điều này có nghĩa là bạn có thể cần sự giúp đỡ từ một dịch giả chuyên nghiệp và nó không có khả năng rằng anh ấy sẽ là một chuyên gia HTML.

Do đó, sử dụng hệ thống quản lý dịch thuật đúng là đặt cược tốt nhất của bạn. Gặp gỡ Lokalise: Một TMS và phần mềm bản địa hóa rất phổ biến và tiên tiến nhất hiện có, với các tính năng cốt lõi dưới đây:

• Khả năng dịch các loại nội dung khác nhau với trình soạn thảo đồ họa mạnh mẽ.
• Tập tin đơn giản và quản lý dự án dịch.
• Dịch thuật hợp tác.
• Đảm bảo chất lượng.
• Quá trình nội địa hóa tự động hóa.

Tuy nhiên, nó quá đắt đối với tôi! bạn có thể nghĩ. Trên thực tế, nó không phải: Giá cả bắt đầu từ $ 90 mỗi tháng cho các đội nhỏ. Tuy nhiên, như một vấn đề thực tế, cũng có một kế hoạch miễn phí sẽ có ích cho những khách hàng cần dịch nội dung cho các trang web và ứng dụng cá nhân của họ. Không có hoa hồng ẩn, không có kế hoạch mờ ám. Cuối cùng, các dự án nguồn mở cũng có thể yêu cầu truy cập miễn phí, trong khi các tổ chức phi lợi nhuận đủ điều kiện để được giảm giá đặc biệt. Nghe có vẻ tốt, phải không?

Sử dụng Lokalise để dịch HTML

Được thiết lập

Vì vậy, điều đầu tiên trước tiên: chúng ta cần thiết lập ứng dụng dịch HTML của mình. Nếu bạn không có tài khoản Lokalise, hãy dùng thử 14 ngày miễn phí tại đây. Khi thử nghiệm kết thúc, bạn sẽ tự động chuyển sang gói miễn phí. Tất nhiên, có thể nâng cấp đăng ký của bạn bất cứ lúc nào.

Sau khi đăng ký, bạn sẽ thấy bảng điều khiển dự án của bạn. Nói một cách đơn giản, một dự án là một tập hợp các bản dịch hoặc tệp được dịch (liên quan đến một ứng dụng hoặc dịch vụ duy nhất), những người đóng góp có quyền truy cập vào các bản dịch này và một số cài đặt và tính năng khác (như tích hợp với các dịch vụ của bên thứ ba).

• Tạo một dự án mới bằng cách nhấp vào nút tương ứng trong menu trên cùng.new project by clicking the corresponding button in the top menu.
• Đặt tên cho dự án của bạn, ví dụ như trang web cá nhân.name, for example “Personal Site”.
• Tùy chọn, cung cấp một mô tả dự án.project description.
• Chọn một ngôn ngữ cơ bản - đó là ngôn ngữ gốc của nội dung của bạn.base language — that’s the original language of your content.
• Đảm bảo chọn tài liệu làm loại dự án - điều này sẽ cho phép chúng tôi dịch các tệp HTML.Documents as the Project type — this will allow us to translate HTML files.

Tiếp theo, bạn sẽ được chuyển hướng đến trang dự án.

Tải lên tệp HTML để dịch

Là bước tiếp theo, chúng tôi cần tải lên (nhập) tệp HTML của chúng tôi. Nhấp vào liên kết tải lên hiển thị trong ảnh chụp màn hình ở trên. Bạn sẽ thấy giao diện tải lên như sau:Upload link shown in the screenshot above. You will see the uploading interface as follows:

Trước tiên, nhấp vào liên kết chọn một liên kết tệp và chọn tài liệu HTML từ PC của bạn. Bạn không cần phải điều chỉnh bất kỳ tùy chọn tải lên nào để bắt đầu với dịch HTML. Tuy nhiên, nếu bạn quan tâm đến việc tìm hiểu về mục đích của các tùy chọn tải lên, hãy tham khảo tài liệu tải lên của chúng tôi. Cũng đảm bảo ngôn ngữ được phát hiện đúng như thể hiện ở đây:Select a file link and choose the HTML document from your PC. You don’t need to tweak any uploading options to get started with HTML translation. However, if you are interested in learning about the purpose of the uploading options, refer to our “Uploading files” documentation. Also make sure the language was detected properly as shown here:

Nếu ngôn ngữ không chính xác, hãy sử dụng thả xuống và chọn một tùy chọn khác. Ngoài ra, bạn có thể đổi tên tệp bằng cách nhấp vào tên của nó:

Ngoài ra, bạn sẽ nhận thấy rằng phần %LANG_ISO% được thêm tự động. Về cơ bản, nó nói rằng mã địa phương sẽ được đặt ở vị trí này. Khi tải xuống các tệp dịch cho các ngôn ngữ khác nhau, translate0 sẽ được thay thế bằng mã ngôn ngữ phù hợp, ví dụ: translate1 hoặc translate2. Có một mã ngôn ngữ trong tên tệp có lợi vì bạn có thể dễ dàng hiểu phiên bản ngôn ngữ mà tài liệu chứa.

Khi bạn đã sẵn sàng, nhấp vào Nhập nút Tệp. Quá trình tải lên sẽ xảy ra trong nền. Sử dụng trang hoạt động để xem tiến trình của công việc: Import the files button. The uploading process will happen in the background. Use the Activity page to see the progress of the job:

Tải lên sẽ được hoàn thành trong một vài khoảnh khắc:

Bây giờ, nhấp vào liên kết trang web cá nhân trong menu trên cùng. Bạn sẽ thấy nội dung của tài liệu HTML của bạn được phân tách bằng thẻ: Personal Site link in the top menu. You should see the contents of your HTML document separated by tags:

Thêm ngôn ngữ để dịch

Vì vậy, chúng tôi đã tải tệp HTML và có thể tiến hành dịch thực tế. Tuy nhiên, những ngôn ngữ nào chúng ta muốn dịch? Để chọn ngôn ngữ, nhấp vào danh sách thả xuống tiếng Anh ở bên phải và nhấp vào Thêm ngôn ngữEnglish dropdown to the right, and click Add language…

Tiếp theo, chọn một hoặc nhiều ngôn ngữ từ thả xuống. Tôi sẽ chọn tiếng Nga và đánh bóng cho dưới đây:

Nhấp vào Thêm khi bạn đã sẵn sàng.Add once you are ready.

Bây giờ chỉ cần chọn một trong các ngôn ngữ từ thả xuống bên phải. Đây là ngôn ngữ mà chúng ta sẽ chuyển thành (ngôn ngữ mục tiêu). Dropdown bên trái cho thấy ngôn ngữ mà bạn đang dịch từ (Ngôn ngữ nguồn):

Cuối cùng, một khi bạn đã chọn ngôn ngữ đích, các giá trị bên phải sẽ chứa các giá trị trống:Empty values:

Vì vậy, đây là những giá trị cho ngôn ngữ đích (được đặt thành tiếng Nga trong ví dụ trên). Họ trống rỗng vì chúng tôi chưa dịch bất cứ điều gì. Các giá trị bên trái thuộc về ngôn ngữ nguồn (tiếng Anh). Hãy nhớ rằng ban đầu trang HTML bằng tiếng Anh, do đó, đó cũng là ngôn ngữ cơ bản của dự án của chúng tôi.

Thực hiện các bản dịch HTML

Vì vậy, tại thời điểm này, bạn có thể đi trước và dịch nội dung của bạn. Để làm điều đó, chỉ cần nhấp vào một trong các giá trị trống:Empty values:

Nhập bản dịch vào hộp văn bản hoặc chọn một trong các đề xuất dưới đây. Những gợi ý này là các bản dịch máy từ Google, DEEPL và Bing. Khi bạn đã sẵn sàng, nhấp vào nút OK với biểu tượng kiểm tra. Bản dịch của bạn hiện đã được lưu:OK button with the checkmark icon. Your translation is now saved:

Để chỉnh sửa bản dịch, chỉ cần nhấp vào giá trị của nó.

Người giữ chỗ

Bây giờ, những gì về thẻ hình ảnh? Hiện tại giá trị của nó trông như thế này:

Đây là một khối được hiển thị theo cách thân thiện với người dùng. Tuy nhiên, nếu bạn muốn xem đánh dấu thực tế, hãy vô hiệu hóa các trình giữ chỗ hiển thị dưới dạng tùy chọn khối:Display placeholders as blocks option:

Bây giờ, hãy để cung cấp một bản dịch cho thẻ img:

Bạn sẽ nhận thấy rằng trình soạn thảo nhắc nhở bạn rằng giá trị hiện tại có phần tử bị thiếu (thẻ img). Nhấp vào phần tử còn thiếu để thêm nó vào hộp văn bản. Ngoài ra, hãy vô hiệu hóa hiển thị giữ chỗ dưới dạng các khối trong khi chỉnh sửa, ví dụ:

Tiếp theo, dịch thuộc tính alt:

Sau đó, tiến hành dịch đoạn văn:

Nó cho thấy hai người giữ chỗ:

1. Đầu tiên, thẻ translate6 của chúng tôi, mà chúng ta nên để lại nguyên vẹn.
2. Thứ hai, thẻ abbr. Chúng ta cần dịch thuộc tính title của nó.

Vì vậy, nhấp vào nút Chèn nguồn và thực hiện dịch theo cách tương tự như trước đây:Insert source button and perform the translation in the same way as before:

Tiếp theo, chỉ cần dịch tất cả các yếu tố khác:

Tải xuống các tệp HTML được dịch

Vì vậy, một khi bạn đã dịch các tệp HTML của mình, thì đó là thời gian cao, bạn đã tải xuống chúng! Bắt đầu bằng cách nhấp vào Tải xuống, như được hiển thị ở đây:Download, as shown here:

Tiếp theo, chọn HTML từ Dropat Dropdown và chọn các ngôn ngữ mà bạn muốn tải xuống:HTML from the Format dropdown, and select the languages that you would like to download:

Ngoài ra, bạn sẽ có thể thấy tiến trình dịch cho từng ngôn ngữ. Có thể điều chỉnh mã ngôn ngữ bằng cách nhấp vào chúng:

Hãy nhớ rằng các mã ngôn ngữ này sẽ tạo thành một phần của tên tệp (nếu tên có phần %LANG_ISO%). Vì vậy, đối với ngôn ngữ Nga, bạn sẽ thấy translate1.

Sau đó, nhấp vào nút Xem trước để xem các tệp dịch của bạn sẽ trông như thế nào:Preview button to see how your translation files will look:

Đây là kết quả:

Đối với mỗi ngôn ngữ, bạn sẽ thấy tên tệp và nội dung được dịch.

Bây giờ quay lại trang tải xuống và nhấp vào xây dựng và tải xuống. Bạn sẽ nhận được một kho lưu trữ được đặt tên theo dự án của bạn. Lưu trữ sẽ chứa các tệp dịch cho từng ngôn ngữ được chọn, được tách thành các thư mục:Download page and click Build and download. You will get an archive named after your project. The archive will contain translation files for each chosen language, which are separated into folders:

Kết quả là, bạn vừa dịch trang HTML của mình. Xin chúc mừng!

Thiếu các bản dịch

Bây giờ, nếu bạn chưa dịch một số giá trị thì sao? Trong quá trình tải xuống, có thể chọn những gì cần thực hiện với các giá trị như vậy:

• Xuất dưới dạng chuỗi trống - các thẻ không có bản dịch sẽ trống. — tags that have no translations will be empty.
• Don Tiết xuất khẩu - Các bản dịch tương ứng won được xuất khẩu. Đối với các tài liệu HTML, nó hoạt động theo một cách hơi khác: nếu ngôn ngữ hoàn toàn không có bản dịch, nó đã thắng được xuất khẩu. Nếu ngôn ngữ có một số ít các giá trị chưa được dịch, chúng sẽ được thay thế bằng văn bản gốc (là tiếng Anh trong trường hợp của chúng tôi). — the corresponding translations won’t be exported. For HTML documents it works in a slightly different way: if the language has no translations at all, it won’t be exported. If the language has a handful of untranslated values, they will be replaced with the original text (which is English in our case).
• Thay thế bằng ngôn ngữ cơ sở - Thay thế tất cả các chuỗi chưa được dịch bằng các giá trị từ ngôn ngữ cơ sở. — replaces all untranslated strings with the values from the base language.

Bạn có thể kiểm soát điều này trên trang tải xuống bằng cách sử dụng các bản dịch trống, như SO:Download page using the Empty translations dropdown, like so:

Bây giờ, điều gì sẽ xảy ra nếu bạn muốn tìm thấy tất cả các giá trị bị thiếu các bản dịch và đối phó với chúng? Để đạt được điều này, hãy sử dụng thả xuống bộ lọc trên trang dự án và chọn chưa được dịch:Filter dropdown on the project page and choose Untranslated:

Bằng cách này, bạn sẽ chỉ thấy các giá trị chưa được dịch cho ngôn ngữ đã chọn!

Phần mở rộng trình duyệt để xem trước các tài liệu HTML

Bạn cũng có thể sử dụng các tiện ích mở rộng không chính thức này cho Firefox và Chrome để xem trước các tài liệu HTML trong Lokalise trước khi xuất chúng. Để sử dụng tiện ích mở rộng:

• Cài đặt nó trong trình duyệt của bạn
• Tiến hành đến Lokalise
• Mở trang tải xuốngDownload page
• Điều chỉnh các tùy chọn khi cần thiết
• Nhấp vào Xem trướcPreview
• Cuộn xuống cuối trang và xem trước tài liệu!

Sự kết luận

Vì vậy, trong hướng dẫn này, chúng tôi đã thấy cách dịch HTML bằng giao diện người dùng đồ họa Lokalise. Hãy nhớ rằng bạn có thể tải lên nhiều tệp dịch vào một dự án và có thể thêm càng nhiều ngôn ngữ khi cần. Mặc dù chúng tôi đã bao gồm khá nhiều tài liệu, Lokalise cung cấp nhiều tính năng khác. Dưới đây là một vài gợi ý có thể khiến bạn quan tâm:

• Thêm và quản lý những người đóng góp
• Đặt hàng các bản dịch chuyên nghiệp
• Tích hợp với các dịch vụ của bên thứ ba như Asana, GitHub, Amazon S3 và nhiều dịch vụ khác
• Làm việc với các nhiệm vụ dịch thuật

Hãy liên hệ với chúng tôi nếu bạn có thêm bất kỳ câu hỏi nào hoặc nếu bạn muốn tìm hiểu thêm về nền tảng. Cảm ơn bạn đã dừng lại hôm nay, và cho đến lần sau!

đọc thêm

• Vue i18n: Xây dựng một ứng dụng đa ngôn ngữ
• Angular I18N: Thực hiện các bản dịch với mô-đun tích hợp
• Nội địa hóa các ứng dụng JavaScript với jQuery.I18N & nbsp;

Làm cách nào để dịch nội dung HTML?

Trình dịch nào được sử dụng bởi HTML?

Làm cách nào để dịch mọi thứ trên trang web?