
欢迎来到我的博客
这是第一篇博客文章,介绍了这个博客的主要功能和特点。
博主
#介绍
#博客
#Astro
欢迎来到我的博客!
这是我的第一篇博客文章,很高兴您能来访问!
关于这个博客
这个博客使用了现代化的技术栈构建:
- Astro - 静态站点生成器
- Vue.js - 响应式组件
- Tailwind CSS - 样式框架
- MDX - 增强的 Markdown
本博客的特色
以下是这个博客的主要特色:
🎉
欢迎特性
📝 MDX 支持 可以在 Markdown 中直接使用 Astro 和 Vue 组件,实现丰富的内容交互。
🎉
欢迎特性
🧩 组件化 采用模块化设计,每篇文章都可以有自己的本地组件,与全局组件完美结合。
🎉
欢迎特性
⚡ 高性能 基于 Astro 的静态生成,实现极致的加载速度和 SEO 优化。
博客统计
🎯 博客统计
2
文章数量
15
组件数量
128
访问次数
5
在线天数
组件优先级演示
这个博客系统实现了 文章级组件优先于全局组件 的机制:
🎉
组件优先级演示 📍 Article-level
这是文章级的 Alert 组件,它覆盖了全局的 Alert 组件!注意右上角的 ”📍 Article-level” 标记和独特的渐变样式。
💡
优先级规则 📍 Article-level
组件解析优先级:
- 📍 Article-level: 文章级组件 (最高优先级)
- 📝 Page-level: 页面级组件 (中等优先级)
- 🌐 Global: 全局组件 (最低优先级)
组件展示
1. 组件支持
您可以在 Markdown 中直接使用 Vue 组件:
计数器演示
这是一个在 MDX 中使用的 Vue 组件
2. 样式组件
还可以使用自定义的 Astro 组件:
💡
提示 📍 Article-level
这是一个信息提示框组件,使用了 Tailwind CSS 样式。
3. 代码高亮
支持语法高亮的代码块:
// 这是一个 JavaScript 示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('World');
总结
感谢您的阅读,期待与您分享更多精彩内容!