项目简介link

Merinda 是一款受 Medium 启发设计的现代博客 HTML 模板，采用 Bootstrap 框架构建，集成响应式布局与暗色模式切换功能，适合搭建个人博客、写作平台或内容资讯网站。

技术栈link

• Bootstrap 5（响应式 CSS 框架）
• jQuery（交互逻辑）
• Fontello（图标字体）
• Bunny Fonts（Google Fonts 替代方案）

项目结构link

merindahtml-10/merinda-html-v4.1-unzip-first/
  1.merinda-template/
    index.html          # 首页（文章列表）
    single.html         # 文章详情页
    categories.html     # 分类列表页
    archive.html        # 归档页
    author.html         # 作者页
    contact.html        # 联系页
    404.html            # 404 错误页
    typography.html     # 排版示例页
    search.html         # 搜索页
    assets/
      css/
        bootstrap.css
        style.css       # 主题主样式
        widgets.css
        fontello.css
      images/
  2.document/
    index.html          # 官方文档页
    css/styles.css
    js/scripts.js

核心文件说明link

• 1.merinda-template/index.html — 博客首页，展示文章列表与侧边栏导航
• 1.merinda-template/single.html — 单篇文章详情页模板
• 1.merinda-template/assets/css/style.css — 主题核心样式，定义布局与主题色
• 1.merinda-template/assets/css/bootstrap.css — Bootstrap 框架样式，提供响应式栅格
• 2.document/index.html — 模板官方使用文档（含目录导航）
• 2.document/js/scripts.js — 文档页滚动导航与返回顶部逻辑

快速开始link

1. 进入 1.merinda-template 目录
2. 直接用浏览器打开 index.html；或启动本地服务器：
   bashcontent_copyCopy

   npx serve .
   

3. 文档参考 2.document/index.html

使用建议link

• 模板内置暗色模式切换（dark-light-toggle），可直接复用该交互
• 移动端导航需配合 assets/js 中的脚本使用，确保 jQuery 已正确引入
• 替换 Logo 与文章内容后即可快速上线个人博客