{"id":9,"date":"2025-04-07T09:52:11","date_gmt":"2025-04-07T01:52:11","guid":{"rendered":"https:\/\/resource.moshui.link\/word\/?page_id=9"},"modified":"2025-06-09T18:42:09","modified_gmt":"2025-06-09T10:42:09","slug":"1-2","status":"publish","type":"page","link":"https:\/\/resource.moshui.link\/word\/1-2\/","title":{"rendered":"\u67e5\u8a62\u8a5e\u7fa9"},"content":{"rendered":"\n<div class=\"bilingual-dictionary\">\n    <h3>\u55ae\u8a5e\u67e5\u8a62<\/h3>\n    <div class=\"search-box\">\n        <input type=\"text\" id=\"word-input\" placeholder=\"\u8f38\u5165\u55ae\u8a5e...\">\n        <button id=\"search-btn\">\u67e5\u67e5\u4f60\u7684<\/button>\n        <label class=\"translation-toggle\">\n            <input type=\"checkbox\" id=\"translate-toggle\" checked>\u986f\u793a\u4e2d\u6587\u7ffb\u8b6f\n        <\/label>\n    <\/div>\n    \n    <div id=\"dictionary-results\">\n        <div class=\"initial-message\">\n            <p>\u67e5\u8a62\u7d50\u679c<\/p >\n            <p>\u652f\u6301\u4e2d\u6587\u7ffb\u8b6f<\/p >\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n.bilingual-dictionary {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    max-width: 800px;\n    margin: 30px auto;\n    padding: 25px;\n    background: #ffffff;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.bilingual-dictionary h3 {\n    color: #2c3e50;\n    margin-top: 0;\n    padding-bottom: 15px;\n    border-bottom: 1px solid #ecf0f1;\n    font-size: 24px;\n}\n\n.search-box {\n    display: flex;\n    gap: 10px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n    align-items: center;\n}\n\n#word-input {\n    flex: 1;\n    min-width: 200px;\n    padding: 12px 15px;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    font-size: 16px;\n    transition: border 0.3s;\n}\n\n#word-input:focus {\n    border-color: #3498db;\n    outline: none;\n}\n\n#search-btn {\n    padding: 12px 25px;\n    background: #3498db;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    transition: background 0.3s;\n}\n\n#search-btn:hover {\n    background: #2980b9;\n}\n\n.translation-toggle {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: #7f8c8d;\n    cursor: pointer;\n}\n\n#translate-toggle {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n}\n\n#dictionary-results {\n    min-height: 200px;\n    padding: 15px;\n    border-radius: 8px;\n    background: #f9f9f9;\n}\n\n.initial-message {\n    text-align: center;\n    color: #95a5a6;\n    padding: 30px 0;\n}\n\n\/* \u8bcd\u5178\u7ed3\u679c\u6837\u5f0f *\/\n.word-header {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: 15px;\n    margin-bottom: 10px;\n}\n\n.word-title {\n    font-size: 28px;\n    color: #2c3e50;\n    margin: 0;\n}\n\n.phonetic {\n    color: #7f8c8d;\n    font-style: italic;\n}\n\n.audio-player {\n    margin-left: auto;\n}\n\n.part-of-speech {\n    font-weight: bold;\n    color: #e74c3c;\n    margin: 25px 0 10px 0;\n    padding-bottom: 5px;\n    border-bottom: 1px dashed #ddd;\n    font-size: 18px;\n}\n\n.definition-item {\n    margin-bottom: 15px;\n    padding-left: 20px;\n    position: relative;\n}\n\n.definition-item:before {\n    content: \"\u2022\";\n    position: absolute;\n    left: 0;\n    color: #3498db;\n    font-weight: bold;\n}\n\n.definition-text {\n    margin-bottom: 5px;\n    line-height: 1.6;\n}\n\n.example-text {\n    color: #16a085;\n    font-style: italic;\n    margin-left: 15px;\n    padding-left: 10px;\n    border-left: 2px solid #ecf0f1;\n}\n\n.translation-text {\n    color: #8e44ad;\n    background: #f5eef8;\n    padding: 2px 5px;\n    border-radius: 3px;\n    margin-left: 5px;\n}\n\n.synonyms-antonyms {\n    display: flex;\n    gap: 20px;\n    margin-top: 10px;\n    font-size: 14px;\n}\n\n.synonyms, .antonyms {\n    padding: 5px 10px;\n    background: #f0f0f0;\n    border-radius: 4px;\n}\n\n.synonyms span, .antonyms span {\n    font-weight: bold;\n}\n\n.synonyms span {\n    color: #27ae60;\n}\n\n.antonyms span {\n    color: #c0392b;\n}\n\n.loading-spinner {\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #3498db;\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    animation: spin 1s linear infinite;\n    margin: 50px auto;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n.error-message {\n    color: #e74c3c;\n    text-align: center;\n    padding: 30px;\n}\n\n@media (max-width: 600px) {\n    .bilingual-dictionary {\n        padding: 15px;\n    }\n    \n    .word-header {\n        flex-direction: column;\n        gap: 5px;\n    }\n    \n    .audio-player {\n        margin-left: 0;\n        width: 100%;\n    }\n}\n<\/style>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const searchBtn = document.getElementById('search-btn');\n    const wordInput = document.getElementById('word-input');\n    const resultsDiv = document.getElementById('dictionary-results');\n    const translateToggle = document.getElementById('translate-toggle');\n    \n    \/\/ \u5b58\u50a8\u7ffb\u8bd1\u7ed3\u679c\u7f13\u5b58\n    const translationCache = {};\n    \n    \/\/ \u67e5\u8be2\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n    searchBtn.addEventListener('click', searchWord);\n    \n    \/\/ \u8f93\u5165\u6846\u56de\u8f66\u4e8b\u4ef6\n    wordInput.addEventListener('keypress', function(e) {\n        if (e.key === 'Enter') searchWord();\n    });\n    \n    \/\/ \u67e5\u8be2\u5355\u8bcd\u51fd\u6570\n    async function searchWord() {\n        const word = wordInput.value.trim();\n        if (!word) {\n            showError('\u8acb\u8f38\u5165\u8981\u67e5\u8a62\u7684\u55ae\u8a5e');\n            return;\n        }\n        \n        \/\/ \u663e\u793a\u52a0\u8f7d\u72b6\u6001\n        resultsDiv.innerHTML = '<div class=\"loading-spinner\"><\/div>';\n        \n        try {\n            \/\/ 1. \u67e5\u8be2\u8bcd\u5178API\n            const dictData = await fetchDictionary(word);\n            \n            \/\/ 2. \u663e\u793a\u57fa\u7840\u7ed3\u679c\n            displayResults(dictData);\n            \n            \/\/ 3. \u5982\u679c\u9700\u8981\u7ffb\u8bd1\uff0c\u83b7\u53d6\u4e2d\u6587\u7ffb\u8bd1\n            if (translateToggle.checked) {\n                await translateDefinitions(dictData);\n            }\n        } catch (error) {\n            showError(error.message);\n        }\n    }\n    \n    \/\/ \u83b7\u53d6\u8bcd\u5178\u6570\u636e\n    async function fetchDictionary(word) {\n        const response = await fetch(`https:\/\/api.dictionaryapi.dev\/api\/v2\/entries\/en\/${encodeURIComponent(word)}`);\n        \n        if (!response.ok) {\n            if (response.status === 404) {\n                throw new Error('\u672a\u627e\u5230\u8a72\u55ae\u8a5e\uff0c\u8acb\u6aa2\u67e5\u62fc\u5beb');\n            } else {\n                throw new Error('\u8fad\u5178\u670d\u52d9\u66ab\u4e0d\u53ef\u7528');\n            }\n        }\n        \n        const data = await response.json();\n        return data[0]; \/\/ \u53d6\u7b2c\u4e00\u4e2a\u7ed3\u679c\n    }\n    \n    \/\/ \u663e\u793a\u8bcd\u5178\u7ed3\u679c\n    function displayResults(data) {\n        let html = `\n            <div class=\"word-header\">\n                <h4 class=\"word-title\">${data.word}<\/h4>\n                ${data.phonetic ? `<span class=\"phonetic\">\/${data.phonetic}\/<\/span>` : ''}\n        `;\n        \n        \/\/ \u6dfb\u52a0\u53d1\u97f3\u6309\u94ae\n        const audio = data.phonetics?.find(p => p.audio)?.audio;\n        if (audio) {\n            html += `\n                <div class=\"audio-player\">\n                    <audio controls src=\"${audio}\">\n                        \u60a8\u7684\u700f\u89bd\u5668\u4e0d\u652f\u6301\u97f3\u983b\u5143\u7d20\n                    <\/audio>\n                <\/div>\n            `;\n        }\n        \n        html += `<\/div>`;\n        \n        \/\/ \u6dfb\u52a0\u6bcf\u4e2a\u8bcd\u6027\u7684\u91ca\u4e49\n        data.meanings.forEach(meaning => {\n            html += `\n                <div class=\"part-of-speech\">${meaning.partOfSpeech}<\/div>\n            `;\n            \n            \/\/ \u6dfb\u52a0\u6bcf\u4e2a\u5b9a\u4e49\n            meaning.definitions.forEach((def, idx) => {\n                html += `\n                    <div class=\"definition-item\">\n                        <div class=\"definition-text\">\n                            <strong>${idx + 1}.<\/strong> ${def.definition}\n                            <span class=\"translation-placeholder\" data-text=\"${def.definition}\"><\/span>\n                        <\/div>\n                        ${def.example ? `<div class=\"example-text\">\"${def.example}\"<\/div>` : ''}\n                    <\/div>\n                `;\n            });\n            \n            \/\/ \u6dfb\u52a0\u540c\u4e49\u8bcd\u548c\u53cd\u4e49\u8bcd\n            if (meaning.synonyms.length || meaning.antonyms.length) {\n                html += `<div class=\"synonyms-antonyms\">`;\n                if (meaning.synonyms.length) {\n                    html += `\n                        <div class=\"synonyms\">\n                            <span>\u540c\u7fa9\u8a5e:<\/span> ${meaning.synonyms.slice(0, 5).join(', ')}\n                        <\/div>\n                    `;\n                }\n                if (meaning.antonyms.length) {\n                    html += `\n                        <div class=\"antonyms\">\n                            <span>\u53cd\u7fa9\u8a5e:<\/span> ${meaning.antonyms.slice(0, 5).join(', ')}\n                        <\/div>\n                    `;\n                }\n                html += `<\/div>`;\n            }\n        });\n        \n        \/\/ \u6dfb\u52a0\u6570\u636e\u6765\u6e90\n        html += `\n            <div style=\"margin-top: 30px; font-size: 12px; color: #95a5a6; text-align: center;\">\n                \u8fad\u5178\u6578\u64da\u4f86\u6e90: Free Dictionary API\n            <\/div>\n        `;\n        \n        resultsDiv.innerHTML = html;\n    }\n    \n    \/\/ \u7ffb\u8bd1\u5b9a\u4e49\u5185\u5bb9\n    async function translateDefinitions(dictData) {\n        const translationPromises = [];\n        const translationElements = [];\n        \n        \/\/ \u6536\u96c6\u6240\u6709\u9700\u8981\u7ffb\u8bd1\u7684\u6587\u672c\n        document.querySelectorAll('.translation-placeholder').forEach(el => {\n            const text = el.getAttribute('data-text');\n            translationElements.push(el);\n            translationPromises.push(getTranslation(text));\n        });\n        \n        \/\/ \u6267\u884c\u6240\u6709\u7ffb\u8bd1\n        try {\n            const translations = await Promise.all(translationPromises);\n            \n            \/\/ \u5c06\u7ffb\u8bd1\u7ed3\u679c\u63d2\u5165\u5230\u9875\u9762\n            translations.forEach((translation, index) => {\n                if (translation) {\n                    translationElements[index].innerHTML = `\n                        <span class=\"translation-text\">${translation}<\/span>\n                    `;\n                }\n            });\n        } catch (error) {\n            console.error('\u7ffb\u8b6f\u932f\u8aa4:', error);\n            \/\/ \u4e0d\u5f71\u54cd\u4e3b\u8981\u529f\u80fd\uff0c\u53ea\u662f\u4e0d\u663e\u793a\u7ffb\u8bd1\n        }\n    }\n    \n    \/\/ \u83b7\u53d6\u4e2d\u6587\u7ffb\u8bd1\uff08\u4f7f\u7528\u514d\u8d39\u7ffb\u8bd1API\uff09\n    async function getTranslation(text) {\n        \/\/ \u68c0\u67e5\u7f13\u5b58\n        if (translationCache[text]) {\n            return translationCache[text];\n        }\n        \n        try {\n            \/\/ \u4f7f\u7528\u514d\u8d39\u7ffb\u8bd1API - \u8fd9\u91cc\u4f7f\u7528MyMemory API\n            const response = await fetch(\n                `https:\/\/api.mymemory.translated.net\/get?q=${encodeURIComponent(text)}&langpair=en|zh-TW`\n            );\n            \n            const data = await response.json();\n            \n            if (data.responseData && data.responseData.translatedText) {\n                \/\/ \u7f13\u5b58\u7ed3\u679c\n                translationCache[text] = data.responseData.translatedText;\n                return data.responseData.translatedText;\n            }\n        } catch (error) {\n            console.error('\u7ffb\u8b6fapi\u932f\u8aa4:', error);\n        }\n        \n        return null;\n    }\n    \n    \/\/ \u663e\u793a\u9519\u8bef\u4fe1\u606f\n    function showError(message) {\n        resultsDiv.innerHTML = `\n            <div class=\"error-message\">\n                <p>${message}<\/p >\n                <p>\u8acb\u5617\u8a66\u5176\u4ed6\u55ae\u8a5e\u6216\u7a0d\u5f8c\u518d\u8a66<\/p >\n            <\/div>\n        `;\n    }\n    \n    \/\/ \u5207\u6362\u7ffb\u8bd1\u663e\u793a\n    translateToggle.addEventListener('change', function() {\n        const word = wordInput.value.trim();\n        if (word && resultsDiv.querySelector('.word-title')) {\n            if (this.checked) {\n                searchWord(); \/\/ \u91cd\u65b0\u67e5\u8be2\u4ee5\u83b7\u53d6\u7ffb\u8bd1\n            } else {\n                \/\/ \u9690\u85cf\u7ffb\u8bd1\n                document.querySelectorAll('.translation-text').forEach(el => {\n                    el.remove();\n                });\n            }\n        }\n    });\n});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fad\u5178\u6578\u64da\u4f86\u6e90\uff1a<a href=\"https:\/\/github.com\/meetDeveloper\/freeDictionaryAPI?tab=readme-ov-file\">Free Dictionary API<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7ffb\u8b6f\u6578\u64da\u4f86\u6e90\uff1a<a href=\"https:\/\/mymemory.translated.net\/zh\/\">My Memory API<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u55ae\u8a5e\u67e5\u8a62 \u67e5\u67e5\u4f60\u7684 \u986f\u793a\u4e2d\u6587\u7ffb\u8b6f \u67e5\u8a62\u7d50\u679c \u652f\u6301\u4e2d\u6587\u7ffb\u8b6f \u8fad\u5178\u6578\u64da\u4f86\u6e90\uff1aFree Dictionary API&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":14,"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/pages\/9\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/resource.moshui.link\/word\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}