Merinda - HTML Personal Blog Template Inspired by Medium

# 项目简介 Merinda 是一款受 Medium 启发设计的现代博客 HTML 模板，采用 Bootstrap 框架构建，集成响应式布局与暗色模式切换功能，适合搭建个人博客、写作平台或内容资讯网站。 ## 技术栈 - Bootstrap 5（响应式 CSS 框架） - jQuery（交互逻辑） - Fontello（图标字体） - Bunny Fonts（Google Fonts 替代方案） ## 项目结构 ``` 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 ``` ## 核心文件说明 - `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` — 文档页滚动导航与返回顶部逻辑 ## 快速开始 1. 进入 `1.merinda-template` 目录 2. 直接用浏览器打开 `index.html`；或启动本地服务器： ```bash npx serve . ``` 3. 文档参考 `2.document/index.html` ## 使用建议 - 模板内置暗色模式切换（`dark-light-toggle`），可直接复用该交互 - 移动端导航需配合 `assets/js` 中的脚本使用，确保 jQuery 已正确引入 - 替换 Logo 与文章内容后即可快速上线个人博客