NuxtVue博客

BlogiNote — Nuxt 博客模板

作者 Benbinbin

BlogiNote 是一个基于 Nuxt Content 的博客与笔记主题，用 Markdown、JSON、CSV 等文件生成静态站点，提供列表页、全文搜索、树状目录和标题折叠等阅读功能。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

基于 Nuxt Content 模块，用 Markdown、JSON、CSV 等文件生成静态页面

02

支持 MDC 语法，可在 Markdown 中直接使用 Vue 组件

03

提供列表页，便于筛选和查询文章

04

由 Pagefind 提供全文搜索

05

用 D3.js 绘制思维导图形式的树状文章目录

06

标题可折叠，用于展开或收起后续内容，方便阅读长文

模板详细介绍

BlogiNote 是一个 Nuxt 主题（Nuxt Theme），建立在 Nuxt Content 模块之上，用于把博客文章和笔记生成为静态网站。内容以 Markdown、JSON、CSV 等文件驱动，页面由这些内容文件生成。

在写作与阅读方面，主题支持 MDC 语法，可以在 Markdown 文件中直接使用 Vue 组件；提供列表页用于筛选和查询文章；全文搜索由 Pagefind 提供；文章大纲以 D3.js 绘制的思维导图形式呈现；标题可以折叠，用于展开或收起其后的内容，便于阅读长文。

使用方式上，官方建议通过配套的 BlogiNote-Starter-Template 起步模板来搭建自己的项目，仓库中另有在线演示、在线试玩（StackBlitz）和独立文档站点。开发者也可以直接基于 BlogiNote 构建自己的模板，例如加入 Remark 插件扩展 Markdown 语法，或编写 Vue 组件增加自定义功能。

许可方面，仓库采用 MIT 许可，允许免费使用、修改、商用和分发该版本代码，分发时需保留版权声明和完整 MIT 许可声明；演示图片、字体、图标等第三方素材需按各自许可单独核对。

Nuxt博客

适合你的项目吗？

适用场景

  • 搭建以 Markdown 写作的个人博客
  • 整理并发布结构化的学习笔记
  • 需要全文搜索和文章大纲导航的内容站点
  • 在 Markdown 中嵌入 Vue 组件做自定义内容展示

适合人群

  • 使用 Nuxt 和 Nuxt Content 的开发者
  • 希望以 Markdown 等文件驱动静态博客或笔记站的人
  • 需要全文搜索、树状目录、标题折叠等阅读功能的站点作者
  • 想基于现有主题二次开发、扩展 Markdown 语法或自定义组件的人

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    官方建议通过 BlogiNote-Starter-Template 起步模板创建项目，具体步骤见文档站点的入门教程

  2. 2

    仓库提供在线演示、StackBlitz 在线试玩和独立文档站点可供参考

  3. 3

    代码采用 MIT 许可，分发时需保留原作者版权声明和完整 MIT 许可声明

  4. 4

    演示图片、字体、图标等第三方素材需按各自许可单独核对，不能仅凭代码的 MIT 许可判断

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/Benbinbin/BlogiNote/blob/main/LICENSEhttps://github.com/Benbinbin/BlogiNote/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 81 / 100
技术栈
Nuxt · Vue
网站类型
博客
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2024-10-30
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 13f3cfa0da99f96524c12ced17f28c734c6b62aefc551702ef4fd7ad952e10ae

2026-10-01T00:34:52.685Z

来源文件 / 仓库
[![BlogiNote](./public/cover.jpg)](https://bloginote.benbinbin.com/)

# BlogiNote
BlogiNote is a [Nuxt Theme](https://nuxt.com/docs/guide/going-further/layers) based on [Nuxt Content module](https://content.nuxtjs.org/), it can generate static website to show your blog posts and notes with flexible layouts and multiple optimizations.

:link: [Demo](https://bloginote.benbinbin.com/)

:joystick: [Play Online](https://stackblitz.com/edit/github-qrmhoj)

:pencil: [Starter Template](https://github.com/Benbinbin/BlogiNote-Starter-Template)

:bookmark_tabs: [Documentation](https://bloginote-documentation.vercel.app/)

## Features
:sparkles: Content driving: generate web pages based on markdown, json, csv and more

:sparkles: Vue components in Markdown: with [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc) you can use vue components inside markdown file

:sparkles: List Page: a list page make the filter and query articles more convenient

:sparkles: Full text search: you can search content everywhere powered by [Pagefind](https://pagefind.app/) 🎥 [Demo](https://youtu.be/OotBwk88Y38)

:sparkles: Tree Catalog: you can catch the outline of the article easily with a Mind Map powered by [D3.js](https://d3js.org/) 🎥 [Demo](https://youtu.be/dxR8Oh0a4E4)

:sparkles: Toggle Heading: you can toggle the heading to show or hide the following content, it's so useful to read a long long post 🎥 [Demo1](https://youtu.be/2OVF7ZLpopE) [Demo2](https://youtu.be/U8ylBVHekRM)

:muscle: it will keep evolving to add more features

🎥 More demo please checkout the [Youtube playlist](https://youtube.com/playlist?list=PLqLRbo_6ezAEpy7KjFbXTgjndhJr0M5Zj)

## Usage
Use the [starter template](https://github.com/Benbinbin/BlogiNote-Starter-Template) to build your own project with the BlogiNote theme.

:point_right: You can check out [this tutorial](https://bloginote-documentation.vercel.app/article/tutorial/get-start) for more information.

## Develop
You can also build your own template based on BlogiNote, adding some Remark plugins to extend the markdown syntax, or building some Vue components to add more custom features.

## License

[MIT](./LICENSE)

## Feedback
If you have any problem or suggestion about this project, feel free to open an [issue](https://github.com/Benbinbin/BlogiNote/issues/new) in Github or contact with me by email <a href="mailto:[email protected]">[email protected]</a>
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

alpine-theme

alpine-theme

Alpine 是一个以极简为设计核心的博客主题，基于 Nuxt 与 Nuxt Content 构建。 它的特别之处在于，你可以从一个简单的个人资料页开始，逐步扩展成一个完整的博客。

Nuxt · 博客

bael-template

bael-template

Brutalist Blog theme for Netlify CMS

Nuxt · 博客

bloggrify

bloggrify

Run a blog from Markdown files. Themes, SEO, analytics, newsletter and comments preconfigured. Like Docus, but…

Nuxt · 博客

Nuxt_Mkdirs

Nuxt_Mkdirs

🚀 Open-source directory website template built with Nuxt 4 + Sanity CMS. 3 layouts, OAuth, payments, blog & m…

Nuxt · 博客

nuxt-content-template

nuxt-content-template

An opinionated Nuxt Content template built for markdown blogs

Nuxt · 博客

nuxt3-microcms-blog

nuxt3-microcms-blog

A Nuxt3 blog template with microCMS + Vuetify3

Nuxt · 博客