\u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6<\/title>\n <style>\n :root {\n --primary-color: #1a1a2e;\n --secondary-color: #16213e;\n --accent-color: #0f3460;\n --highlight-color: #e94560;\n --text-color: #f1f1f1;\n --card-bg: rgba(255, 255, 255, 0.1);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--text-color);\n min-height: 100vh;\n padding-bottom: 50px;\n }\n \n header {\n text-align: center;\n padding: 40px 20px;\n position: relative;\n overflow: hidden;\n }\n \n header::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n \n h1 {\n font-size: 3rem;\n margin-bottom: 10px;\n background-clip: text;\n color:#e94560;\n text-shadow: 0 0 20px rgba(108, 92, 231, 0.3);\n letter-spacing: 2px;\n margin-left: -150px;\n }\n \n .subtitle {\n font-size: 1.2rem;\n opacity: 0.8;\n margin-bottom: 30px;\n margin-left: -150px;\n }\n \n .search-container {\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n margin-left: 50px;\n }\n \n #searchInput {\n width: 100%;\n padding: 15px 20px;\n border: none;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text-color);\n font-size: 1.1rem;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n \n #searchInput:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);\n }\n \n #searchInput::placeholder {\n color: rgba(255, 255, 255, 0.6);\n }\n \n .alphabet-nav {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin: 30px 0;\n padding: 0 20px;\n }\n \n .alphabet-nav button {\n background: transparent;\n border: none;\n color: var(--text-color);\n font-size: 1.2rem;\n margin: 5px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 5px;\n transition: all 0.3s ease;\n }\n \n .alphabet-nav button:hover {\n background: rgba(233, 69, 96, 0.3);\n }\n \n .alphabet-nav button.active {\n background: var(--highlight-color);\n color: var(--primary-color);\n font-weight: bold;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n .cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 20px;\n margin-top: 30px;\n max-width: 800px;\n }\n \n .card {\n background: var(--card-bg);\n border-radius: 15px;\n overflow: hidden;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);\n border-color: var(--highlight-color);\n }\n \n .card-header {\n padding: 15px;\n background: rgba(0, 0, 0, 0.2);\n text-align: center;\n }\n \n .card-title {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 5px;\n }\n \n .card-subtitle {\n font-size: 0.9rem;\n opacity: 0.7;\n }\n \n .card-content {\n padding: 15px;\n }\n \n .card-content p {\n margin-bottom: 10px;\n font-size: 0.9rem;\n line-height: 1.4;\n text-align: center;\n }\n \n .card-link {\n display: block;\n background: var(--accent-color);\n color: var(--text-color);\n text-align: center;\n padding: 10px;\n border-radius: 5px;\n text-decoration: none;\n margin-top: 10px;\n transition: all 0.3s ease;\n font-weight: bold;\n }\n \n .card-link:hover {\n background: var(--highlight-color);\n transform: scale(1.05);\n }\n \n .no-results {\n text-align: center;\n padding: 40px;\n font-size: 1.2rem;\n grid-column: 1 \/ -1;\n }\n \n @media (max-width: 768px) {\n .cards-container {\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n }\n \n h1 {\n font-size: 2.2rem;\n }\n \n .alphabet-nav button {\n font-size: 1rem;\n padding: 6px 10px;\n }\n }\n \n @media (max-width: 480px) {\n .cards-container {\n grid-template-columns: repeat(2, 1fr);\n }\n \n h1 {\n font-size: 1.8rem;\n }\n }\n \n .pulse {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(233, 69, 96, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <h1>\u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6<\/h1>\n <div class=\"subtitle\">\u63a2\u7d22\u6b27\u7f8e\u5404\u56fd\u7684\u97f3\u4e50\u73cd\u85cf<\/div>\n <div class=\"search-container\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u6b4c\u624b\u6216\u4e50\u961f\u540d\u79f0...\">\n <\/div>\n <\/header>\n \n <div class=\"alphabet-nav\" id=\"alphabetNav\">\n \n <\/div>\n \n <div class=\"container\">\n <div class=\"cards-container\" id=\"cardsContainer\">\n \n <\/div>\n <\/div>\n\n <script>\n \/\/ \u6570\u636e - \u6b4c\u624b\u548c\u4e13\u8f91\u4fe1\u606f\n const artistsData = [\n {\n name: \"Backstreet Boys\",\n chineseName: \"\",\n description: \"\u540e\u8857\u7537\u5b69\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/09\/19\/%e5%90%8e%e8%a1%97%e7%94%b7%e5%ad%a91995-2019%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Linkin Park\",\n chineseName: \"\",\n description: \"\u6797\u80af\u516c\u56ed\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/19\/linkin-park%e6%9e%97%e8%82%af%e5%85%ac%e5%9b%ad1997-2020%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Westlife\",\n chineseName: \"\",\n description: \"\u897f\u57ce\u7537\u5b69\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/26\/westlife%e8%a5%bf%e5%9f%8e%e7%94%b7%e5%ad%a91999-2019%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Queen\",\n chineseName: \"\",\n description: \"\u7687\u540e\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/10\/27\/queen%e7%9a%87%e5%90%8e%e4%b9%90%e9%98%9f1973-1995%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e5%85%a8%e9%83%a8%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%89%93%e5%8c%85sacd37-3g%e7%99%be%e5%ba%a6%e4%ba%91\/\"\n },\n {\n name: \"OneRepublic\",\n chineseName: \"\",\n description: \"\u5171\u548c\u65f6\u4ee3\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/04\/09\/onerepublic%e5%85%b1%e5%92%8c%e6%97%b6%e4%bb%a3%e4%b9%90%e9%98%9f%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-3-56gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98\/\"\n },\n {\n name: \"Coldplay\",\n chineseName: \"\",\n description: \"\u9177\u73a9\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/10\/13\/%e9%85%b7%e7%8e%a9%e4%b9%90%e9%98%9f%ef%bc%88coldplay%ef%bc%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-14-46gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98\/\"\n },\n {\n name: \"Imagine Dragons\",\n chineseName: \"\",\n description: \"\u68a6\u9f99\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/05\/imagine-dragons2008-2021%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-6-5gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"98\u5ea6\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/02\/98%e5%ba%a61997-2017%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Sum41\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/03\/15\/sum41%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-3-46gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Travis\",\n chineseName: \"\",\n description: \"\u7279\u62c9\u7ef4\u65af\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/03\/15\/travis%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-6-37gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"King Crimson\",\n chineseName: \"\",\n description: \"\u514b\u91cc\u59c6\u68ee\u56fd\u738b\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/05\/16\/king-crimson%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-37-16gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Gotthard\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/05\/07\/gotthard%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-11-67gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"ABBA\u4e50\u961f\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/05\/26\/abba%e4%b9%90%e9%98%9f%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-3-74gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Keane\",\n chineseName: \"\",\n description: \"\u57fa\u97f3\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/07\/keane%e5%9f%ba%e9%9f%b3%e4%b9%90%e9%98%9f%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-16-96gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Kings of Leon\",\n chineseName: \"\",\n description: \"\u83b1\u6602\u56fd\u738b\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/07\/kings-of-leon%e8%8e%b1%e6%98%82%e5%9b%bd%e7%8e%8b%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-4-45gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Boyzone\",\n chineseName: \"\",\n description: \"\u7537\u5b69\u5730\u5e26\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/07\/boyzone%e7%94%b7%e5%ad%a9%e5%9c%b0%e5%b8%a6%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fwav-2-83gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"The killer\",\n chineseName: \"\",\n description: \"\u6740\u624b\u4e50\u56e2\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/20\/the-killer%e6%9d%80%e6%89%8b%e4%b9%90%e5%9b%a2%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-15-48gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"twenty one pilots\",\n chineseName: \"\",\n description: \"\u4e8c\u5341\u4e00\u540d\u98de\u884c\u5458\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2025\/12\/01\/%e4%ba%8c%e5%8d%81%e4%b8%80%e5%90%8d%e9%a3%9e%e8%a1%8c%e5%91%98twenty-one-pilots%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-4-61gb%e7%99%be%e5%ba%a6%e4%ba%91\/\"\n },\n {\n name: \"Nightwish\",\n chineseName: \"\",\n description: \"\u591c\u613f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2025\/12\/02\/%e5%a4%9c%e6%84%bfnightwish%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-5-87gb%e7%99%be%e5%ba%a6%e4%ba%91%e5%a4%b8%e5%85%8b%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Eagles\",\n chineseName: \"\",\n description: \"\u8001\u9e70\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/09\/%e8%80%81%e9%b9%b0%e4%b9%90%e9%98%9f-eagles%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e5%85%a8%e9%83%a8%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%89%93%e5%8c%85%e6%97%a0%e6%8d%9fflac%e6%a0%bc%e5%bc%8f24bit\/\"\n },\n {\n name: \"The Beatles\",\n chineseName: \"\",\n description: \"\u7532\u58f3\u866b\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/11\/%e7%94%b2%e5%a3%b3%e8%99%ab%e4%b9%90%e9%98%9f-the-beatles%e9%9f%b3%e4%b9%90%e4%b8%93%e8%be%91%e6%97%a0%e6%8d%9f%e9%9f%b3%e8%b4%a8%e5%90%88%e9%9b%86sacd\/\"\n },\n {\n name: \"The Rolling Stones\",\n chineseName: \"\",\n description: \"\u6eda\u77f3\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/14\/%e6%bb%9a%e7%9f%b3%e4%b9%90%e9%98%9f-the-rolling-stones%e9%9f%b3%e4%b9%90%e4%b8%93%e8%be%91%e6%97%a0%e6%8d%9f%e9%9f%b3%e8%b4%a8%e5%90%88%e9%9b%86sacd\/\"\n },\n {\n name: \"Thin Lizzy\",\n chineseName: \"\",\n description: \"\u7626\u674e\u5947\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2025\/02\/09\/%e7%98%a6%e6%9d%8e%e5%a5%87thin-lizzy%e9%ab%98%e5%93%81%e8%b4%a8%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-21-97gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n }\n ];\n\n \/\/ \u83b7\u53d6\u59d3\u6c0f\u9996\u5b57\u6bcd\n function getLastNameInitial(name) {\n \/\/ \u5904\u7406\u7279\u6b8a\u60c5\u51b5\n if (name.startsWith(\"The \")) {\n name = name.substring(4);\n }\n \n const words = name.split(' ');\n const lastName = words[words.length - 1];\n return lastName.charAt(0).toUpperCase();\n }\n\n \/\/ \u6309\u59d3\u6c0f\u9996\u5b57\u6bcd\u6392\u5e8f\n artistsData.sort((a, b) => {\n const initialA = getLastNameInitial(a.name);\n const initialB = getLastNameInitial(b.name);\n return initialA.localeCompare(initialB);\n });\n\n \/\/ \u751f\u6210\u5b57\u6bcd\u5bfc\u822a\n function generateAlphabetNav() {\n const alphabetNav = document.getElementById('alphabetNav');\n const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n \n \/\/ \u6dfb\u52a0\"\u5168\u90e8\"\u6309\u94ae\n const allButton = document.createElement('button');\n allButton.textContent = '\u5168\u90e8';\n allButton.classList.add('active');\n allButton.addEventListener('click', () => {\n filterByLetter('\u5168\u90e8');\n setActiveButton(allButton);\n });\n alphabetNav.appendChild(allButton);\n \n \/\/ \u6dfb\u52a0\u5b57\u6bcd\u6309\u94ae\n for (let letter of alphabet) {\n const button = document.createElement('button');\n button.textContent = letter;\n button.addEventListener('click', () => {\n filterByLetter(letter);\n setActiveButton(button);\n });\n alphabetNav.appendChild(button);\n }\n }\n\n \/\/ \u8bbe\u7f6e\u6d3b\u52a8\u6309\u94ae\n function setActiveButton(activeButton) {\n const buttons = document.querySelectorAll('.alphabet-nav button');\n buttons.forEach(button => button.classList.remove('active'));\n activeButton.classList.add('active');\n }\n\n \/\/ \u6309\u5b57\u6bcd\u7b5b\u9009\n function filterByLetter(letter) {\n const cards = document.querySelectorAll('.card');\n \n cards.forEach(card => {\n if (letter === '\u5168\u90e8') {\n card.style.display = 'block';\n } else {\n const cardInitial = card.dataset.initial;\n card.style.display = cardInitial === letter ? 'block' : 'none';\n }\n });\n }\n\n \/\/ \u751f\u6210\u5361\u7247\n function generateCards() {\n const cardsContainer = document.getElementById('cardsContainer');\n \n artistsData.forEach(artist => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.initial = getLastNameInitial(artist.name);\n \n const cardHeader = document.createElement('div');\n cardHeader.className = 'card-header';\n \n const cardTitle = document.createElement('div');\n cardTitle.className = 'card-title';\n cardTitle.textContent = artist.name;\n \n const cardSubtitle = document.createElement('div');\n cardSubtitle.className = 'card-subtitle';\n cardSubtitle.textContent = artist.chineseName;\n \n cardHeader.appendChild(cardTitle);\n cardHeader.appendChild(cardSubtitle);\n \n const cardContent = document.createElement('div');\n cardContent.className = 'card-content';\n \n const description = document.createElement('p');\n description.textContent = artist.description;\n \n const link = document.createElement('a');\n link.className = 'card-link';\n link.href = artist.link;\n link.target = '_blank';\n link.textContent = '\u8bbf\u95ee\u8d44\u6e90';\n \n cardContent.appendChild(description);\n cardContent.appendChild(link);\n \n card.appendChild(cardHeader);\n card.appendChild(cardContent);\n \n cardsContainer.appendChild(card);\n });\n }\n\n \/\/ \u641c\u7d22\u529f\u80fd\n function setupSearch() {\n const searchInput = document.getElementById('searchInput');\n \n searchInput.addEventListener('input', function() {\n const searchTerm = this.value.toLowerCase();\n const cards = document.querySelectorAll('.card');\n \n cards.forEach(card => {\n const title = card.querySelector('.card-title').textContent.toLowerCase();\n const subtitle = card.querySelector('.card-subtitle').textContent.toLowerCase();\n const description = card.querySelector('p').textContent.toLowerCase();\n \n if (title.includes(searchTerm) || subtitle.includes(searchTerm) || description.includes(searchTerm)) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n });\n });\n }\n\n \/\/ \u521d\u59cb\u5316\n document.addEventListener('DOMContentLoaded', function() {\n generateAlphabetNav();\n generateCards();\n setupSearch();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6 \u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6 \u63a2\u7d22\u6b27\u7f8e\u5404\u56fd\u7684\u97f3\u4e50\u73cd\u85cf<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/13963"}],"collection":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/comments?post=13963"}],"version-history":[{"count":3,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/13963\/revisions"}],"predecessor-version":[{"id":14002,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/13963\/revisions\/14002"}],"wp:attachment":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/media?parent=13963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13963,"date":"2026-01-05T11:53:44","date_gmt":"2026-01-05T03:53:44","guid":{"rendered":"https:\/\/www.guaniumusic.com\/?page_id=13963"},"modified":"2026-01-05T17:39:44","modified_gmt":"2026-01-05T09:39:44","slug":"%e6%ac%a7%e7%be%8e%e7%bb%84%e5%90%88%e5%94%b1%e7%89%87%e9%9b%86","status":"publish","type":"page","link":"https:\/\/www.guaniumusic.com\/index.php\/%e6%ac%a7%e7%be%8e%e7%bb%84%e5%90%88%e5%94%b1%e7%89%87%e9%9b%86\/","title":{"rendered":"\u6b27\u7f8e\u7ec4\u5408\u5531\u7247\u96c6"},"content":{"rendered":"\n\n\n\n \n \n \u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6<\/title>\n <style>\n :root {\n --primary-color: #1a1a2e;\n --secondary-color: #16213e;\n --accent-color: #0f3460;\n --highlight-color: #e94560;\n --text-color: #f1f1f1;\n --card-bg: rgba(255, 255, 255, 0.1);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--text-color);\n min-height: 100vh;\n padding-bottom: 50px;\n }\n \n header {\n text-align: center;\n padding: 40px 20px;\n position: relative;\n overflow: hidden;\n }\n \n header::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n \n h1 {\n font-size: 3rem;\n margin-bottom: 10px;\n background-clip: text;\n color:#e94560;\n text-shadow: 0 0 20px rgba(108, 92, 231, 0.3);\n letter-spacing: 2px;\n margin-left: -150px;\n }\n \n .subtitle {\n font-size: 1.2rem;\n opacity: 0.8;\n margin-bottom: 30px;\n margin-left: -150px;\n }\n \n .search-container {\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n margin-left: 50px;\n }\n \n #searchInput {\n width: 100%;\n padding: 15px 20px;\n border: none;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text-color);\n font-size: 1.1rem;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n \n #searchInput:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);\n }\n \n #searchInput::placeholder {\n color: rgba(255, 255, 255, 0.6);\n }\n \n .alphabet-nav {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin: 30px 0;\n padding: 0 20px;\n }\n \n .alphabet-nav button {\n background: transparent;\n border: none;\n color: var(--text-color);\n font-size: 1.2rem;\n margin: 5px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 5px;\n transition: all 0.3s ease;\n }\n \n .alphabet-nav button:hover {\n background: rgba(233, 69, 96, 0.3);\n }\n \n .alphabet-nav button.active {\n background: var(--highlight-color);\n color: var(--primary-color);\n font-weight: bold;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n .cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 20px;\n margin-top: 30px;\n max-width: 800px;\n }\n \n .card {\n background: var(--card-bg);\n border-radius: 15px;\n overflow: hidden;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);\n border-color: var(--highlight-color);\n }\n \n .card-header {\n padding: 15px;\n background: rgba(0, 0, 0, 0.2);\n text-align: center;\n }\n \n .card-title {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 5px;\n }\n \n .card-subtitle {\n font-size: 0.9rem;\n opacity: 0.7;\n }\n \n .card-content {\n padding: 15px;\n }\n \n .card-content p {\n margin-bottom: 10px;\n font-size: 0.9rem;\n line-height: 1.4;\n text-align: center;\n }\n \n .card-link {\n display: block;\n background: var(--accent-color);\n color: var(--text-color);\n text-align: center;\n padding: 10px;\n border-radius: 5px;\n text-decoration: none;\n margin-top: 10px;\n transition: all 0.3s ease;\n font-weight: bold;\n }\n \n .card-link:hover {\n background: var(--highlight-color);\n transform: scale(1.05);\n }\n \n .no-results {\n text-align: center;\n padding: 40px;\n font-size: 1.2rem;\n grid-column: 1 \/ -1;\n }\n \n @media (max-width: 768px) {\n .cards-container {\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n }\n \n h1 {\n font-size: 2.2rem;\n }\n \n .alphabet-nav button {\n font-size: 1rem;\n padding: 6px 10px;\n }\n }\n \n @media (max-width: 480px) {\n .cards-container {\n grid-template-columns: repeat(2, 1fr);\n }\n \n h1 {\n font-size: 1.8rem;\n }\n }\n \n .pulse {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(233, 69, 96, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <h1>\u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6<\/h1>\n <div class=\"subtitle\">\u63a2\u7d22\u6b27\u7f8e\u5404\u56fd\u7684\u97f3\u4e50\u73cd\u85cf<\/div>\n <div class=\"search-container\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u6b4c\u624b\u6216\u4e50\u961f\u540d\u79f0...\">\n <\/div>\n <\/header>\n \n <div class=\"alphabet-nav\" id=\"alphabetNav\">\n \n <\/div>\n \n <div class=\"container\">\n <div class=\"cards-container\" id=\"cardsContainer\">\n \n <\/div>\n <\/div>\n\n <script>\n \/\/ \u6570\u636e - \u6b4c\u624b\u548c\u4e13\u8f91\u4fe1\u606f\n const artistsData = [\n {\n name: \"Backstreet Boys\",\n chineseName: \"\",\n description: \"\u540e\u8857\u7537\u5b69\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/09\/19\/%e5%90%8e%e8%a1%97%e7%94%b7%e5%ad%a91995-2019%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Linkin Park\",\n chineseName: \"\",\n description: \"\u6797\u80af\u516c\u56ed\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/19\/linkin-park%e6%9e%97%e8%82%af%e5%85%ac%e5%9b%ad1997-2020%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Westlife\",\n chineseName: \"\",\n description: \"\u897f\u57ce\u7537\u5b69\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/26\/westlife%e8%a5%bf%e5%9f%8e%e7%94%b7%e5%ad%a91999-2019%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Queen\",\n chineseName: \"\",\n description: \"\u7687\u540e\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/10\/27\/queen%e7%9a%87%e5%90%8e%e4%b9%90%e9%98%9f1973-1995%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e5%85%a8%e9%83%a8%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%89%93%e5%8c%85sacd37-3g%e7%99%be%e5%ba%a6%e4%ba%91\/\"\n },\n {\n name: \"OneRepublic\",\n chineseName: \"\",\n description: \"\u5171\u548c\u65f6\u4ee3\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/04\/09\/onerepublic%e5%85%b1%e5%92%8c%e6%97%b6%e4%bb%a3%e4%b9%90%e9%98%9f%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-3-56gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98\/\"\n },\n {\n name: \"Coldplay\",\n chineseName: \"\",\n description: \"\u9177\u73a9\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/10\/13\/%e9%85%b7%e7%8e%a9%e4%b9%90%e9%98%9f%ef%bc%88coldplay%ef%bc%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-14-46gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98\/\"\n },\n {\n name: \"Imagine Dragons\",\n chineseName: \"\",\n description: \"\u68a6\u9f99\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2023\/01\/05\/imagine-dragons2008-2021%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-6-5gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"98\u5ea6\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/12\/02\/98%e5%ba%a61997-2017%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%85%a8%e5%90%88%e9%9b%86\/\"\n },\n {\n name: \"Sum41\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/03\/15\/sum41%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-3-46gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Travis\",\n chineseName: \"\",\n description: \"\u7279\u62c9\u7ef4\u65af\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/03\/15\/travis%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-6-37gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"King Crimson\",\n chineseName: \"\",\n description: \"\u514b\u91cc\u59c6\u68ee\u56fd\u738b\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/05\/16\/king-crimson%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-37-16gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Gotthard\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/05\/07\/gotthard%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-11-67gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"ABBA\u4e50\u961f\",\n chineseName: \"\",\n description: \"\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/05\/26\/abba%e4%b9%90%e9%98%9f%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-3-74gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Keane\",\n chineseName: \"\",\n description: \"\u57fa\u97f3\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/07\/keane%e5%9f%ba%e9%9f%b3%e4%b9%90%e9%98%9f%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-16-96gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Kings of Leon\",\n chineseName: \"\",\n description: \"\u83b1\u6602\u56fd\u738b\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/07\/kings-of-leon%e8%8e%b1%e6%98%82%e5%9b%bd%e7%8e%8b%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-4-45gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Boyzone\",\n chineseName: \"\",\n description: \"\u7537\u5b69\u5730\u5e26\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/07\/boyzone%e7%94%b7%e5%ad%a9%e5%9c%b0%e5%b8%a6%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fwav-2-83gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"The killer\",\n chineseName: \"\",\n description: \"\u6740\u624b\u4e50\u56e2\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2024\/07\/20\/the-killer%e6%9d%80%e6%89%8b%e4%b9%90%e5%9b%a2%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-15-48gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"twenty one pilots\",\n chineseName: \"\",\n description: \"\u4e8c\u5341\u4e00\u540d\u98de\u884c\u5458\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2025\/12\/01\/%e4%ba%8c%e5%8d%81%e4%b8%80%e5%90%8d%e9%a3%9e%e8%a1%8c%e5%91%98twenty-one-pilots%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-4-61gb%e7%99%be%e5%ba%a6%e4%ba%91\/\"\n },\n {\n name: \"Nightwish\",\n chineseName: \"\",\n description: \"\u591c\u613f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2025\/12\/02\/%e5%a4%9c%e6%84%bfnightwish%e4%b8%93%e8%be%91%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-5-87gb%e7%99%be%e5%ba%a6%e4%ba%91%e5%a4%b8%e5%85%8b%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n },\n {\n name: \"Eagles\",\n chineseName: \"\",\n description: \"\u8001\u9e70\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/09\/%e8%80%81%e9%b9%b0%e4%b9%90%e9%98%9f-eagles%e6%89%80%e6%9c%89%e4%b8%93%e8%be%91%e5%85%a8%e9%83%a8%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%89%93%e5%8c%85%e6%97%a0%e6%8d%9fflac%e6%a0%bc%e5%bc%8f24bit\/\"\n },\n {\n name: \"The Beatles\",\n chineseName: \"\",\n description: \"\u7532\u58f3\u866b\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/11\/%e7%94%b2%e5%a3%b3%e8%99%ab%e4%b9%90%e9%98%9f-the-beatles%e9%9f%b3%e4%b9%90%e4%b8%93%e8%be%91%e6%97%a0%e6%8d%9f%e9%9f%b3%e8%b4%a8%e5%90%88%e9%9b%86sacd\/\"\n },\n {\n name: \"The Rolling Stones\",\n chineseName: \"\",\n description: \"\u6eda\u77f3\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2022\/11\/14\/%e6%bb%9a%e7%9f%b3%e4%b9%90%e9%98%9f-the-rolling-stones%e9%9f%b3%e4%b9%90%e4%b8%93%e8%be%91%e6%97%a0%e6%8d%9f%e9%9f%b3%e8%b4%a8%e5%90%88%e9%9b%86sacd\/\"\n },\n {\n name: \"Thin Lizzy\",\n chineseName: \"\",\n description: \"\u7626\u674e\u5947\u4e50\u961f\",\n link: \"https:\/\/www.guaniumusic.com\/index.php\/2025\/02\/09\/%e7%98%a6%e6%9d%8e%e5%a5%87thin-lizzy%e9%ab%98%e5%93%81%e8%b4%a8%e6%ad%8c%e6%9b%b2%e5%90%88%e9%9b%86%e6%97%a0%e6%8d%9fflac-21-97gb%e7%99%be%e5%ba%a6%e4%ba%91%e7%bd%91%e7%9b%98%e4%b8%8b%e8%bd%bd\/\"\n }\n ];\n\n \/\/ \u83b7\u53d6\u59d3\u6c0f\u9996\u5b57\u6bcd\n function getLastNameInitial(name) {\n \/\/ \u5904\u7406\u7279\u6b8a\u60c5\u51b5\n if (name.startsWith(\"The \")) {\n name = name.substring(4);\n }\n \n const words = name.split(' ');\n const lastName = words[words.length - 1];\n return lastName.charAt(0).toUpperCase();\n }\n\n \/\/ \u6309\u59d3\u6c0f\u9996\u5b57\u6bcd\u6392\u5e8f\n artistsData.sort((a, b) => {\n const initialA = getLastNameInitial(a.name);\n const initialB = getLastNameInitial(b.name);\n return initialA.localeCompare(initialB);\n });\n\n \/\/ \u751f\u6210\u5b57\u6bcd\u5bfc\u822a\n function generateAlphabetNav() {\n const alphabetNav = document.getElementById('alphabetNav');\n const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n \n \/\/ \u6dfb\u52a0\"\u5168\u90e8\"\u6309\u94ae\n const allButton = document.createElement('button');\n allButton.textContent = '\u5168\u90e8';\n allButton.classList.add('active');\n allButton.addEventListener('click', () => {\n filterByLetter('\u5168\u90e8');\n setActiveButton(allButton);\n });\n alphabetNav.appendChild(allButton);\n \n \/\/ \u6dfb\u52a0\u5b57\u6bcd\u6309\u94ae\n for (let letter of alphabet) {\n const button = document.createElement('button');\n button.textContent = letter;\n button.addEventListener('click', () => {\n filterByLetter(letter);\n setActiveButton(button);\n });\n alphabetNav.appendChild(button);\n }\n }\n\n \/\/ \u8bbe\u7f6e\u6d3b\u52a8\u6309\u94ae\n function setActiveButton(activeButton) {\n const buttons = document.querySelectorAll('.alphabet-nav button');\n buttons.forEach(button => button.classList.remove('active'));\n activeButton.classList.add('active');\n }\n\n \/\/ \u6309\u5b57\u6bcd\u7b5b\u9009\n function filterByLetter(letter) {\n const cards = document.querySelectorAll('.card');\n \n cards.forEach(card => {\n if (letter === '\u5168\u90e8') {\n card.style.display = 'block';\n } else {\n const cardInitial = card.dataset.initial;\n card.style.display = cardInitial === letter ? 'block' : 'none';\n }\n });\n }\n\n \/\/ \u751f\u6210\u5361\u7247\n function generateCards() {\n const cardsContainer = document.getElementById('cardsContainer');\n \n artistsData.forEach(artist => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.initial = getLastNameInitial(artist.name);\n \n const cardHeader = document.createElement('div');\n cardHeader.className = 'card-header';\n \n const cardTitle = document.createElement('div');\n cardTitle.className = 'card-title';\n cardTitle.textContent = artist.name;\n \n const cardSubtitle = document.createElement('div');\n cardSubtitle.className = 'card-subtitle';\n cardSubtitle.textContent = artist.chineseName;\n \n cardHeader.appendChild(cardTitle);\n cardHeader.appendChild(cardSubtitle);\n \n const cardContent = document.createElement('div');\n cardContent.className = 'card-content';\n \n const description = document.createElement('p');\n description.textContent = artist.description;\n \n const link = document.createElement('a');\n link.className = 'card-link';\n link.href = artist.link;\n link.target = '_blank';\n link.textContent = '\u8bbf\u95ee\u8d44\u6e90';\n \n cardContent.appendChild(description);\n cardContent.appendChild(link);\n \n card.appendChild(cardHeader);\n card.appendChild(cardContent);\n \n cardsContainer.appendChild(card);\n });\n }\n\n \/\/ \u641c\u7d22\u529f\u80fd\n function setupSearch() {\n const searchInput = document.getElementById('searchInput');\n \n searchInput.addEventListener('input', function() {\n const searchTerm = this.value.toLowerCase();\n const cards = document.querySelectorAll('.card');\n \n cards.forEach(card => {\n const title = card.querySelector('.card-title').textContent.toLowerCase();\n const subtitle = card.querySelector('.card-subtitle').textContent.toLowerCase();\n const description = card.querySelector('p').textContent.toLowerCase();\n \n if (title.includes(searchTerm) || subtitle.includes(searchTerm) || description.includes(searchTerm)) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n });\n });\n }\n\n \/\/ \u521d\u59cb\u5316\n document.addEventListener('DOMContentLoaded', function() {\n generateAlphabetNav();\n generateCards();\n setupSearch();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6 \u6b27\u7f8e\u7ec4\u5408\/\u4e50\u961f\u5531\u7247\u96c6 \u63a2\u7d22\u6b27\u7f8e\u5404\u56fd\u7684\u97f3\u4e50\u73cd\u85cf<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/13963"}],"collection":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/comments?post=13963"}],"version-history":[{"count":3,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/13963\/revisions"}],"predecessor-version":[{"id":14002,"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/pages\/13963\/revisions\/14002"}],"wp:attachment":[{"href":"https:\/\/www.guaniumusic.com\/index.php\/wp-json\/wp\/v2\/media?parent=13963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}