{"id":14232,"date":"2024-06-17T14:37:26","date_gmt":"2024-06-17T06:37:26","guid":{"rendered":"https:\/\/www.yangmingpeng1009.com\/?page_id=14232"},"modified":"2024-06-17T14:37:31","modified_gmt":"2024-06-17T06:37:31","slug":"index9","status":"publish","type":"page","link":"https:\/\/www.yangmingpeng1009.com\/ja\/index9","title":{"rendered":"\u6c11\u570b\u8af8\u4f4d\u7434\u5bb6\u9304\u97f3"},"content":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <style>\r\n        .translate_container {\r\n            position: fixed;\r\n\r\n            z-index: 1000;\r\n            cursor: move;\r\n            padding: 2px;\r\n            background-color: white;\r\n            border: 1px solid #ccc;\r\n            border-radius: 5px;\r\n\r\n            display: inline-block;\r\n\r\n        }\r\n\r\n        .translate_container.top_right {\r\n            top: 10px;\r\n            right: 10px;\r\n        }\r\n\r\n        .translate_container .dropdown-toggle {\r\n            width: auto;\r\n        }\r\n\r\n        .dropdown-menu {\r\n            min-width: 0;\r\n        }\r\n\r\n        .dropdown-item {\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        #languageSelect {\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            padding: 8px 30px 8px 10px;\r\n            border: none;\r\n            background-color: #fff;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .select-arrow {\r\n            position: absolute;\r\n            top: 50%;\r\n            right: 10px;\r\n            transform: translateY(-50%);\r\n            pointer-events: none;\r\n            border-style: solid;\r\n            border-width: 5px 5px 0 5px;\r\n            border-color: #000 transparent transparent transparent;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n    <div class=\"translate_container top_right\">\r\n        <select id=\"languageSelect\">\r\n            <option value=\"zh-CN\">\u7b80\u4f53\u4e2d\u6587<\/option>\r\n            <option value=\"en\">English<\/option>\r\n            <option value=\"ja\">\u65e5\u672c\u8a9e<\/option>\r\n        <\/select>\r\n        <div class=\"select-arrow\"><\/div>\r\n    <\/div>\r\n\r\n\r\n    <script type=\"text\/javascript\">\r\n        let translationsMap = new Map();\r\n\r\n        function processTextNodes(node) {\r\n            if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {\r\n                translationsMap.set(node, { 'zh-CN': node.nodeValue });\r\n            } else if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== 'SCRIPT' && node.nodeName !== 'STYLE' && !node.classList.contains('translate_container')) {\r\n                for (let child of node.childNodes) {\r\n                    processTextNodes(child);\r\n                }\r\n            }\r\n        }\r\n\r\n        function translatePage(targetLanguage) {\r\n\r\n            if (translationsMap.size === 0) {\r\n                processTextNodes(document.body);\r\n            }\r\n\r\n            translationsMap.forEach((translations, node) => {\r\n\r\n                const text = translations['zh-CN'];\r\n                if (!text) {\r\n                    return;\r\n                }\r\n\r\n                if (translations[targetLanguage]) {\r\n                    node.nodeValue = translations[targetLanguage];\r\n                } else {\r\n                    fetch(`\/translate?client=gtx&sl=auto&tl=${targetLanguage}&dt=t&q=${encodeURIComponent(text)}`)\r\n                        .then(response => response.json())\r\n                        .then(ret => {\r\n                            if (ret.translated_text) {\r\n                                const translatedText = ret.translated_text;\r\n                                node.nodeValue = translatedText;\r\n                                translations[targetLanguage] = translatedText;\r\n                            }\r\n                        })\r\n                        .catch(error => console.error('Error:', error));\r\n                }\r\n\r\n\r\n            });\r\n        }\r\n\r\n        document.getElementById('languageSelect').addEventListener('change', function () {\r\n            translatePage(this.value);\r\n        });\r\n\r\n        document.getElementById('languageSelect').addEventListener('click', function () {\r\n            const dropdown = this.nextElementSibling;\r\n            if (dropdown && dropdown.classList.contains('dropdown-menu')) {\r\n                dropdown.classList.toggle('show');\r\n            }\r\n        });\r\n\r\n        document.addEventListener('click', function (event) {\r\n            const dropdowns = document.querySelectorAll('.dropdown-menu');\r\n            dropdowns.forEach(dropdown => {\r\n                if (!dropdown.parentElement.contains(event.target)) {\r\n                    dropdown.classList.remove('show');\r\n                }\r\n            });\r\n        });\r\n\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            const draggable = document.querySelector('.translate_container');\r\n            let isDragging = false;\r\n            let offset = { x: 0, y: 0 };\r\n\r\n            draggable.addEventListener('mousedown', function (e) {\r\n                isDragging = true;\r\n                offset = {\r\n                    x: draggable.offsetLeft - e.clientX,\r\n                    y: draggable.offsetTop - e.clientY\r\n                };\r\n            });\r\n\r\n            document.addEventListener('mouseup', function () {\r\n                isDragging = false;\r\n            });\r\n\r\n            document.addEventListener('mousemove', function (e) {\r\n                if (isDragging) {\r\n                    if (draggable.classList.contains('top_right')) {\r\n                        draggable.classList.remove('top_right');\r\n                    }\r\n                    draggable.style.left = (e.clientX + offset.x) + 'px';\r\n                    draggable.style.right = null;\r\n                    draggable.style.top = (e.clientY + offset.y) + 'px';\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u7b80\u4f53\u4e2d\u6587English\u65e5\u672c\u8a9e<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14232","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/pages\/14232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/comments?post=14232"}],"version-history":[{"count":2,"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/pages\/14232\/revisions"}],"predecessor-version":[{"id":14770,"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/pages\/14232\/revisions\/14770"}],"wp:attachment":[{"href":"https:\/\/www.yangmingpeng1009.com\/ja\/wp-json\/wp\/v2\/media?parent=14232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}