CN119311272A - Web page interface development internationalization method, device, equipment, storage medium and program product - Google Patents
Web page interface development internationalization method, device, equipment, storage medium and program product Download PDFInfo
- Publication number
- CN119311272A CN119311272A CN202411462088.9A CN202411462088A CN119311272A CN 119311272 A CN119311272 A CN 119311272A CN 202411462088 A CN202411462088 A CN 202411462088A CN 119311272 A CN119311272 A CN 119311272A
- Authority
- CN
- China
- Prior art keywords
- translation
- content
- language
- text
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/40—Processing or translation of natural language
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
- G06F9/454—Multi-language systems; Localisation; Internationalisation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Computational Linguistics (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Artificial Intelligence (AREA)
- Machine Translation (AREA)
Abstract
本申请涉及一种网页界面国际化开发方法、装置、计算机设备、计算机可读存储介质和计算机程序产品，涉及软件开发技术领域，能够提高网页界面国际化开发的开发效率。所述方法包括：响应于对目标网页文本元素的选中操作，显示语言翻译组件；目标网页元素为具有包含国际化键的文本内容的网页元素；响应于对语言翻译组件的触发操作，根据国际化键获取文本内容对应的第一翻译内容；获取通过辅助翻译接口得到的部分或全部文本内容对应的第二翻译内容；根据第一翻译内容和第二翻译内容，得到文本内容对应的目标翻译内容。
The present application relates to a web page interface internationalization development method, device, computer equipment, computer readable storage medium and computer program product, and relates to the field of software development technology, which can improve the development efficiency of web page interface internationalization development. The method comprises: in response to the selection operation of the target web page text element, displaying a language translation component; the target web page element is a web page element with text content containing an internationalization key; in response to the triggering operation of the language translation component, obtaining the first translation content corresponding to the text content according to the internationalization key; obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface; and obtaining the target translation content corresponding to the text content according to the first translation content and the second translation content.
Description
Technical Field
The present application relates to the field of software development, and in particular, to a web interface development internationalization method, apparatus, computer device, computer readable storage medium, and computer program product.
Background
Along with the acceleration of globalization process, the technical field of software development introduces internationalization technology, which aims to support multilingual and multicultural environments and provide consistent experience for global users. The method is characterized by multi-language support, character coding processing and localized adaptation, so that the application program can be flexibly adjusted according to the requirements of different areas. The current internationalization method mainly relies on storing internationalization contents in a plurality of standard local language file formats to store translation contents, and the translation contents are defined in advance in the form of key value pairs.
In conventional approaches, developers typically maintain separate translation files for each language and load these files at compile time to provide multi-language support. While this approach can achieve the basic internationalization requirements, it is time and labor consuming to handle dynamic content and context-dependent translations, making internationalization less efficient to develop.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a web interface development internationalization method, apparatus, computer device, computer readable storage medium, and computer program product that can improve development efficiency of internationalization.
In a first aspect, the present application provides a method for internationalization of web interface development, including:
displaying a language translation component in response to a selection operation of a target webpage text element, wherein the target webpage element is a webpage element with text content containing internationalization keys;
Responding to the triggering operation of the language translation component, and acquiring first translation content corresponding to the text content according to the internationalization key;
acquiring second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface;
and obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.
In one embodiment, before the language translation component is displayed in response to the selection operation of the target webpage text element, the method further comprises determining that the selection operation is received if a mouse passing event of the target webpage text element is monitored, and the language translation component is displayed according to the position of the target webpage text element or the position of a mouse.
In one embodiment, the responding to the triggering operation of the language translation component and obtaining the first translation content corresponding to the text content according to the internationalization key comprises responding to the triggering operation of the language translation component, displaying a translation window, requesting a server for candidate first translation content corresponding to the text content according to the internationalization key, displaying a language translation form corresponding to the internationalization key on the translation window, displaying a preset first translation content on the language translation form, and displaying the first translation content on the language translation form according to the candidate first translation content and the preset first translation content.
In one embodiment, the displaying the first translation content in the language translation form according to the candidate first translation content and the preset first translation content includes displaying the preset first translation content as the first translation content in the language translation form if the candidate first translation content is empty, and displaying the candidate first translation content as the first translation content in the language translation form if the candidate first translation content is not empty.
In one embodiment, the translation window further displays a language input box, before the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface is obtained, the method further comprises the steps that after the first translation content is displayed by the language translation form, part or all of the text content input into the language input box is obtained, part or all of the text content is sent to the server, so that the server can obtain the second translation content corresponding to part or all of the text content through the auxiliary translation interface, and after the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface is obtained, the method further comprises the step of displaying the second translation content in the language translation form.
In one embodiment, after obtaining the target translation content corresponding to the text content according to the first translation content and the second translation content, the method further includes displaying the target translation content in the language translation form, and submitting the language translation form to the server for the server to replace the text content of the target webpage text element with the target translation content.
In a second aspect, the present application further provides a device for internationalization of web interface development, including:
the language translation component display module is used for responding to the selection operation of the target webpage text element, and displaying the language translation component, wherein the target webpage element is a webpage element with text content containing internationalization keys;
The first translation content acquisition module is used for responding to the triggering operation of the language translation component and acquiring first translation content corresponding to the text content according to the internationalization key;
The second translation content acquisition module is used for acquiring second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface;
And the translation integration module is used for obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.
In a third aspect, the present application also provides a computer device comprising a memory and a processor, the memory storing a computer program, the processor implementing the following steps when executing the computer program:
The method comprises the steps of responding to a selection operation of a target webpage text element, displaying a language translation component, responding to a triggering operation of the language translation component, obtaining first translation content corresponding to the text content according to the internationalization key, obtaining second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface, and obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.
In a fourth aspect, the present application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of:
The method comprises the steps of responding to a selection operation of a target webpage text element, displaying a language translation component, responding to a triggering operation of the language translation component, obtaining first translation content corresponding to the text content according to the internationalization key, obtaining second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface, and obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.
In a fifth aspect, the application also provides a computer program product comprising a computer program which, when executed by a processor, performs the steps of:
The method comprises the steps of responding to a selection operation of a target webpage text element, displaying a language translation component, responding to a triggering operation of the language translation component, obtaining first translation content corresponding to the text content according to the internationalization key, obtaining second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface, and obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.
The internationalization method, the internationalization device, the computer equipment, the computer readable storage medium and the computer program product for web interface development are characterized in that a language translation component is displayed by responding to a selection operation of a target web page text element, the target web page element is a web page element with text content containing internationalization keys, a first translation content corresponding to the text content is obtained according to the internationalization keys in response to a trigger operation of the language translation component, a second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface is obtained, and target translation content corresponding to the text content is obtained according to the first translation content and the second translation content. According to the application, a language translation component is formed in a friendly interaction mode, a translation mode can be directly entered, other non-developers are supported to participate in internationalized development and maintenance, translation items of currently selected webpage elements can be rapidly searched through internationalized keys, the consistency of translation contents is ensured, the possibility of misoperation is reduced, meanwhile, a real-time dynamic translation result can be generated when needed through an auxiliary translation interface, the context accuracy of translation and the real-time property of translation are ensured, the first translation content is combined with the second translation content, the target translation content is generated, the translation management is more flexible and personalized, and the development efficiency of internationalized development of a webpage interface is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the related art, the drawings that are needed in the description of the embodiments of the present application or the related technologies will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and other related drawings may be obtained according to these drawings without inventive effort to those of ordinary skill in the art.
FIG. 1 is a flow diagram of an internationalization method for web interface development in one embodiment;
FIG. 2 is a flow diagram of an internationalization method for web interface development based on debug versions in one embodiment;
FIG. 3 is a flowchart of an internationalization method for web interface development in another embodiment;
FIG. 4 is a block diagram of an internationalization device for web interface development in one embodiment;
fig. 5 is an internal structural diagram of a computer device in one embodiment.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.
In order that those skilled in the art may better understand the present application, the related art will be described.
Multilingual support refers to allowing applications to provide the same functionality and user experience in different language environments. This involves designing and implementing applications that can dynamically adapt to different languages without affecting functionality or usability. The developer may achieve this goal by using various programming languages and frameworks (e.g., java, javaScript and vue. Js).
Character encoding refers to relying on different character sets and encoding schemes in different language scenarios. To ensure that an application can properly process and display characters in multiple languages, developers need to be familiar with various character encoding standards, such as UTF-8 or UTF-16, and use the appropriate encoding scheme in the code. Especially when dealing with languages other than latin letters, character representations may be more complex.
Localization refers to the process of adapting an application to different cultural environments, ensuring that not only the content is translated, but also to formats conforming to regional habits, such as date formats, currency symbols, time formats, and digital systems. To simplify the localization effort, developers often rely on localization libraries and tools, such as movement.js, REACTINTL, etc., that provide functionality to format content according to user-specific locale settings.
In one embodiment, as shown in fig. 1, there is provided a web interface development internationalization method, and the method is applied to a terminal for illustration in this embodiment, and the method includes the following steps:
Step S102, in response to the selected operation of the text element of the target webpage, a language translation component is displayed. The target web page element is a web page element having text content including internationalization keys.
Wherein the target web page text element belongs to a manager web page element with text content, which may be in the form of, for example, buttons, titles, menu items, paragraph text, or the like. The target web page text element is integrated with the internationalization mechanism of the system, and its text content may contain internationalization keys associated with specific languages internationalization.
The internationalization key can be used as an identifier for associating a webpage text element with multilingual translation content, and can be embedded into an attribute in HyperText Markup Language (HTML), for example "< div data-i18 n-key=" product-name "data-i18 n-value=" product name ">" product name ", the internationalization key data-i18n-key can be used for identifying a specific Language text and associating the specific Language text with corresponding translation content, and the data-i18n-value is a value corresponding to the internationalization key data-i18n-key, and div refers to a block element in the HTML.
The selection operation may be an operation that a manager selects a specific text element when interacting with a web page. Such operation may be accomplished by touch, keyboard navigation, and the like.
Wherein the language translation component is a translation result for displaying text content corresponding to the text element of the target web page, which may be configured to be presented in the web page as a result of certain actions being triggered in the web page.
Illustratively, the administrator selects a certain web page text element (such as a product description paragraph) in the web page by touch, and the terminal detects the selected operation of the administrator, and the language translation component is displayed in the vicinity of the web page text element, for example.
Step S104, responding to the triggering operation of the language translation component, and acquiring first translation content corresponding to the text content according to the internationalization key.
The first translation content may be standard translation content corresponding to an internationalization key retrieved from the server by the terminal. The first translation content can be default translation preset, is suitable for language setting of the current page, is used as a basic translation result of the terminal and is displayed to a manager or is further edited by the manager, and can also be blank, and is used as setting of internationalization keys and edge quasi translation text for the first time for further editing by the manager.
Illustratively, the administrator triggers the translation retrieval process by clicking on the language translation component. The terminal locates the corresponding translation language file through the internationalization key of the target webpage text element, points to the translation database of the server, and acquires the first translation content corresponding to the text content acquired by the internationalization key.
Optionally, the terminal can also search the translation content corresponding to the key from the local cache, so as to improve the searching efficiency and avoid accessing the remote server in each operation. If the local cache does not have a corresponding translation entry, the terminal automatically initiates a server request to retrieve the first translation content in the remote database.
Step S106, obtaining a part or all of second translation content corresponding to the text content obtained through the auxiliary translation interface.
The auxiliary translation interface may be an external translation service or tool for generating real-time translations. The auxiliary translation interface may be coupled to an online translation service, such as a machine translation or language model, to assist in providing translated content of text content corresponding to internationalized keys. Unlike the translations preset in the system, the translation content generated by the auxiliary translation interface may be real-time, up-to-date data-based translations.
The second translation content is a translation result generated through the auxiliary translation interface. The second translation content may be used to replace or supplement the first translation content when the translation needs to be generated in real time or the first translation content cannot be obtained. The second translation content may be a result of translating the partially selected text content, or may be a complete translation result of the completely selected text content.
The terminal, for example, checks whether the first translated content of the selected text content already exists or meets the requirements of the current language environment. If there is no suitable first translation content, the terminal invokes an auxiliary translation interface. The terminal allows the manager to request auxiliary translation interface processing for only part of the text content or processing for the whole text content. And generating second translation content after receiving the translation result through the auxiliary translation interface, and returning the second translation content to the terminal.
Step S108, obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.
The target translation content is a translation result for final presentation to the manager, and the translation content can be obtained by comparing, selecting or combining the first translation content and the second translation content. The terminal can automatically or manually determine the target translation content according to logic or manager input, so as to ensure that the target translation content is accurate and suitable and meets the requirements of the current language environment.
The terminal automatically selects the first translation content or the second translation content as the target translation content according to a preset logic rule. For example, when the first translation content exists and the quality is high, the terminal may select the first translation content as the target translation content to be finally displayed. The terminal may employ the second translation content when the first translation content is missing, of low quality, or the manager explicitly requires the use of dynamically generated translations.
Optionally, the terminal allows the manager to manually select the target translation content, and the manager decides the target translation content finally applied to the webpage display by comparing the first translation content with the second translation content.
In the internationalization method for developing the webpage interface, a language translation component is displayed by responding to the selection operation of a target webpage text element, the target webpage element is a webpage element with text content containing internationalization keys, the first translation content corresponding to the text content is obtained according to the internationalization keys by responding to the triggering operation of the language translation component, the second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface is obtained, and the target translation content corresponding to the text content is obtained according to the first translation content and the second translation content. In the embodiment, a language translation component is formed through a friendly interaction mode, a translation mode can be directly entered, other non-developers are supported to participate in internationalized development and maintenance, translation items of currently selected webpage elements can be quickly searched through internationalized keys, consistency of translation contents is guaranteed, possibility of misoperation is reduced, meanwhile, a real-time dynamic translation result can be generated when needed through an auxiliary translation interface, context accuracy of translation and real-time of translation are guaranteed, first translation contents are combined with second translation contents, target translation contents are generated, translation management is more flexible and personalized, and development efficiency of international development of a webpage interface is improved.
In one exemplary embodiment, before displaying the language translation component in response to the selection of the target web page text element, determining that the selection is received if a mouse passing event for the target web page text element is monitored, displaying the language translation component includes displaying the language translation component based on a location of the target web page text element or a location of the mouse.
Illustratively, the terminal first determines the manager's selected operation by passing an event through the mouse. Before the manager does not operate, the preliminary interaction behavior of the manager and the text element of the target webpage is captured by setting a mouse event monitor. When the terminal detects that the mouse of the manager hovers over a certain target web page text element, the terminal can determine that the element is "selected", and the language translation component (edit icon button) is displayed after further confirming the operation of the manager.
Specifically, when the terminal loads the webpage, globally listens to all DOM (document object model ) elements with internationalization key (data-i 18 n-key) attributes through a document object (document). By listening for mouse pass (mouseover) and mouse move in (mouseout) events, it can be detected whether the administrator moves the mouse over the target web page text element.
When the mouse is triggered by an event, the terminal judges whether the manager hovers on the text element of the target webpage for a long time. If the mouse of the manager moves out of the element in a short time, the editing icon button is not displayed, and the false selection operation is avoided. If the mouse is hovering over the element for more than a preset time, the terminal determines that the target web page text element has been selected, and then invokes a show edit icon button (showEditButton) function to display the edit icon button. In this process, showEditButton functions adjust the position of the edit icon button based on the current DOM element position information or the position of the mouse pointer.
When the manager moves the mouse out of the text element of the target webpage, the terminal automatically conceals the editing icon button through mouseout events so as to prevent excessive interactive elements on the webpage from interfering with the operation of the manager. The hidden edit icon button (hideEditButton) function is responsible for detecting a mouse out event of the manager and removing the edit icon button to ensure a clean interface.
In the embodiment, through the global monitoring mechanism, real-time monitoring and intelligent response to the text element of the target webpage are realized. When the mouse of the manager passes through the DOM element containing the internationalization key, the interaction intention of the manager can be accurately captured and the editing icon buttons can be displayed. The mechanism provides a concise translation editing entry on the premise of not disturbing management staff, and greatly improves the translation management efficiency of the multi-language webpage.
In an exemplary embodiment, the method for acquiring the first translation content corresponding to the text content according to the internationalization key in response to the triggering operation of the language translation component comprises the steps of responding to the triggering operation of the language translation component, displaying a translation window, requesting candidate first translation content corresponding to the text content from a server according to the internationalization key, displaying a language translation form corresponding to the internationalization key on the translation window, displaying preset first translation content on the language translation form, and displaying the first translation content on the language translation form according to the candidate first translation content and the preset first translation content.
The preset first translation content may be defined in advance, and is used for displaying a default translation result to a manager when the webpage is initially loaded. The preset first translation content provides a basic translation for the multilingual text in the web page, and is used for being displayed in a translation form for confirmation or modification by a manager.
The candidate first translation content is a translation candidate content related to an internationalization key, which is requested by the system from the server side through a presentation state transition interface (presentation STATE TRANSFER, RESTFUL). The candidate first translation content may be a dynamic update from a server or a translation record associated with the current page, and may contain multiple language options for assisting the manager in selecting or referencing the translation content.
The translation window may be a modal window popped up after the administrator clicks on the language translation component, and is used for displaying the translation form.
The language translation form is a part of a translation window and is used for displaying translation content corresponding to the text of the currently selected target webpage. The language translation form includes, but is not limited to, an internationalization key, preset first translation content related to the key, and candidate first translation content. And the manager can edit, select and submit the translation contents in the language translation form, and finally determine the target translation contents of the page presentation.
Specifically, when the administrator clicks the language translation component in the page, the terminal triggers an operation of displaying the modal window.
After the terminal displays the translation window, the terminal can acquire the multilingual translation content stored in the server through a RESTful interface acquisition request (GET). The data returned by the server contains candidate first translation content which can be an updated result of the system or other options in the multilingual version. And after receiving the candidate first translation, the terminal fills the candidate first translation content into the translation form. The manager may select or edit the preset first translation content and the candidate first translation content in the translation window. The terminal allows the manager to manually modify the text in the translation form based on the candidate first translation content and ultimately confirm the save translation.
In this embodiment, the candidate translation content of the server is requested through the RESTful interface, so that a multi-language version translation selection can be provided for a manager, and a preset first translation content and the candidate translation content are displayed in the translation form, so that the final translation text is ensured to more meet the language environment and the context requirement. Meanwhile, the display of the candidate translation content provides more references for the manager, ensures the consistency and accuracy of the content of the multi-language webpage, and improves the internationalization development efficiency of the webpage.
In an exemplary embodiment, displaying the first translation content in the language translation form according to the candidate first translation content and the preset first translation content includes displaying the preset first translation content as the first translation content in the language translation form if the candidate first translation content is empty, and displaying the candidate first translation content as the first translation content in the language translation form if the candidate first translation content is non-empty.
Specifically, when the manager clicks the language translation component and triggers the translation editing window, the terminal may request candidate first translation contents corresponding to an internationalization key (data-i 18 n-key) from the server through the RESTful interface. The RESTful interface/api/locale_value obtains candidate first translation content of the key under each language according to the provided data-i18n-key, and returns the candidate first translation content in a JSON format. If some languages are not translated, the translated content returned by the server will be null.
When the terminal receives the candidate first translation content from the server and renders the language translation form, the terminal selects and displays the candidate first translation content or presets the first translation content according to different conditions. And if the candidate first translation content is empty, the terminal displays the preset first translation content in the language translation form. The preset first translation content may be a default translation defined when the terminal is online, and is used for ensuring the integrity and consistency of the translation content. If the candidate first translation content is not empty, the terminal preferentially displays the candidate first translation content returned by the server, which indicates that the text has been updated or revised at the server side, and the manager can check and confirm the candidate translation in the translation form.
In this embodiment, the final first translation content can be intelligently selected and displayed according to different situations of the candidate first translation content and the preset first translation content. And for the language which is not translated, displaying the preset first translation content, so that the real-time property and the accuracy of translation are ensured. The method greatly improves flexibility and efficiency of internationalization development, and avoids incomplete or wrong translation caused by candidate translation deficiency.
In an exemplary embodiment, the translation window further displays a language input box, before the second translation content corresponding to the part or all of the text content obtained through the auxiliary translation interface is obtained, the method further comprises the steps that after the first translation content is displayed by the language translation form, the part or all of the text content input into the language input box is obtained, the part or all of the text content is sent to the server, the server obtains the second translation content corresponding to the part or all of the text content through the auxiliary translation interface, and after the second translation content corresponding to the part or all of the text content obtained through the auxiliary translation interface is obtained, the method further comprises the step of displaying the second translation content in the language translation form.
Wherein the language input box can be an interactive element in the translation window for receiving text content manually entered or modified by the administrator. The language input box allows the manager to make further adjustments based on the existing translation and provides a direct input operation interface. The manager can edit the translation content of the currently displayed translation form through a predictive input box, and the system can call the auxiliary translation interface to generate a corresponding translation result according to the input content of the manager.
Specifically, when the manager clicks on the language translation component, the terminal pops up a translation window. The translation window contains a language entry box for the administrator to enter or modify some or all of the text content. The administrator manually enters new translation text in the language input box or uses the content provided by the language input box for auxiliary translation. After the manager inputs part or all of the text contents, the terminal transmits the input text contents to the server. And after receiving the request, the server calls an external auxiliary translation interface to generate corresponding second translation content. The second translation is returned to the front end in JSON format. And after receiving the translation result, the terminal renders the translation result into a language translation form and displays the language translation form in a webpage interface.
In this embodiment, by displaying the language input box, the administrator can manually input part or all of the text content, and flexibly control the translated text. With the help of the auxiliary translation interface, the terminal can generate the second translation content in real time, so that the translation management capability of the multi-language webpage is improved, the method is particularly suitable for complex webpage environments in which the translation content needs to be frequently updated, and the burden of manual translation is effectively reduced by introducing an automatic translation means.
In an exemplary embodiment, after obtaining the target translation content corresponding to the text content according to the first translation content and the second translation content, the method further comprises the steps of displaying the target translation content in a language translation form, and submitting the language translation form to a server for the server to replace the text content of the text element of the target webpage with the target translation content.
Specifically, after generating the target translation content, the terminal dynamically presents it in a language translation form in a translation window. The target translation content may be first translation content, second translation content generated through an auxiliary translation interface, or a combination of both. The translation form not only displays preset translation content, but also can carry out typesetting check on translation sentences so as to ensure that the presentation of the text in different languages accords with expectations. And after confirming the target translation content, the terminal monitors the operation of submitting the translation form by the manager, and submits the confirmed target translation content to the server through a RESTful interface. After receiving the target translation content, the server updates the target translation content to corresponding language files (such as locales/zh-CN/transformations. Json and locales/en-US/transformations. Json) so that the terminal can subsequently load new translation content. After the server successfully receives and stores the target translation content, the terminal automatically updates the corresponding text element on the webpage according to the translation result returned by the server. Through the operation, the manager can immediately see the presentation effect of the latest translation text in the page, and the accuracy of translation content and the consistency of the context are ensured.
After the target web page text element is updated, the terminal provides a checking and verification mechanism to ensure that the submitted target translation content is correctly displayed on the page. The manager can check whether the translation sentence is accurate or not through a specific application scene and a specific context, and meanwhile, the typesetting, the alignment mode and other details of the text are adjusted, so that the suitability of the translation content in a multi-language environment is ensured.
After confirming the accuracy of the target translation content, the translation file will be synchronized into the development environment and submitted to the version control system. The manager may further audit and optimize these translation files in the project.
In this embodiment, through the RESTful interface, the system can dynamically upload the translation content confirmed by the user to the server, and update the corresponding language file, so that the web page can load the latest translation text and immediately present the latest translation text. The process ensures the accuracy of the translation content, the consistency of the context and the rationality of the page layout, and further improves the internationalization development efficiency and maintenance capability of the web page interface.
In one exemplary embodiment, the version control system has two product-based version types, including release and debug. The release version is a formally released version subjected to strict test and optimization, and does not contain internationalization-related codes and functions of webpage development. The debug version then contains the code and functionality for developing internationalization based on the product's web interface.
In a specific embodiment, the debug process of the debug version by the administrator is shown in FIG. 2.
At the beginning, the manager needs to install or deploy the corresponding version of debug type product. After the installation is completed, a manager opens a webpage interface and enters a debugging environment of the terminal. In the debug environment, the developer can edit and update the translated content in real time to ensure the correctness of the multilingual support.
And the manager moves a mouse on the webpage, and when the manager passes through a target webpage text element to be translated in the webpage, the terminal automatically detects the target webpage text element and displays an edit icon button. When the mouse of the manager hovers over the element, the terminal captures the interaction operation of the manager through the event monitor and displays editable buttons. After the manager clicks the edit icon button, the terminal pops up a language translation window (Modal Modal window).
In the Modal Modal window, the manager can see the first translation content corresponding to the internationalization key corresponding to the text element of the current target webpage through the language translation form. In addition, the Modal Modal window can comprise a language input box which is used for displaying translation versions of the text in different languages and allowing a manager to edit the text.
The administrator may view second translation content generated through an auxiliary translation interface, such as based on a generated pre-trained transformation model (GENERATIVE PRE-trained Transformer, GPT) or an online translation API. And the terminal automatically generates second translation contents of the corresponding language by calling the translation services and fills the second translation contents into a corresponding input box of the translation form. And obtaining target translation contents corresponding to the target webpage text elements according to the first translation contents and the second translation contents.
After the target translation content is generated, a manager can check and confirm the target translation content, so that the translation result is accurate and accords with the context of the text. The manager can also translate directly through auxiliary tools and modify the translated content to ensure the rationality and context consistency of the content. This step allows the manager to check and revise the translated content in different languages one by one.
In this embodiment, by debugging the debug version, management personnel (such as design, product, test personnel, etc.) other than the developer can participate in internationalization development and maintenance, so that the internationalization development of the whole web page interface is not dependent on the developer only, and the efficiency of internationalization development is improved.
In order that those skilled in the art may better understand the above steps, an embodiment of the present application will be described below by way of an example, but it should be understood that the embodiment of the present application is not limited thereto.
In an exemplary embodiment, as shown in fig. 3, first, the terminal defines an internationalization key (key) and a corresponding preset translation value (value) for a text element in a target web page. Internationalization keys are unique identifiers for identifying text elements in a particular language, and preset values are typically terminal-initiated translated content for display as default when a language file does not exist or has no translated content.
Next, the terminal checks whether or not translated contents corresponding to the internationalization key already exist in the language file (locale file). If the language file does not exist or the translation content of the key is absent from the file, the terminal automatically uses a preset translation value.
After reading the language file, the terminal generates HTML elements in the webpage according to the internationalization key and displays the HTML elements in the webpage. At this time, a data-i18n-key attribute is embedded in the HTML element, and the attribute binds the internationalization key for subsequent translation management operations.
The terminal sets an event monitor for DOM elements with data-i18n-key attributes, and the event monitor is used for capturing mouse events of management personnel. When the user hovers over these elements, the terminal will display an edit button, allowing the user to click to modify the current translated content.
After the user clicks the edit button, the terminal requests the server through the RESTful interface, acquires all language lists supported by the current terminal, and renders the corresponding translation form. The form will show the translation state of internationalization keys in a multi-language environment, allowing the user to edit translation content in different languages.
The terminal then obtains translation content associated with the internationalization key via the RESTful interface and populates the language translation form with the content. The administrator may view or modify the translation content to ensure that the translations for each language are as expected.
After the administrator modifies the translation content in the translation form, the form may be submitted. After receiving the translated contents submitted by the manager, the terminal sends the translated contents to the server through an uploading request (POST) request, and the server stores the updated translated contents into corresponding language files. After the administrator submits the translation form, the terminal automatically checks and ensures that all translation content has been successfully saved to the language file. The developer can check the correctness of the language file through the version control mechanism of the terminal, so that the file content is ensured to meet the internationalization requirements of the project. After confirming the error, the translation file is synchronously submitted to the code base for the next release of the version.
In the embodiment, the terminal can dynamically acquire and update the translation content through the RESTful interface, so that the complexity of manually managing the language file is reduced, a manager can directly edit the translation content through the translation form and submit the updated translation to the server, the workload of a developer is reduced, the terminal automatically checks and updates the language file, the accuracy and consistency of the translation content are ensured, the modified file is synchronized into a code library through version control, and the internationalized development process is simplified.
It should be understood that, although the steps in the flowcharts related to the embodiments described above are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages.
Based on the same inventive concept, the embodiment of the application also provides a web page interface development internationalization device for realizing the above related web page interface development internationalization method. The implementation scheme of the solution provided by the device is similar to the implementation scheme described in the method, so the specific limitation in the embodiments of the internationalization device for developing a web page interface is referred to as the limitation of the internationalization method for developing a web page interface in the following, and is not repeated herein.
In one exemplary embodiment, as shown in FIG. 4, a web interface development internationalization apparatus is provided, comprising a language translation component display module 410, a first translation content acquisition module 420, a second translation content acquisition module 430, and a translation integration module 440, wherein:
a language translation component display module 410 for displaying a language translation component in response to a selection operation of a target web page text element, the target web page element being a web page element having text content including internationalization keys;
A first translation content obtaining module 420, configured to obtain, according to the internationalization key, first translation content corresponding to the text content in response to a triggering operation on the language translation component;
A second translation content obtaining module 430, configured to obtain second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface;
and the translation integration module 440 is configured to obtain target translation content corresponding to the text content according to the first translation content and the second translation content.
In an exemplary embodiment, the language translation component display module 410 is further configured to determine that the selected operation is received if a mouse passing event for the target web page text element is monitored, and the language translation component display module 410 is configured to display a language translation component according to a position of the target web page text element or a position of a mouse.
In an exemplary embodiment, the first translation content obtaining module 420 is further configured to respond to a triggering operation of the language translation component, display a translation window, and request, according to the internationalization key, candidate first translation content corresponding to the text content to a server, where the translation window displays a language translation form corresponding to the internationalization key, where the language translation form displays preset first translation content, and display the first translation content in the language translation form according to the candidate first translation content and the preset first translation content.
In an exemplary embodiment, the first translation content obtaining module 420 is further configured to display the preset first translation content as the first translation content in a language translation form if the candidate first translation content is empty, and display the candidate first translation content as the first translation content in the language translation form if the candidate first translation content is not empty.
In an exemplary embodiment, the first translation content obtaining module 420 is further configured to obtain, after the language translation form displays the first translation content, part or all of the text content input into the language input box, send part or all of the text content to the server, so that the server obtains, through the auxiliary translation interface, the second translation content corresponding to part or all of the text content, and the second translation content obtaining module 430 is further configured to display, in the language translation form, the second translation content.
In an exemplary embodiment, the translation integration module 440 is further configured to present the target translation content in the language translation form, and submit the language translation form to the server for the server to replace the text content of the target web page text element with the target translation content.
The above-mentioned various modules in the web interface development internationalization apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.
In one exemplary embodiment, a computer device is provided, which may be a terminal, and an internal structure diagram thereof may be as shown in fig. 5. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input means. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The Communication interface of the computer device is used for conducting wired or wireless Communication with an external terminal, and the wireless Communication can be realized through WIFI, a mobile cellular network, near field Communication (NEAR FIELD Communication) or other technologies. The computer program, when executed by a processor, implements a web interface development internationalization method. The display unit of the computer device is used for forming a visual picture, and can be a display screen, a projection device or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, can also be a key, a track ball or a touch pad arranged on the shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by those skilled in the art that the structure shown in FIG. 5 is merely a block diagram of some of the structures associated with the present inventive arrangements and is not limiting of the computer device to which the present inventive arrangements may be applied, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
In one embodiment, a computer device is provided, comprising a memory and a processor, the memory having stored therein a computer program, the processor implementing the steps of the method embodiments described above when the computer program is executed.
In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, implements the steps of the method embodiments described above.
In an embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the method embodiments described above.
It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and the data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are both information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data are required to meet the related regulations.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in embodiments provided herein may include at least one of non-volatile memory and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (RESISTIVE RANDOM ACCESS MEMORY, reRAM), magneto-resistive Memory (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (PHASE CHANGE Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in various forms such as static random access memory (Static Random Access Memory, SRAM) or dynamic random access memory (Dynamic Random Access Memory, DRAM), etc. The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computation, an artificial intelligence (ARTIFICIAL INTELLIGENCE, AI) processor, or the like, but is not limited thereto.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the present application.
The foregoing examples illustrate only a few embodiments of the application and are described in detail herein without thereby limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of the application should be assessed as that of the appended claims.
Claims (10)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202411462088.9A CN119311272A (en) | 2024-10-18 | 2024-10-18 | Web page interface development internationalization method, device, equipment, storage medium and program product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202411462088.9A CN119311272A (en) | 2024-10-18 | 2024-10-18 | Web page interface development internationalization method, device, equipment, storage medium and program product |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN119311272A true CN119311272A (en) | 2025-01-14 |
Family
ID=94178799
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202411462088.9A Pending CN119311272A (en) | 2024-10-18 | 2024-10-18 | Web page interface development internationalization method, device, equipment, storage medium and program product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN119311272A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110077935A1 (en) * | 2009-09-25 | 2011-03-31 | Yahoo! Inc. | Apparatus and methods for user generated translation |
| US8843360B1 (en) * | 2011-03-04 | 2014-09-23 | Amazon Technologies, Inc. | Client-side localization of network pages |
| CN108280219A (en) * | 2018-02-07 | 2018-07-13 | 深圳壹账通智能科技有限公司 | Text interpretation method, device, computer equipment and storage medium |
| CN111563389A (en) * | 2020-04-20 | 2020-08-21 | 富途网络科技(深圳)有限公司 | Translation method and device for user original content |
| CN113723119A (en) * | 2021-08-26 | 2021-11-30 | 腾讯科技（深圳）有限公司 | Page translation method and device, storage medium and electronic equipment |
-
2024
- 2024-10-18 CN CN202411462088.9A patent/CN119311272A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110077935A1 (en) * | 2009-09-25 | 2011-03-31 | Yahoo! Inc. | Apparatus and methods for user generated translation |
| US8843360B1 (en) * | 2011-03-04 | 2014-09-23 | Amazon Technologies, Inc. | Client-side localization of network pages |
| CN108280219A (en) * | 2018-02-07 | 2018-07-13 | 深圳壹账通智能科技有限公司 | Text interpretation method, device, computer equipment and storage medium |
| CN111563389A (en) * | 2020-04-20 | 2020-08-21 | 富途网络科技(深圳)有限公司 | Translation method and device for user original content |
| CN113723119A (en) * | 2021-08-26 | 2021-11-30 | 腾讯科技（深圳）有限公司 | Page translation method and device, storage medium and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 科技BOOM: "超好用的翻译工具：多引擎、多语言、完全免费", pages 1 - 9, Retrieved from the Internet <URL:《https://zhuanlan.zhihu.com/p/415487982》> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10055113B2 (en) | System and method for modifying user interface elements | |
| US9652441B2 (en) | System and method for creation of templates | |
| CN101615122B (en) | Method and system for providing information related to elements of a user interface by an access system | |
| US8843360B1 (en) | Client-side localization of network pages | |
| US20060206827A1 (en) | Live graphical user interface builder | |
| US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
| US20140047409A1 (en) | Enterprise application development tool | |
| CA2684822A1 (en) | Data transformation based on a technical design document | |
| US20170031877A1 (en) | Web Page Design System | |
| CN111427577A (en) | Code processing method and device and server | |
| US10417317B2 (en) | Web page profiler | |
| JP2017504129A (en) | Construction of a state expression represented in a web browser | |
| CN112732254A (en) | Webpage development method and device, computer equipment and storage medium | |
| US20110035433A1 (en) | Webpage display method, computer system, and program | |
| CN117389538A (en) | Page component content development method, device, equipment and storage medium | |
| US10742764B2 (en) | Web page generation system | |
| CN107710190B (en) | Rendering content using decoupled rendering resources | |
| JP2007122724A (en) | Device for storing vector image together with embedded image style identifier, and method and utility for formatting device image by using image style attribute | |
| US10324600B2 (en) | Web page generation system | |
| US12399689B2 (en) | Configuration file editor with intelligent code-based interface and visual interface | |
| CN119311272A (en) | Web page interface development internationalization method, device, equipment, storage medium and program product | |
| US11741295B2 (en) | Independent rendering engine for a user interface internationalization | |
| KR102228241B1 (en) | Method and system for virtual input on the web | |
| CN115421770A (en) | Resource information processing method and device, storage medium and electronic equipment | |
| CN113868565A (en) | Skin style file editing method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |