flotynt/tutorials.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
133
134
135
136
137
138
139
<!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" class="active">教程</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">
        <div class="container">
            <div class="page-header">
                <h1>教程列表</h1>
                <div class="filters">
                    <select id="categoryFilter" class="filter-select">
                        <option value="all">全部分类</option>
                        <option value="linux">Linux</option>
                        <option value="programming">编程开发</option>
                        <option value="devops">运维部署</option>
                        <option value="tools">工具使用</option>
                    </select>
                    <input type="search" id="searchInput" class="search-input" placeholder="搜索教程...">
                </div>
            </div>

            <div class="posts-list" id="postsList">
                <!-- Posts will be loaded by JavaScript -->
            </div>
        </div>
    </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>
        // Initialize tutorials page
        document.addEventListener('DOMContentLoaded', () => {
            const postsList = document.getElementById('postsList');
            const categoryFilter = document.getElementById('categoryFilter');
            const searchInput = document.getElementById('searchInput');

            function renderPosts(posts) {
                postsList.innerHTML = posts.map(post => `
                    <article class="post-card">
                        <div class="post-meta">
                            <span class="post-category">${getCategoryName(post.category)}</span>
                            <span class="post-date">${post.date}</span>
                        </div>
                        <h2 class="post-title">
                            <a href="/flotynt/post.html?id=${post.id}">${post.title}</a>
                        </h2>
                        <p class="post-excerpt">${post.excerpt}</p>
                        <div class="post-tags">
                            ${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                        </div>
                    </article>
                `).join('');
            }

            function filterPosts() {
                const category = categoryFilter.value;
                const search = searchInput.value.toLowerCase();

                let filtered = window.postsData;

                if (category !== 'all') {
                    filtered = filtered.filter(p => p.category === category);
                }

                if (search) {
                    filtered = filtered.filter(p =>
                        p.title.toLowerCase().includes(search) ||
                        p.excerpt.toLowerCase().includes(search) ||
                        p.tags.some(t => t.toLowerCase().includes(search))
                    );
                }

                renderPosts(filtered);
            }

            // Initial render
            renderPosts(window.postsData);

            // Event listeners
            categoryFilter.addEventListener('change', filterPosts);
            searchInput.addEventListener('input', filterPosts);

            // Check URL params for category filter
            const urlParams = new URLSearchParams(window.location.search);
            const urlCategory = urlParams.get('category');
            if (urlCategory) {
                categoryFilter.value = urlCategory;
                filterPosts();
            }
        });
    </script>
</body>
</html>