---
name: Blog Post
slug: blog-post-2
category: Frontend
description: Blog Post provides a magazine-style long-form article template with masthead, hero, figures, pull quotes, and author byline. Use it when you need a polished editorial layout for articles over 600 words.
github: "https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/blog-post"
language: HTML
stars: 8300
forks: 810
install: "npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/blog-post ~/.claude/skills/blog-post"
installs_to: ~/.claude/skills/blog-post
source_path: next/src/lib/templates/skills/blog-post/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/nexu-io/html-anything"
added: 2026-08-15T06:50:48.358Z
last_synced: 2026-08-15T06:50:48.358Z
canonical_url: "https://dirskills.com/skills/blog-post-2"
---

# Blog Post

Blog Post provides a magazine-style long-form article template with masthead, hero, figures, pull quotes, and author byline. Use it when you need a polished editorial layout for articles over 600 words.

**Install:**

```bash
npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/blog-post ~/.claude/skills/blog-post
```

## README

【模板: 博客长文 / Blog Post】
【意图】≥ 600 字的真正的长文章, 排版以 typography 为主, 70% 文字 20% 图 10% chrome。
【布局】
- Masthead (publication name + date)
- Hero (大标题 + 副标 + 作者署名 + 阅读时间)
- 正文 (单栏 65ch, 含 figures, pull quotes, 行内引用)
- Author bio 卡片
- Related posts (3 张卡)
【设计细节】
- Pull quote 用大号 serif 斜体 + 左侧色条
- Figures 自带 caption (italic, smaller)
- 代码块: 圆角 + 深色 + 语言标签