← SEARCHABLE ARCHIVE
Web · 2026-07-06

Summary of blog web features

How the current blog loads and displays posts

INTERACTIVE READING MODE →

Summary of this blog's web features

// data.js
//Manages blog categories and post list
//Enter the category name in categoryMap,
//The posts array contains the title, summary, file name, and tags of the actual article.

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 of blog web features',
        summary: 'How the current blog loads and displays posts',
        fileName: 'WEBBlogFeature.md',
        tags: ['Web', 'Blog']
    }
];
// app.js
//Change screen using hash route
//example:
//#home: Home screen
//#category/WEB/1 : WEB category page 1
//#post/110001: Specific post

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);
    }
}
//Post loading method
//Find fileName in the posts array,
//Import the Markdown file in the posts folder using fetch and display it on the screen.

fetch(`posts/${post.fileName}`)
    .then(response => response.text())
    .then(markdown => {
        document.querySelector('#content').innerHTML = marked.parse(markdown);
    });
<!-- How to write -->
<!-- 1. Create a Markdown file in the posts folder. -->
<!-- 2. Add post information to the posts array in data.js -->
<!-- 3. Category and tag filters work automatically based on category and tags values. -->

# title

The text is written in Markdown.

```cpp
// Code blocks can also be used
int main() {
    return 0;
}
```