博客网络功能总结
当前博客如何加载和显示帖子
本博客网络功能摘要
// data.js
//管理博客类别和帖子列表
//在categoryMap中输入类别名称,
//posts 数组包含实际文章的标题、摘要、文件名和标签。
const categoryMap = {
'CPP': { name: 'C / C++' },
'CS': { name: 'Computer Science' },
'WEB': { name: 'Web' },
'NTT': { name: 'Nand2Tetris' }
};
const posts = [
{
id: 110001,
category: 'WEB',
date: '2026-05-20',
title: '博客网络功能总结',
summary: '当前博客如何加载和显示帖子',
fileName: 'WEBBlogFeature.md',
tags: ['Web', 'Blog']
}
];
// app.js
//使用哈希路由更改屏幕
//例子:
//#home:主屏幕
//#category/WEB/1 : WEB 类别页面 1
//#post/110001:具体帖子
function router() {
const hash = location.hash || '#home';
if (hash === '#home') {
renderHome();
} else if (hash.startsWith('#category/')) {
renderCategory(hash);
} else if (hash.startsWith('#post/')) {
renderPost(hash);
}
}
//后加载方法
//在 posts 数组中查找 fileName,
//使用 fetch 导入 posts 文件夹中的 Markdown 文件并将其显示在屏幕上。
fetch(`posts/${post.fileName}`)
.then(response => response.text())
.then(markdown => {
document.querySelector('#content').innerHTML = marked.parse(markdown);
});
<!-- 怎么写 -->
<!-- 1. 在 posts 文件夹中创建一个 Markdown 文件。 -->
<!-- 2.将post信息添加到data.js中的posts数组中 -->
<!-- 3. 类别和标签过滤器根据类别和标签值自动工作。 -->
# 标题
文本是用 Markdown 编写的。
```cpp
// 也可以使用代码块
int main() {
return 0;
}
```