@jet-w/astro-blog 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-HVQKQN6B.js → chunk-6D3XRDNY.js} +1 -1
- package/dist/{chunk-ATRISB7B.js → chunk-A2E2VSAQ.js} +43 -3
- package/dist/chunk-DAH2XP4W.js +154 -0
- package/dist/{chunk-AZHCNNAC.js → chunk-PG43JO4O.js} +1 -153
- package/dist/chunk-PZICDGJG.js +69 -0
- package/dist/chunk-Z3O3JK56.js +186 -0
- package/dist/config/index.d.ts +2 -2
- package/dist/config/index.js +9 -7
- package/dist/{i18n-5H4W145i.d.ts → i18n-DYYPTq4o.d.ts} +21 -1
- package/dist/index.d.ts +10 -184
- package/dist/index.js +37 -210
- package/dist/integration.d.ts +2 -2
- package/dist/integration.js +2 -2
- package/dist/{sidebar-Da-W_4Lr.d.ts → sidebar-DNdiCKBw.d.ts} +1 -1
- package/dist/utils/i18n.d.ts +133 -0
- package/dist/utils/i18n.js +49 -0
- package/dist/utils/sidebar.d.ts +1 -1
- package/dist/utils/useI18n.d.ts +74 -0
- package/dist/utils/useI18n.js +15 -0
- package/package.json +9 -1
- package/src/components/blog/FloatingToc.vue +11 -3
- package/src/components/blog/Hero.astro +17 -2
- package/src/components/blog/NavigationTabs.vue +46 -15
- package/src/components/blog/PostCard.astro +28 -10
- package/src/components/blog/RelatedPosts.astro +23 -7
- package/src/components/blog/TableOfContents.astro +10 -4
- package/src/components/blog/TagCloud.astro +4 -3
- package/src/components/home/FeaturedPostsSection.astro +22 -6
- package/src/components/home/QuickNavSection.astro +33 -4
- package/src/components/home/RecentPostsSection.astro +22 -6
- package/src/components/home/StatsSection.astro +24 -6
- package/src/components/layout/Header.astro +9 -5
- package/src/components/layout/Sidebar.astro +14 -11
- package/src/components/ui/SearchBox.vue +13 -5
- package/src/components/ui/SearchInterface.vue +49 -25
- package/src/pages/archives/[year]/[month].astro +36 -17
- package/src/pages/archives/index.astro +36 -20
- package/src/pages/categories/[category].astro +33 -16
- package/src/pages/categories/index.astro +37 -14
- package/src/pages/posts/[...slug].astro +125 -18
- package/src/pages/posts/index.astro +59 -37
- package/src/pages/posts/page/[page].astro +65 -27
- package/src/pages/search.astro +50 -14
- package/src/pages/slides/index.astro +25 -6
- package/src/pages/tags/[tag].astro +32 -15
- package/src/pages/tags/index.astro +39 -16
- package/src/plugins/remark-containers.mjs +351 -322
- package/src/plugins/remark-protect-code.mjs +69 -0
- package/src/styles/global.css +35 -1
- package/templates/default/.claude/ralph-loop.local.md +48 -0
- package/templates/default/astro.config.mjs +13 -4
- package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/01-intro.md +1 -1
- package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/02-install.md +1 -1
- package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/03-create-post.md +1 -1
- package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/04-structure.md +1 -1
- package/templates/default/content/posts/blog_docs_en/01.get-started/05-deploy.md +208 -0
- package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/README.md +1 -1
- package/templates/default/content/posts/blog_docs_en/02.guide/02-containers.md +245 -0
- package/templates/default/content/posts/blog_docs_en/{guide/markdown → 02.guide}/03-code-blocks.md +2 -1
- package/templates/default/content/posts/blog_docs_en/{guide/features/01-mermaid.md → 02.guide/03-mermaid.md} +1 -1
- package/templates/default/content/posts/blog_docs_en/{guide/features → 02.guide}/04-icons.md +4 -2
- package/templates/default/content/posts/blog_docs_en/{guide/features/02-latex.md → 02.guide/06-latex.md} +1 -1
- package/templates/default/content/posts/blog_docs_en/{guide/features/03-video.md → 02.guide/07-video.md} +1 -1
- package/templates/default/content/posts/blog_docs_en/02.guide/08-slides.md +359 -0
- package/templates/default/content/posts/blog_docs_en/{guide/markdown → 02.guide}/README.md +22 -3
- package/templates/default/content/posts/blog_docs_en/{config → 03.config}/01-site.md +1 -1
- package/templates/default/content/posts/blog_docs_en/{config → 03.config}/02-sidebar.md +1 -1
- package/templates/default/content/posts/blog_docs_en/{config → 03.config}/03-i18n.md +88 -24
- package/templates/default/content/posts/blog_docs_en/{config → 03.config}/README.md +1 -1
- package/templates/default/content/posts/blog_docs_en/README.md +2 -1
- package/templates/default/content/posts/blog_docs_zh/01.get-started/01-intro.md +81 -0
- package/templates/default/content/posts/blog_docs_zh/01.get-started/02-install.md +137 -0
- package/templates/default/content/posts/blog_docs_zh/01.get-started/03-create-post.md +176 -0
- package/templates/default/content/posts/blog_docs_zh/01.get-started/04-structure.md +173 -0
- package/templates/default/content/posts/blog_docs_zh/01.get-started/05-deploy.md +208 -0
- package/templates/default/content/posts/blog_docs_zh/01.get-started/README.md +52 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/02-containers.md +245 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/03-code-blocks.md +206 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/03-mermaid.md +194 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/04-icons.md +229 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/06-latex.md +233 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/07-video.md +184 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/08-slides.md +359 -0
- package/templates/default/content/posts/blog_docs_zh/02.guide/README.md +213 -0
- package/templates/default/content/posts/blog_docs_zh/03.config/01-site.md +208 -0
- package/templates/default/content/posts/blog_docs_zh/03.config/02-sidebar.md +240 -0
- package/templates/default/content/posts/blog_docs_zh/03.config/03-i18n.md +348 -0
- package/templates/default/content/posts/blog_docs_zh/03.config/README.md +85 -0
- package/templates/default/content/posts/blog_docs_zh/README.md +78 -0
- package/templates/default/package.dev.json +31 -0
- package/templates/default/package.json +1 -1
- package/templates/default/src/config/locales/en/index.ts +5 -1
- package/templates/default/src/config/locales/en/menu.ts +3 -1
- package/templates/default/src/config/locales/en/sidebar.ts +18 -2
- package/templates/default/src/config/locales/en/site.ts +1 -1
- package/templates/default/src/config/locales/en/ui.ts +29 -0
- package/templates/default/src/config/locales/zh-CN/index.ts +5 -1
- package/templates/default/src/config/locales/zh-CN/menu.ts +7 -5
- package/templates/default/src/config/locales/zh-CN/sidebar.ts +22 -6
- package/templates/default/src/config/locales/zh-CN/site.ts +2 -2
- package/templates/default/src/config/locales/zh-CN/ui.ts +29 -0
- package/templates/default/src/config/site.ts +2 -2
- package/templates/default/src/content.config.ts +15 -3
- package/templates/default/content/posts/blog_docs/01-quick-start.md +0 -162
- package/templates/default/content/posts/blog_docs/02-frontmatter.md +0 -277
- package/templates/default/content/posts/blog_docs/03-markdown-basic.md +0 -350
- package/templates/default/content/posts/blog_docs/04-containers.md +0 -331
- package/templates/default/content/posts/blog_docs/05-code-blocks.md +0 -388
- package/templates/default/content/posts/blog_docs/06-mermaid.md +0 -431
- package/templates/default/content/posts/blog_docs/07-video.md +0 -243
- package/templates/default/content/posts/blog_docs/08-latex.md +0 -382
- package/templates/default/content/posts/blog_docs/09-icons.md +0 -326
- package/templates/default/content/posts/blog_docs/10-sidebar.md +0 -445
- package/templates/default/content/posts/blog_docs/11-config.md +0 -334
- package/templates/default/content/posts/blog_docs/12-i18n.md +0 -355
- package/templates/default/content/posts/blog_docs/12-slides.mdx +0 -552
- package/templates/default/content/posts/blog_docs/README.md +0 -152
- package/templates/default/content/posts/blog_docs_en/get-started/05-deploy.md +0 -197
- package/templates/default/content/posts/blog_docs_en/guide/README.md +0 -59
- package/templates/default/content/posts/blog_docs_en/guide/features/README.md +0 -51
- package/templates/default/content/posts/blog_docs_en/guide/markdown/02-containers.md +0 -226
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Deployment
|
|
3
|
-
description: Build and deploy your blog to the web
|
|
4
|
-
pubDate: 2025-01-01
|
|
5
|
-
author: Astro Blog
|
|
6
|
-
categories:
|
|
7
|
-
- Documentation
|
|
8
|
-
tags:
|
|
9
|
-
- Getting Started
|
|
10
|
-
- Deployment
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
# Deployment
|
|
14
|
-
|
|
15
|
-
Time to share your blog with the world! Let's build and deploy.
|
|
16
|
-
|
|
17
|
-
## Build for Production
|
|
18
|
-
|
|
19
|
-
First, create a production build:
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm run build
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
This creates a `dist/` folder with static files:
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
dist/
|
|
29
|
-
├── index.html
|
|
30
|
-
├── posts/
|
|
31
|
-
│ └── hello-world/
|
|
32
|
-
│ └── index.html
|
|
33
|
-
├── assets/
|
|
34
|
-
│ ├── styles.css
|
|
35
|
-
│ └── scripts.js
|
|
36
|
-
└── ...
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
## Preview Locally
|
|
40
|
-
|
|
41
|
-
Test the build before deploying:
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
npm run preview
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
Visit `http://localhost:4321` to verify everything works.
|
|
48
|
-
|
|
49
|
-
## Deployment Options
|
|
50
|
-
|
|
51
|
-
Your static site can be hosted anywhere. Here are popular options:
|
|
52
|
-
|
|
53
|
-
### Vercel (Recommended)
|
|
54
|
-
|
|
55
|
-
::: tip Why Vercel?
|
|
56
|
-
- **Zero configuration** - Automatic Astro detection
|
|
57
|
-
- **Free tier** - Generous free hosting
|
|
58
|
-
- **Fast** - Global CDN
|
|
59
|
-
:::
|
|
60
|
-
|
|
61
|
-
1. Push your code to GitHub
|
|
62
|
-
2. Visit [vercel.com](https://vercel.com)
|
|
63
|
-
3. Import your repository
|
|
64
|
-
4. Click Deploy
|
|
65
|
-
|
|
66
|
-
Vercel automatically:
|
|
67
|
-
- Detects Astro
|
|
68
|
-
- Runs `npm run build`
|
|
69
|
-
- Deploys the `dist/` folder
|
|
70
|
-
|
|
71
|
-
### Netlify
|
|
72
|
-
|
|
73
|
-
1. Push code to GitHub
|
|
74
|
-
2. Visit [netlify.com](https://netlify.com)
|
|
75
|
-
3. Connect your repository
|
|
76
|
-
4. Set build settings:
|
|
77
|
-
- Build command: `npm run build`
|
|
78
|
-
- Publish directory: `dist`
|
|
79
|
-
|
|
80
|
-
### GitHub Pages
|
|
81
|
-
|
|
82
|
-
1. Add to `astro.config.mjs`:
|
|
83
|
-
|
|
84
|
-
```javascript
|
|
85
|
-
export default defineConfig({
|
|
86
|
-
site: 'https://username.github.io',
|
|
87
|
-
base: '/repo-name/', // If not using custom domain
|
|
88
|
-
});
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
2. Create `.github/workflows/deploy.yml`:
|
|
92
|
-
|
|
93
|
-
```yaml
|
|
94
|
-
name: Deploy to GitHub Pages
|
|
95
|
-
|
|
96
|
-
on:
|
|
97
|
-
push:
|
|
98
|
-
branches: [main]
|
|
99
|
-
|
|
100
|
-
jobs:
|
|
101
|
-
build:
|
|
102
|
-
runs-on: ubuntu-latest
|
|
103
|
-
steps:
|
|
104
|
-
- uses: actions/checkout@v4
|
|
105
|
-
- uses: actions/setup-node@v4
|
|
106
|
-
with:
|
|
107
|
-
node-version: 20
|
|
108
|
-
- run: npm install
|
|
109
|
-
- run: npm run build
|
|
110
|
-
- uses: actions/upload-pages-artifact@v3
|
|
111
|
-
with:
|
|
112
|
-
path: dist/
|
|
113
|
-
|
|
114
|
-
deploy:
|
|
115
|
-
needs: build
|
|
116
|
-
runs-on: ubuntu-latest
|
|
117
|
-
permissions:
|
|
118
|
-
pages: write
|
|
119
|
-
id-token: write
|
|
120
|
-
environment:
|
|
121
|
-
name: github-pages
|
|
122
|
-
url: ${{ steps.deployment.outputs.page_url }}
|
|
123
|
-
steps:
|
|
124
|
-
- uses: actions/deploy-pages@v4
|
|
125
|
-
id: deployment
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
3. Enable GitHub Pages in repository settings
|
|
129
|
-
|
|
130
|
-
### Cloudflare Pages
|
|
131
|
-
|
|
132
|
-
1. Connect repository at [pages.cloudflare.com](https://pages.cloudflare.com)
|
|
133
|
-
2. Set build settings:
|
|
134
|
-
- Framework preset: Astro
|
|
135
|
-
- Build command: `npm run build`
|
|
136
|
-
- Output directory: `dist`
|
|
137
|
-
|
|
138
|
-
## Environment Variables
|
|
139
|
-
|
|
140
|
-
For sensitive data, use environment variables:
|
|
141
|
-
|
|
142
|
-
```bash
|
|
143
|
-
# .env (local development)
|
|
144
|
-
PUBLIC_SITE_URL=https://myblog.com
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
Access in code:
|
|
148
|
-
|
|
149
|
-
```javascript
|
|
150
|
-
const siteUrl = import.meta.env.PUBLIC_SITE_URL;
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
::: warning Public vs Private
|
|
154
|
-
Variables prefixed with `PUBLIC_` are exposed to the browser.
|
|
155
|
-
Keep API keys and secrets without the `PUBLIC_` prefix.
|
|
156
|
-
:::
|
|
157
|
-
|
|
158
|
-
## Custom Domain
|
|
159
|
-
|
|
160
|
-
Most platforms support custom domains:
|
|
161
|
-
|
|
162
|
-
1. **Buy a domain** (Namecheap, Google Domains, etc.)
|
|
163
|
-
2. **Add to platform** - Follow platform-specific instructions
|
|
164
|
-
3. **Update DNS** - Point to platform's servers
|
|
165
|
-
4. **SSL** - Usually automatic (free with Let's Encrypt)
|
|
166
|
-
|
|
167
|
-
## Deployment Checklist
|
|
168
|
-
|
|
169
|
-
Before deploying, verify:
|
|
170
|
-
|
|
171
|
-
- [ ] `npm run build` completes without errors
|
|
172
|
-
- [ ] `npm run preview` shows site correctly
|
|
173
|
-
- [ ] All links work (no broken links)
|
|
174
|
-
- [ ] Images load properly
|
|
175
|
-
- [ ] Meta tags are set (title, description)
|
|
176
|
-
- [ ] Favicon is configured
|
|
177
|
-
|
|
178
|
-
## Continuous Deployment
|
|
179
|
-
|
|
180
|
-
With GitHub + Vercel/Netlify:
|
|
181
|
-
|
|
182
|
-
1. Push changes to `main` branch
|
|
183
|
-
2. Platform automatically rebuilds
|
|
184
|
-
3. Site updates in ~1 minute
|
|
185
|
-
|
|
186
|
-
```bash
|
|
187
|
-
git add .
|
|
188
|
-
git commit -m "Add new blog post"
|
|
189
|
-
git push origin main
|
|
190
|
-
# Site automatically updates!
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
---
|
|
194
|
-
|
|
195
|
-
Congratulations! You've completed the Get Started guide.
|
|
196
|
-
|
|
197
|
-
Continue learning with the [Writing Guide](../guide/) to master content creation.
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Writing Guide
|
|
3
|
-
description: Master content creation with Markdown, components, and advanced features
|
|
4
|
-
pubDate: 2025-01-01
|
|
5
|
-
author: Astro Blog
|
|
6
|
-
categories:
|
|
7
|
-
- Documentation
|
|
8
|
-
tags:
|
|
9
|
-
- Guide
|
|
10
|
-
- Writing
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
# Writing Guide
|
|
14
|
-
|
|
15
|
-
Learn how to create beautiful, engaging content for your blog.
|
|
16
|
-
|
|
17
|
-
## Markdown Basics
|
|
18
|
-
|
|
19
|
-
Start with the fundamentals:
|
|
20
|
-
|
|
21
|
-
| Guide | Description |
|
|
22
|
-
|-------|-------------|
|
|
23
|
-
| [Markdown Essentials](./markdown/) | Core syntax you'll use every day |
|
|
24
|
-
| [Containers](./markdown/02-containers) | Tips, warnings, and callout boxes |
|
|
25
|
-
| [Code Blocks](./markdown/03-code-blocks) | Syntax highlighting and features |
|
|
26
|
-
|
|
27
|
-
## Advanced Features
|
|
28
|
-
|
|
29
|
-
Take your content to the next level:
|
|
30
|
-
|
|
31
|
-
| Feature | Description |
|
|
32
|
-
|---------|-------------|
|
|
33
|
-
| [Mermaid Diagrams](./features/01-mermaid) | Flowcharts, sequences, and more |
|
|
34
|
-
| [LaTeX Math](./features/02-latex) | Mathematical formulas |
|
|
35
|
-
| [Video Embedding](./features/03-video) | YouTube, Bilibili, custom videos |
|
|
36
|
-
| [Icons](./features/04-icons) | Use icons from multiple libraries |
|
|
37
|
-
|
|
38
|
-
## Quick Reference
|
|
39
|
-
|
|
40
|
-
::: tip Common Patterns
|
|
41
|
-
```markdown
|
|
42
|
-
# Heading 1
|
|
43
|
-
## Heading 2
|
|
44
|
-
|
|
45
|
-
**bold** and *italic*
|
|
46
|
-
|
|
47
|
-
- Bullet list
|
|
48
|
-
1. Numbered list
|
|
49
|
-
|
|
50
|
-
[Link](https://example.com)
|
|
51
|
-

|
|
52
|
-
|
|
53
|
-
`inline code`
|
|
54
|
-
```
|
|
55
|
-
:::
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
Start with [Markdown Essentials](./markdown/)!
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Advanced Features
|
|
3
|
-
description: Diagrams, math formulas, videos, and icons
|
|
4
|
-
pubDate: 2025-01-01
|
|
5
|
-
author: Astro Blog
|
|
6
|
-
categories:
|
|
7
|
-
- Documentation
|
|
8
|
-
tags:
|
|
9
|
-
- Features
|
|
10
|
-
- Advanced
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
# Advanced Features
|
|
14
|
-
|
|
15
|
-
Take your content to the next level with these powerful features.
|
|
16
|
-
|
|
17
|
-
## Feature Overview
|
|
18
|
-
|
|
19
|
-
| Feature | Description |
|
|
20
|
-
|---------|-------------|
|
|
21
|
-
| [Mermaid Diagrams](./01-mermaid) | Flowcharts, sequences, Gantt charts |
|
|
22
|
-
| [LaTeX Math](./02-latex) | Mathematical formulas and equations |
|
|
23
|
-
| [Video Embedding](./03-video) | YouTube, Bilibili, custom videos |
|
|
24
|
-
| [Icons](./04-icons) | 5000+ icons from multiple libraries |
|
|
25
|
-
|
|
26
|
-
## Quick Examples
|
|
27
|
-
|
|
28
|
-
### Diagrams
|
|
29
|
-
|
|
30
|
-
```mermaid
|
|
31
|
-
graph LR
|
|
32
|
-
A[Write] --> B[Build]
|
|
33
|
-
B --> C[Deploy]
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Math
|
|
37
|
-
|
|
38
|
-
Inline: $E = mc^2$
|
|
39
|
-
|
|
40
|
-
Block:
|
|
41
|
-
$$
|
|
42
|
-
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
|
|
43
|
-
$$
|
|
44
|
-
|
|
45
|
-
### Icons
|
|
46
|
-
|
|
47
|
-
Use icons anywhere: <i class="fas fa-star"></i> <i class="ri-heart-fill"></i>
|
|
48
|
-
|
|
49
|
-
---
|
|
50
|
-
|
|
51
|
-
Start with [Mermaid Diagrams](./01-mermaid)!
|
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Containers
|
|
3
|
-
description: Use callout boxes for tips, warnings, and important information
|
|
4
|
-
pubDate: 2025-01-01
|
|
5
|
-
author: Astro Blog
|
|
6
|
-
categories:
|
|
7
|
-
- Documentation
|
|
8
|
-
tags:
|
|
9
|
-
- Markdown
|
|
10
|
-
- Containers
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
# Containers
|
|
14
|
-
|
|
15
|
-
Containers are special callout boxes that help highlight important information.
|
|
16
|
-
|
|
17
|
-
## Basic Syntax
|
|
18
|
-
|
|
19
|
-
```markdown
|
|
20
|
-
::: type
|
|
21
|
-
Content goes here
|
|
22
|
-
:::
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## Container Types
|
|
26
|
-
|
|
27
|
-
### Tip
|
|
28
|
-
|
|
29
|
-
For helpful suggestions:
|
|
30
|
-
|
|
31
|
-
```markdown
|
|
32
|
-
::: tip
|
|
33
|
-
This is a helpful tip for the reader.
|
|
34
|
-
:::
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
::: tip
|
|
38
|
-
This is a helpful tip for the reader.
|
|
39
|
-
:::
|
|
40
|
-
|
|
41
|
-
### Info
|
|
42
|
-
|
|
43
|
-
For informational notes:
|
|
44
|
-
|
|
45
|
-
```markdown
|
|
46
|
-
::: info
|
|
47
|
-
Here's some additional information.
|
|
48
|
-
:::
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
::: info
|
|
52
|
-
Here's some additional information.
|
|
53
|
-
:::
|
|
54
|
-
|
|
55
|
-
### Warning
|
|
56
|
-
|
|
57
|
-
For things to be careful about:
|
|
58
|
-
|
|
59
|
-
```markdown
|
|
60
|
-
::: warning
|
|
61
|
-
Be careful with this operation.
|
|
62
|
-
:::
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
::: warning
|
|
66
|
-
Be careful with this operation.
|
|
67
|
-
:::
|
|
68
|
-
|
|
69
|
-
### Danger
|
|
70
|
-
|
|
71
|
-
For critical warnings:
|
|
72
|
-
|
|
73
|
-
```markdown
|
|
74
|
-
::: danger
|
|
75
|
-
This action cannot be undone!
|
|
76
|
-
:::
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
::: danger
|
|
80
|
-
This action cannot be undone!
|
|
81
|
-
:::
|
|
82
|
-
|
|
83
|
-
### Note
|
|
84
|
-
|
|
85
|
-
For general notes:
|
|
86
|
-
|
|
87
|
-
```markdown
|
|
88
|
-
::: note
|
|
89
|
-
A side note for the reader.
|
|
90
|
-
:::
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
::: note
|
|
94
|
-
A side note for the reader.
|
|
95
|
-
:::
|
|
96
|
-
|
|
97
|
-
## Custom Titles
|
|
98
|
-
|
|
99
|
-
Add a custom title after the type:
|
|
100
|
-
|
|
101
|
-
```markdown
|
|
102
|
-
::: tip Pro Tip
|
|
103
|
-
This container has a custom title.
|
|
104
|
-
:::
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
::: tip Pro Tip
|
|
108
|
-
This container has a custom title.
|
|
109
|
-
:::
|
|
110
|
-
|
|
111
|
-
```markdown
|
|
112
|
-
::: warning Security Notice
|
|
113
|
-
Always validate user input!
|
|
114
|
-
:::
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
::: warning Security Notice
|
|
118
|
-
Always validate user input!
|
|
119
|
-
:::
|
|
120
|
-
|
|
121
|
-
## Rich Content
|
|
122
|
-
|
|
123
|
-
Containers support full Markdown inside:
|
|
124
|
-
|
|
125
|
-
```markdown
|
|
126
|
-
::: info Features
|
|
127
|
-
This blog supports:
|
|
128
|
-
- **Markdown** formatting
|
|
129
|
-
- `Code` snippets
|
|
130
|
-
- [Links](https://example.com)
|
|
131
|
-
|
|
132
|
-
| Feature | Status |
|
|
133
|
-
|---------|--------|
|
|
134
|
-
| Images | ✅ |
|
|
135
|
-
| Tables | ✅ |
|
|
136
|
-
:::
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
::: info Features
|
|
140
|
-
This blog supports:
|
|
141
|
-
- **Markdown** formatting
|
|
142
|
-
- `Code` snippets
|
|
143
|
-
- [Links](https://example.com)
|
|
144
|
-
|
|
145
|
-
| Feature | Status |
|
|
146
|
-
|---------|--------|
|
|
147
|
-
| Images | ✅ |
|
|
148
|
-
| Tables | ✅ |
|
|
149
|
-
:::
|
|
150
|
-
|
|
151
|
-
## Details (Collapsible)
|
|
152
|
-
|
|
153
|
-
Create expandable sections:
|
|
154
|
-
|
|
155
|
-
```markdown
|
|
156
|
-
::: details Click to expand
|
|
157
|
-
This content is hidden by default.
|
|
158
|
-
You can put lots of content here.
|
|
159
|
-
:::
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
::: details Click to expand
|
|
163
|
-
This content is hidden by default.
|
|
164
|
-
You can put lots of content here.
|
|
165
|
-
:::
|
|
166
|
-
|
|
167
|
-
### Details with Custom Title
|
|
168
|
-
|
|
169
|
-
```markdown
|
|
170
|
-
::: details View the solution
|
|
171
|
-
```javascript
|
|
172
|
-
function solve() {
|
|
173
|
-
return 42;
|
|
174
|
-
}
|
|
175
|
-
```
|
|
176
|
-
:::
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
::: details View the solution
|
|
180
|
-
```javascript
|
|
181
|
-
function solve() {
|
|
182
|
-
return 42;
|
|
183
|
-
}
|
|
184
|
-
```
|
|
185
|
-
:::
|
|
186
|
-
|
|
187
|
-
## Nested Containers
|
|
188
|
-
|
|
189
|
-
You can nest containers (use more colons for outer):
|
|
190
|
-
|
|
191
|
-
```markdown
|
|
192
|
-
:::: warning Important
|
|
193
|
-
This is important!
|
|
194
|
-
|
|
195
|
-
::: tip
|
|
196
|
-
A tip inside a warning.
|
|
197
|
-
:::
|
|
198
|
-
::::
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
:::: warning Important
|
|
202
|
-
This is important!
|
|
203
|
-
|
|
204
|
-
::: tip
|
|
205
|
-
A tip inside a warning.
|
|
206
|
-
:::
|
|
207
|
-
::::
|
|
208
|
-
|
|
209
|
-
## Best Practices
|
|
210
|
-
|
|
211
|
-
::: tip When to Use Containers
|
|
212
|
-
- **tip** - Helpful suggestions, best practices
|
|
213
|
-
- **info** - Background information, context
|
|
214
|
-
- **warning** - Potential issues, things to watch
|
|
215
|
-
- **danger** - Critical errors, data loss risks
|
|
216
|
-
- **note** - General observations
|
|
217
|
-
- **details** - Optional content, long examples
|
|
218
|
-
:::
|
|
219
|
-
|
|
220
|
-
::: warning Don't Overuse
|
|
221
|
-
Too many containers can be distracting. Use them sparingly for truly important information.
|
|
222
|
-
:::
|
|
223
|
-
|
|
224
|
-
---
|
|
225
|
-
|
|
226
|
-
Next: Master [Code Blocks](./03-code-blocks) for beautiful code snippets.
|