📝

📅 {{ .Date.Format "2006年1月2日" }} 👤 {{ .Params.author }} 🏷️ {{ range .Params.tags }} {{ . }} {{ end }}

本文展示如何在 Hugo 中使用 HTML 创建丰富的文章内容，包括：

🎨 响应式卡片网格

完全用 HTML 和 CSS 实现的响应式布局

🔧

使用 CSS Grid 和 Flexbox 创建任意复杂的布局，不再受 Markdown 的限制。

🎯

添加按钮、表单、折叠面板等交互元素，提升用户体验。

📊

嵌入图表、进度条、统计图等数据展示元素。

📊 高级表格示例

支持合并单元格、固定表头等高级功能

📁 点击展开详细说明

这是详细内容区域。可以放置任意 HTML 内容：


<div class="card">
    <h3>标题</h3>
    <p>内容</p>
</div>


.card {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


document.querySelector('.card').addEventListener('click', function() {
    alert('卡片被点击！');
});

月度数据趋势图

创建更丰富、更交互的内容体验

立即尝试查看文档