flotynt/post.html at main · MYTPONS/flotynt · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教程详情 - MYTP-交流与心得</title>
    <link rel="stylesheet" href="/flotynt/css/style.css">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="logo">
                <a href="/flotynt/">
                    <span class="logo-text">MYTP-交流与心得</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="/flotynt/">首页</a></li>
                    <li><a href="/flotynt/tutorials.html">教程</a></li>
                    <li><a href="/flotynt/about.html">关于</a></li>
                </ul>
            </nav>
            <button class="theme-toggle" id="themeToggle" aria-label="切换主题">
                <span class="icon-light">Light</span>
                <span class="icon-dark">Dark</span>
            </button>
        </div>
    </header>

    <main class="main-content">
        <article class="post-detail" id="postDetail">
            <div class="container">
                <!-- Content loaded by JavaScript -->
            </div>
        </article>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于本站</h3>
                    <p>一个分享技术教程的静态网站，托管在 GitHub Pages。</p>
                </div>
                <div class="footer-section">
                    <h3>友情链接</h3>
                    <ul>
                        <li><a href="https://github.com/MYTPONS/flotynt">GitHub</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 MYTP-交流与心得. 使用 GitHub Pages 托管</p>
                <p><a href="https://icp.gov.moe/?keyword=20260290" target="_blank">萌ICP备20260290号</a></p>
            </div>
        </div>
    </footer>

    <script src="/flotynt/js/data.js"></script>
    <script src="/flotynt/js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const postDetail = document.getElementById('postDetail').querySelector('.container');

            // Get post ID from URL
            const urlParams = new URLSearchParams(window.location.search);
            const postId = parseInt(urlParams.get('id'));

            // Find post metadata
            const postMeta = window.postsData.find(p => p.id === postId);

            if (!postMeta) {
                postDetail.innerHTML = `
                    <div class="error-message">
                        <h1>文章未找到</h1>
                        <p>抱歉，您访问的文章不存在。</p>
                        <a href="/flotynt/tutorials.html" class="btn btn-primary">返回教程列表</a>
                    </div>
                `;
                document.title = '文章未找到 - MYTP-交流与心得';
                return;
            }

            // Update page title
            document.title = `${postMeta.title} - MYTP-交流与心得`;

            // Render post header first
            postDetail.innerHTML = `
                <header class="post-header">
                    <div class="post-meta">
                        <span class="post-category">${getCategoryName(postMeta.category)}</span>
                        <span class="post-date">${postMeta.date}</span>
                        <span class="post-author">作者: ${postMeta.author}</span>
                    </div>
                    <h1 class="post-title">${postMeta.title}</h1>
                    <div class="post-tags">
                        ${postMeta.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                    </div>
                </header>

                <div class="post-content loading">加载中...</div>

                <nav class="post-nav">
                    <a href="/flotynt/tutorials.html" class="btn btn-secondary">返回列表</a>
                </nav>
            `;

            // Load post JSON file
            try {
                const jsonFile = postMeta.contentFile.replace('.html', '.json');
                const response = await fetch('/flotynt/' + jsonFile);
                if (!response.ok) throw new Error('Failed to load post');
                const postData = await response.json();

                const postContent = postDetail.querySelector('.post-content');
                if (postContent && postData.content) {
                    postContent.innerHTML = `<article>${postData.content}</article>`;
                    postContent.classList.remove('loading');
                }
            } catch (error) {
                console.error('加载文章失败:', error);
                const postContent = postDetail.querySelector('.post-content');
                if (postContent) {
                    postContent.innerHTML = '<p>加载内容失败，请刷新页面重试。</p>';
                    postContent.classList.remove('loading');
                }
            }
        });
    </script>
</body>
</html>