atqq / sugar-blog

✍️📚我写博客的地方🤪🤪🤪记录随笔与学习笔记，仓库包含：博客内容，博客主题、博客模板、vitepress离线全文搜索插件、VitePress RSS 支持插件；a blog theme use vitepress

粥里有勺糖

你的指尖,拥有改变世界的力量

博客主题：@sugarat/theme

仓库介绍

这是一个 monorepo 仓库，目前有如下四个部分

• blogpress：博客内容本身
• @sugarat/theme：博客分离出的通用VitePress主题
• 创建主题模板项目CLI：用于快速创建和作者一样风格的博客
• vitepress-plugin-pagefind：基于pagefind实现的VitePress离线全文搜索支持插件
• vitepress-plugin-rss：基于 feed 实现的 VitePress RSS 支持插件

快速创建博客模板

支持多种包管理工具

# With PNPM:
pnpm create @sugarat/theme

# With NPM:
npm create @sugarat/theme@latest

# With Yarn:
yarn create @sugarat/theme

# With Bun
bun create @sugarat/theme

运行本项目

这是一个 monorepo 仓库，博客基于vitepress搭建，运行前需先安装依赖，构建主题包

① 先安装 pnpm

npm i -g pnpm
# 安装依赖
pnpm install

② 构建依赖包的npm包

pnpm buildlib

③ 运行

# 运行博客
pnpm dev

# 运行主题包文档
pnpm dev:theme

📝关于内容

大前端开发相关知识，包含但不限于前端

记录面试中所遇的问题，并整理相关知识点，分模块进行了梳理

🙊关于笔者

21年毕业，目前就职于美团，热爱大前端开发技术

热爱开源，乐于分享

🔗个人相关链接

• 粥里有勺糖●博客园
• ATQQ●GitHub
• ES6笔记●GITBOOK
• blog●GitBook
• 掘金

☎️联系我

如对博客内容，知识，排版等有疑问或者建议，欢迎邮件和我联系

邮箱:[email protected]

☕赞赏

微信	微信赞赏	支付宝

Star History

Stargazers over time

Project Status

Contributors

Thanks to all the contributors!

Made with contrib.rocks.

sugar-blog's Issues

文章frontMatter使用本地cover，部署后在index页面图片路径错误

1. 使用默认cover，自动提取第一张作为封面图，博客内图片地址是/images/f1ce52f08ad9864f3bc30d2c2f9b7336.jpeg
2. 文章的图片地址build后会变成/assets/f1ce52f08ad9864f3bc30d2c2f9b7336.dO6K0w_d.jpeg，但index封面图还是/images/f1ce52f08ad9864f3bc30d2c2f9b7336.jpeg

---

不确定vitepress编译后的静态文件目录是否都在assets，如果是的话修复就比较简单，直接判断是否是项目静态文件，如果是的话直接把路径强行变成/assets/xxx。
不确定是否有其他影响，有什么其他配置可以更优雅的解决这个问题更好~

如何被搜索引擎收录网址

比如百度的标签验证，应该如何做呢

打包会出现问题

'pagefind' is not recognized as an internal or external command,
operable program or batch file.
build error:
Error: Command failed: npx pagefind --source docs.vitepress\dist --exclude-selectors "div.aside, a.header-anchor"
at checkExecSyncError (node:child_process:885:11)
at execSync (node:child_process:957:15)
at vitepressConfig.buildEnd (F:\vitepress\my-blog\node_modules.pnpm@[email protected][email protected][email protected]\node_modules@sugarat\theme\node.js:329:49)
at build (file:///F:/vitepress/my-blog/node_modules/.pnpm/vitepress@1.0.0-beta.5_@algolia[email protected][email protected][email protected]/node_modules/vitepress/dist/node/serve-d0f912b9.js:48768:59)
 ELIFECYCLE  Command failed with exit code 1.
大佬有空解决一下

首页精选文章跳转错误的问题

在没有配置丢掉 .html 的情况下，点击首页精选文章跳转，页面会错误显示，加上 .html 显示正常。
示例：

Feature：集成sitemap

参考： vuejs/vitepress#520

Mermaid流程图打包问题

Mermaid流程图
pnpm dev 开发环境下运行博客显示没有问题
如果开始pnpm build 打包 显示不出来问题不知道什么原因造成?

博客仓库:
https://github.com/ZerxZ/zerxz-blog
博客网站链接:
https://zerxzonline.com/godot/godot_execution_order.html

标签bug

复现步骤：

1. 选个标签，如 javascript，url变成了：/?tag=javascript&type=warning
2. 点击头部VPNavBarTitle区域，url去掉了标签，url变成了: /
3. 右边的BlogHomeTags上方没清除标签，而且中间文章列表没变成全部列表，还停留在javascript标签相关的文章列表。

帮忙看着这个报错，这个路径下没有node.js文件

failed to load config from /Users/liuguisheng/code/github/sugar-blog/packages/blogpress/.vitepress/config.ts
failed to start server. error:
Error: Cannot find module '/Users/liuguisheng/code/github/sugar-blog/packages/blogpress/node_modules/@sugarat/theme/node.js'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
at resolveExports (node:internal/modules/cjs/loader:482:14)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/liuguisheng/code/github/sugar-blog/packages/blogpress/.vitepress/config.ts:35:19)
at Module._compile (node:internal/modules/cjs/loader:1103:14)

[idea]右侧导航栏能否实现固定,不随着文章列表的滚动而随之滚动

如上图,我目前想实现右侧导航栏固定,但我调试了很久,无法成功,会影响到左侧文章列表的布局与移动端的适配,特此来请教有无好的解决方式~

升级主题后，无法运行

复现步骤：

pnpm up @sugarat/theme
pnpm add vitepress@latest

package.json

{
  "name": "vitepress-blog",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@sugarat/theme": "^0.1.50",
    "element-plus": "^2.4.1",
    "vue": "^3.3.7"
  },
  "devDependencies": {
    "sass": "^1.69.5",
    "typescript": "^4.9.5",
    "vitepress": "1.0.0-rc.24"
  },
  "author": "Deer404",
  "license": "MIT"
}

报错信息

failed to load config from /Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/docs/.vitepress/config.ts
failed to start server. error:
Error [ERR_REQUIRE_ESM]: require() of ES Module /Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitepress-plugin-mermaid/dist/vitepress-plugin-mermaid.umd.js from /Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@sugarat/theme/node.js not supported.
vitepress-plugin-mermaid.umd.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename vitepress-plugin-mermaid.umd.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitepress-plugin-mermaid/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at _require.extensions.<computed> [as .js] (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66343:17)
    at getMarkdownPlugins (/Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@sugarat/theme/node.js:296:35)
    at getThemeConfig (/Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@sugarat/theme/node.js:583:26)
    at Object.<anonymous> (/Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/docs/.vitepress/config.ts:26:48)
    at _require.extensions.<computed> [as .js] (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66340:24)
    at loadConfigFromBundledFile (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66348:21)
    at async loadConfigFromFile (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66171:28)
    at async resolveUserConfig (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vitepress/dist/node/serve-FiwKdDMo.js:19878:27)
    at async resolveConfig (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vitepress/dist/node/serve-FiwKdDMo.js:19811:48)
    at async createServer (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vitepress/dist/node/serve-FiwKdDMo.js:70084:18)
    at async createDevServer (file:///Volumes/DataDocument/CodeSpace/Deer404/blog_vitepress/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vitepress/dist/node/cli.js:405:20)

发布时间都显示为0秒前

md文档的时间已经设置，在发布页里面显示时间都为0秒前

这里显示的时间是正确的

demo主题运行的时候head属性不加载,页签上不显示小图标

当文章长度不足一个屏幕高度时, 评论按钮会显示错误

很喜欢作者的作品, 确实是我用过最喜欢的VitePress主题!

在开启评论之后出现了一个问题: https://miaobuao.github.io/posts/%E5%AE%89%E8%A3%85electron%E5%8D%A1%E4%BD%8F.html

如图, 当文章比较短的时候, 按照逻辑应该是不显示评论按钮, 但是却居中显示了, 应该是BUG

当切换到一个较长的文章, 再重新切换回出现问题的短文章时, 评论按钮就被隐藏了.

rss plugin: frontmatter.publish 更多解释？

我想找一个控制文章是否输出到 RSS 的选项，看到 frontmatter.publish 很适合。

Q：是否只影响 rss plugin 生成逻辑，不影响 vitepress 其他部分？比如 sitemap 中还是包含了 publish = false 的文章

提几个优化的建议

首先得夸一下，这个主题是我这几天在github上找到的基于vitepress的体验最好的主题。

基于这个主题，我构建了自己的博客ZQ-XU，非常感谢owner的分享！

在构建个人博客期间，我也有些许的建议，希望owner在后续的开发中可以考虑一下：

• 多语言的支持，当前貌似是只支持单语种；
• 首页文章和左侧边栏的目录(相关文章)支持自定义/排序，当前貌似是根据当前路径下的文件根据date属性自动排序的(如果没有指定date属性，那么更改了以前的文章，则会打乱原来的顺序)；
• 背景图片的配置，我是参考vitepress的文档，在styles的css文件中覆盖了background-image属性；
• 右侧边栏的标题默认是支持到二级标题的，我是参考了vitepress的文档，根据属性'outline'来配置的，这个可以考虑补充到文档中(对于新人会比较友好)。

祝好~

更新主题后，分页样式颜色被覆盖导致显示错误

大佬的博客为啥没有用自己做的本地搜索插件。

https://github.com/ATQQ/sugar-blog/blob/74814ed44a3ffe0576daa5476b2b24fdf16d32dc/packages/blogpress/.vitepress/config.ts#L142C8-L142C8

文章不设置title情况下默认取一级标题，会去掉其中分隔的空格

建议保留中间的空格~

若干个问题

以下方案可能是治标不治本的，我前端太菜了，还请作者有空时看看怎么解决。

环境

• OS：Windows 11 23H2 22631.3296 X64
• Node：v20.10.0 X64
• IDE：VSCode

pnpm install

报错：

删除 packages/theme/package.json 下的

"pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": [
        "@algolia/client-search",
        "search-insights"
      ]
    }
  }

解决

pnpm dev

如果使用 pnpm --filter 'blogpress' dev

报错：No projects matched the filters...

改为 pnpm -r --filter=./packages/blogpress dev 解决

pnpm buildlib

如果使用 pnpm run '/^build:.*/'

报错：

改为 pnpm run \"/^build:.*/\"
报错：No projects matched the filters...

改为 pnpm -r --filter=./packages/** build 解决

但是有很多这种警告，虽然不影响启动，但感觉还是要解决的：

启动后

控制台警告：[Vue warn]: Component "Mermaid" has already been registered in target app.

packages/theme/src/index.ts
注册前先判断是否已经注册过

    if (!ctx.app.component('Mermaid')) {
      ctx.app.component('Mermaid', Mermaid as any)
    }

上线后,更新时间显示为8小时前,本地正常显示

index.md问题

还记得index.md，vitepress不能显示这个markdown，最后你怎么解决了

标题栏如何配置？

我在docs/.vitepress/config.ts的const blogTheme = getThemeConfig({nav:[{text:'home',link:'/'}]....
不起作用呢

mac打包失败

Binary failed to download — package expected to have downloaded the binary to /Users/june/Desktop/my_blog/node_modules/.pnpm/[email protected]/node_modules/pagefind/bin/pagefind_extended during its postinstall
Do you have install scripts disabled for npm?
Try running npm config set ignore-scripts false and re-installing.
Otherwise, your platform might not be supported. Open an issue on GitHub!
build error:

pagefind 不支持mac吗

rss插件里面，可以加一个鼠标移上去的title属性说明

[feat] vitepress-plugin-pagefind 可否增加类似 minisearch 的搜索预览

如题，在使用 vitepress 内置的 minisearch 的时候会出现预览的选项，可否增加该功能

tabs支持

          > 我这看不到你发的图片，看着你没有上传成功

docsify其中的一个组件

<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>

Originally posted by @wanghuohuoyan in #94 (comment)

请教下，样式怎么修改

左边和右边的宽度有块区域空着

我想改下宽度，还有中间区域，宽度也比较窄，我也想改宽些。
java开发，前端开始学🤣，以前用的docsify

搜索内容是否可以忽略大小写

感觉你的这个插件很好用，但是我在使用的时候遇到这样一个问题，在搜索框里面输入的内容并无法过滤文章中的大小写字母。这样感觉会损失效率，你觉得呢？

最低需要vitepress哪个版本呢

不支持0.22.4版本吗

文案错误

技术周刊第79期，“现代的 js 中，主要存在 CommonJS（CJS） 与 CommonJS（CJS） 两种模块系统。”，这段文案cjs写重复了😁

更新0.2.30，mac打包内存溢出

进入文章后，无法返回到文章列表

文章列表分页后，比如进入列表第三页某个文章后，无法返回到第三页文章列表，点浏览器的回退直接回到首页了。

发布时间显示为NaN-aN-aN

https://miaobuao.github.io/posts/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86.html

请问本项目能运行吗

按照提示，pnpm i 之后pnpm dev显示用问题，No projects matched the filters in "E:\GitHub\sugar-blog"

bug: 当文章页面位置在最顶部时，右侧大纲会在最后一个标题激活

查看了vitepress文档木有这个问题，看了下源码，但是没有头绪

此时处于页面最上方，效果如下：

编写的其中一个文档引入css样式，发布时会导致全部md文件都引入这个样式

我在其中一个文档中引入自动加标题的css样式

<style type="text/css">
    h1 { counter-reset: h2counter; }
    h2 { counter-reset: h3counter; }
    h3 { counter-reset: h4counter; }
    h4 { counter-reset: h5counter; }
    h5 { counter-reset: h6counter; }
    h6 { }
    h2:before {
      counter-increment: h2counter;
      content: counter(h2counter) ".\0000a0\0000a0";
    }
    h3:before {
      counter-increment: h3counter;
      content: counter(h2counter) "."
                counter(h3counter) ".\0000a0\0000a0";
    }
    h4:before {
      counter-increment: h4counter;
      content: counter(h2counter) "."
                counter(h3counter) "."
                counter(h4counter) ".\0000a0\0000a0";
    }
    h5:before {
      counter-increment: h5counter;
      content: counter(h2counter) "."
                counter(h3counter) "."
                counter(h4counter) "."
                counter(h5counter) ".\0000a0\0000a0";
    }
    h6:before {
      counter-increment: h6counter;
      content: counter(h2counter) "."
                counter(h3counter) "."
                counter(h4counter) "."
                counter(h5counter) "."
                counter(h6counter) ".\0000a0\0000a0";
    }
</style>

dev的时候显示正常，build后每个md文件都加入了这个样式
特别是首页标题这里都自动加了数字
首页内容如下

layout: home
blog:
    name: windstarry的Blog
    motto: 记录学习,记录生活
    inspiring: 知识是一点一滴积累起来的...
    pageSize: 6

发布后显示

dev的显示

_pagefind/pagefind.js 404

@sugarat/theme版本 0.1.30

在html中有这个动态导入代码

import('/_pagefind/pagefind.js')
  .then((module) => {
    window.__pagefind__ = module
  })
  .catch(() => {
    console.log('not load /_pagefind/pagefind.js')
  })