Coco-Keya.github.io/index.html at main · Coco-Keya/Coco-Keya.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柯迓的静态网站</title>
    <!-- Favicon -->
    <link rel="icon" href="public/img/favicon.ico" type="image/x-icon">
    <!-- 引入基础样式 -->
    <link rel="stylesheet" href="/src/assets/styles/base.css">
    <link rel="stylesheet" href="/src/assets/styles/layout.css">
    <!-- 引入页头组件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <!-- 动态插入页头 -->
    <div id="header"></div>

    <main class="container">
    <section class="hero">
            <h1 data-typewriter>欢迎访问我的网站</h1>
            <p data-typewriter data-delay="1500">希望不会让你不愉快 ＞﹏＜</p>
            <a href="/src/pages/about.html" class="btn">了解更多</a>
        </section>

        <section class="features" id="articles-container">
            <!-- 文章卡片将通过JavaScript动态生成 -->
        </section>

    <!-- 全局配置 -->
    <script src="/src/config/workspace.js"></script>

    <!-- 文章数据 -->
    <script src="/src/essay/essay.js"></script>

        <script>
            // 生成柔和的随机颜色
            function generateLightPastelColor() {
                // 生成柔和的随机颜色值
                const getRandomPastel = () => Math.floor(Math.random() * 127 + 128).toString(16).padStart(2, '0');
                const color1 = `#${getRandomPastel()}${getRandomPastel()}${getRandomPastel()}`;
                const color2 = `#${getRandomPastel()}${getRandomPastel()}${getRandomPastel()}`;
                return `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`;
            }

            // 动态加载文章
            document.addEventListener('DOMContentLoaded', () => {
                try {
                    const container = document.getElementById('articles-container');

                    // 调试：检查数据加载情况
                    console.log('文章数据:', window.articles);

                    // 检查数据是否加载
                    if (!window.articles || !Array.isArray(window.articles)) {
                        console.error('文章数据未正确加载，请检查:',
                            '1. /src/essay/essay.js路径是否正确',
                            '2. essay.js是否正确定义window.articles');
                        return;
                    }

                    // 清空容器避免重复
                    container.innerHTML = '';

                    // 生成文章卡片
                    window.articles.forEach(article => {
                        const card = document.createElement('a');
                        card.href = `/src/essay/article_template.html?md=${article.filename}&id=${articles.indexOf(article)}`;
                        card.className = 'card';
                        card.style.background = article.colorClass || generateLightPastelColor();
                        card.innerHTML = `
                            <div class="card-content" data-filename="${article.filename}">
                                <h3>${article.title}</h3>
                                <p>${article.description}</p>
                            </div>
                        `;
                        container.appendChild(card);
                    });

                } catch (error) {
                    console.error('加载文章失败:', error);
                }
            });
        </script>

    </main>

    <!-- 动态插入页脚 -->
    <div id="footer"></div>

        <!-- 链接调试与跳转 -->
        <script>
            document.addEventListener('click', (e) => {
                if (e.target.closest('.card')) {
                    const card = e.target.closest('.card');
                    // 仅记录不阻止跳转
                    console.group('文章跳转调试');
                    console.log('目标URL:', card.href);
                    console.log('文件状态:',
                        fetch(card.href)
                            .then(res => res.statusText)
                            .catch(e => e.message));
                    console.groupEnd();
                }
            });
        </script>

        <!-- 主JS脚本 -->
        <script src="/src/scripts/main.js"></script>
        <!-- 可选功能脚本 -->
        <script src="/src/scripts/optional.js"></script>
</body>

</html>