原生 HTML+JS 实现一言（Hitokoto）独立展示卡片

  
<!-- 一言(Hitokoto)独立展示块 - 仅访问基础接口地址 -->
<div id="hitokotoContainer" style="width: 100%; max-width: 600px; background: #FFF8DC; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); padding: 30px 25px; position: relative; overflow: hidden; margin: 20px 0; display: flex; flex-direction: column; gap: 15px; transition: all 0.3s ease; font-family: 'Microsoft YaHei', 'PingFang SC', 'SimSun', serif;">
    <!-- 加载占位符 -->
    <div id="hitokotoContent" style="font-size: 20px; line-height: 1.8; color: #a0aec0; text-align: center; letter-spacing: 0.5px; font-style: italic;">正在加载一言...</div>
    <!-- 来源容器（初始隐藏） -->
    <div id="hitokotoFrom" style="font-size: 14px; color: #718096; text-align: center; padding-top: 10px; border-top: 1px solid #f7fafc; opacity: 0; height: 0; overflow: hidden; transition: opacity 0.3s ease, height 0.3s ease, padding-top 0.3s ease;"></div>

    <!-- 内嵌脚本 -->
    <script>
        (function() {
            // 核心配置（可自定义修改）
            const config = {
                themeColor: '#9f7aea', // 引用符号颜色
                errorText: '加载失败，请稍后重试' // 错误提示
            };

            // 获取元素
            const container = document.getElementById('hitokotoContainer');
            const content = document.getElementById('hitokotoContent');
            const from = document.getElementById('hitokotoFrom');

            // 响应式样式适配
            function setResponsiveStyle() {
                if (window.innerWidth <= 768) {
                    content.style.fontSize = '18px';
                    from.style.fontSize = '13px';
                    container.style.padding = '20px 15px';
                } else {
                    content.style.fontSize = '20px';
                    from.style.fontSize = '14px';
                    container.style.padding = '30px 25px';
                }
            }

            // 加载一言数据（仅访问基础接口地址）
            async function loadHitokoto() {
                try {
                    // 仅请求基础接口地址，不添加任何参数
                    const res = await fetch('https://v1.hitokoto.cn');
                    if (!res.ok) throw new Error(`状态码：${res.status}`);
                    const data = await res.json();

                    // 渲染一言内容
                    content.innerHTML = `<span style="color: ${config.themeColor}; font-size: 24px; font-weight: bold;">「</span>${data.hitokoto}<span style="color: ${config.themeColor}; font-size: 24px; font-weight: bold;">」</span>`;
                    content.style.color = '#2d3748';
                    content.style.fontStyle = 'normal';
                    // 渲染来源
                    from.innerHTML = `—— ${data.from || '未知'}`;
                    
                } catch (err) {
                    content.textContent = `${config.errorText}：${err.message}`;
                    content.style.color = '#e53e3e';
                    console.error('一言加载失败：', err);
                }
            }

            // 初始化
            function init() {
                // 适配响应式
                setResponsiveStyle();
                window.addEventListener('resize', setResponsiveStyle);
                // 加载数据
                loadHitokoto();
                // 悬浮显示来源
                container.addEventListener('mouseenter', () => {
                    from.style.opacity = '1';
                    from.style.height = 'auto';
                    from.style.paddingTop = '10px';
                });
                container.addEventListener('mouseleave', () => {
                    from.style.opacity = '0';
                    from.style.height = '0';
                    from.style.paddingTop = '0';
                });
            }

            // 页面加载完成后初始化
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                init();
            } else {
                document.addEventListener('DOMContentLoaded', init);
            }
        })();
    </script>
</div>

const config = {
    themeColor: '#9f7aea',
    errorText: '加载失败，请稍后重试'
};