Lofi - 极简、纯粹、黑白风格的 Hexo 博客主题
好久没写博客了,各位好久不见。这一年真的有好多话想说,期待我今年的午马年度总结吧,把今年一年的事情,都和大家聊一聊。 原本的博客程序,使用的是我毕业论文开发的 DaRM,现在回过头来看,当年这个项目写的跟屎一样,我已经彻底的放弃维护这个项目,转投 Hexo 的阵营了。 好久没写博客,希望带来点变化,花了半天时间写出来这个主题,总体来说还是比较满意的,别的没什么话说,希望2026年,能对我好一些。 一个新的主题新的主题,希望能带来新的开始。 Lofi 极简、纯粹、黑白风格的 Hexo 博客主题。 A minimalist, black & white theme for Hexo. 项目地址:Lofi 介绍 (Introduction) Lofi 是一款专为专注于写作的人设计的 Hexo 主题。它剥离了所有不必要的装饰,只保留最核心的阅读体验。 核心特点: 极简黑白设计:经典的报纸风格,耐看且不干扰阅读。 超快加载:体积小巧,没有复杂的动画和沉重的库。 响应式布局:在手机、平板和电脑上都有完美的阅读体验。 PJAX 支持:页面切换无刷新,体验丝般顺滑。 评论系统:内置 Artalk 评论系统支持(自托管的隐私友好评论系统)。 站内搜索:原生支持本地搜索功能。 安装指南 (Installation) 就像给手机换壁纸一样简单,只需三步即可使用。 第一步:下载主题 进入你的 Hexo 博客目录,打开终端(命令行),运行以下命令: 1 git clone https://github.com/spatiostu/lofi.git themes/lofi 或者,你也可以点击 Lofi 进入仓库,直接点击右上角的 Code -> Download ZIP,下载后解压,把文件夹改名为 lofi,然后放入博客的 themes 目录下。 第二步:启用主题 打开博客根目录下的 _config.yml 文件(不是主题目录下的那个),找到 theme 这一行,修改为: 1 theme: lofi 第三步:安装必要插件 为了让主题的搜索和渲染功能正常工作,你需要安装几个小插件。在博客根目录下运行: 1 npm install hexo-renderer-ejs hexo-generator-searchdb --save 配置指南 (Configuration) 主题的配置文件位于 themes/lofi/_config.yml。你可以根据需要修改它。 1. 菜单设置 (Menu) 设置导航栏的链接。 1 2 3 4 5 menu: 首页: / 归档: /archives 友链: /friends 关于: /about 需在source目录下创建两个页面文档:about/index.md、friends/index.md。每个文档的内容可以自定义,例如: 1 2 3 4 5 6 7 8 9 10 --- title: 友情链接 date: 2024-03-20 12:00:00 type: friends --- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <a href="https://www.FriendDomain.com/" target="_blank" class="friend-card"> <div class="font-bold text-lg mb-2">FriendName</div> <div class="text-xs font-mono opacity-60">FriendDescription</div> </a> 2. 个人信息 (Profile) 设置你的头像和社交媒体链接。 1 2 3 4 5 avatar: /images/avatar.jpg # 头像路径 favicon: /images/favicon.png # 网站图标 description: "这里写一句你的座右铭" social: github: https://github.com/yourname 3. 评论系统 (Comments) 本主题内置了 Artalk 评论系统。如果你部署了 Artalk Server,可以在这里配置: 1 2 3 4 artalk: enable: true server: 'https://your-artalk-server.com' site: '你的站点名称' 如果不需要评论功能,将 enable 改为 false 即可。 4. 底部信息 (Footer) 自定义页面底部的版权信息。 1 2 footer: copyright: "© 2025 你的名字" 5. CDN 配置 为了加速主题静态资源加载,你可以配置 CDN。 1 2 3 cdn: enable: true url: https://res.your-domain.com/ 如不需要 CDN 加速,将 enable 改为 false 即可。 如果有什么功能需求,也可以在评论区留言一下,如果是不错的提议,我会给主题加上!