使用Hexo和Stellar搭建个人博客网站【超详细贴心保姆级教程💖】

详细阅读前可以先去阅读常见错误

在此提前说明个人口语化，请谅解

Front-matter也就是文章开头的---划定的区域，我个人叫头代码，其实就是前置数据

mermaid流程图我会略写，mermaid图，虽然导致我一时半会儿想不起全名是什么

Hexo社区是不错的，stellar的设计是非常好的，废话就不多说了，那就开始吧

安装与初始化能找到我就说明，你看了很多文章，还是不太明白一些细节，正好我最近又重新整了一遍

，不过如果我讲的不是很明白，你可以查阅以下文章，或者官网，然后开始喷吧

Hexo的中文官方文档

Stellar：每个人的独立博客 - XAOXUU

1234Hexo: 6.3.0 ~ 7.0.0hexo-cli: 4.3.0 ~ latestnode: 14.17.3 ～ 20.10.0 # 建议选择 LTS 版本，过高的版本 hexo 还没有进行兼容。npm: 6.14.13 ~ 10.2.3

博主系统和配置，如果出些差别，可考虑是不是这个原因

1234Windows 10 家庭中文版Node.js 18.15.0npm 9.8.1yarn 1.22.19

安装脚手架前情提示：选择你的包管理器命令运行

全局安装

12yarn global add hexo-cli # yarnnpm install -g hexo-cli # npm

局部安装

12yarn add hexo # yarnnpm intall hexo # npm

hexo初始化全局安装可以直接在空文件夹里执行下面这一句话

1hexo init [folder] # 要求全局安装或将局部安装添加到path

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站，并且要求为空文件夹。

局部安装或者全局安装失败可以执行这语句话

1npx hexo init [folder]

在blog\package.json他自动配置了四种脚本命令

目录结构如下

1$ hexo generate

生成静态文件。

1$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

1$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

1$ hexo deploy

部署网站。部署之前预先生成静态文件

指令 | Hexo官网详细参考

此处我们多添加一条命令，一是记忆，二是IDE识别，三是方便之后的操作

blog\package.json1234567"scripts": { "build": "hexo generate", "clean": "hexo clean", "deploy": "hexo deploy", "server": "hexo server", "new": "hexo new"},

启动后的默认页面效果

使用Stellar主题更换主题12yarn add hexo-theme-stellarnpm i hexo-theme-stellar --save

_config.yml12# theme: landscape 默认theme: stellar

将*_config.landscape.yml* 文件修改为 _config.stellar.yml,并清空内容

先clean再build这点很重要，在后面的修改样式增加一些功能需要重复执行这两个命令。

可以先启动服务器看看效果

主题更新在 package.json 和中修改 stellar 的版本号，然后执行：

12npm iyarn

你果你有一些个性化的设置，并且复制了stellar到blog/themes/，那么需要注意，你就需要考虑更新带来的兼容问题了。

更新后将blog\node_modules\hexo-theme-stellar覆盖为blog/themes/stellar

配置亿下目录结构有关配置问题的首先就是我该写在哪，其次才是我该怎么写，那么贴出两张不同版本的目录结构，你可以比较一下。

1.19.0

1.21.0-1.22.1blog/source的目录结构1234567891011121314151617181920212223242526272829303132333435363738394041424344454647├─about│ ├─index.md│ └─index├─CNAME├─assets├─bookmark│ └─index.md├─css├─friends│ └─index.md├─js├─notes| ├─index.md| ├─Node.js常用命令.md| ├─...├─wiki│ └─vue│ ├─Axios│ ├─Vite项目构建工具│ ├─Vue对象提供的属性功能│ ├─Vue对象的生命周期│ ├─Vue常用指令│ ├─Vue快速入门│ ├─Vue路由│ ├─单文件组件的使用│ ├─组合API│ ├─项目构建工具│ ├─Axios.md│ ├─Vite项目构建工具.md│ ├─Vue对象提供的属性功能.md│ ├─Vue对象的生命周期.md│ ├─Vue常用指令.md│ ├─Vue快速入门.md│ ├─Vue路由.md│ ├─单文件组件的使用.md│ ├─组合API.md│ └─项目构建工具.md├─_data│ ├─wiki| | ├─notes.yml| | └─Vue.yml| ├─links.yml| ├─widgets.yml| └─wiki.yml└─_posts ├─...

重点在于wiki和notes

1.23.0blog/source的目录结构123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051├─about│ ├─index.md│ └─index├─CNAME├─assets├─bookmark│ └─index.md├─css├─friends│ └─index.md├─js├─notes| ├─index.md| ├─Node.js常用命令.md| ├─...├─wiki│ └─vue│ ├─Axios│ ├─Vite项目构建工具│ ├─Vue对象提供的属性功能│ ├─Vue对象的生命周期│ ├─Vue常用指令│ ├─Vue快速入门│ ├─Vue路由│ ├─单文件组件的使用│ ├─组合API│ ├─项目构建工具│ ├─Axios.md│ ├─Vite项目构建工具.md│ ├─Vue对象提供的属性功能.md│ ├─Vue对象的生命周期.md│ ├─Vue常用指令.md│ ├─Vue快速入门.md│ ├─Vue路由.md│ ├─单文件组件的使用.md│ ├─组合API.md│ └─项目构建工具.md├─_data│ ├─wiki| | ├─notes.yml| | └─Vue.yml| ├─links| | ├...| | ├─设计灵感和素材.yml| | └─期待友链.yml| ├─authors.yml| ├─widgets.yml| └─wiki.yml└─_posts ├─...

重点在于links和authors

代码推送（必须）线上部署用

1yarn add hexo-deployer-git

你还需要在提送前绑定推送域名此处为跳看

Rss订阅功能（建议）（用于搜索引擎和友链抓起你的动态）

12npm i hexo-generator-feedyarn add hexo-generator-feed

添加

blog/_config.yml12345678feed: type: atom # RSS的类型(atom/rss2) path: atom.xml # 文件路径,默认是atom.xml/rss2.xml limit: 20 # 展示文章的数量,使用0或则false代表展示全部hub# hub:# content: # 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false# content_limit: # 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现# content_limit_delim: ' ' #上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容，防止从中间截断

在你的主题配置中如：

blog/_config.stellar.yml1234567footer: social: rss: icon: '' url: /atom.xml rss: /atom.xml

我在stellar模板提供的底部侧边栏添上一个答案的天线意图已经很强烈了！qwq

你只要指向对应的url即可。rss部分是必填的

atom.xml乱码如题

有人说是

如果你使用了hexo-assert-image库，那是版本太老，因为作者没有及时更新npm,所以卸载后直接安装github上的版本

但是我也没有用这个啊

但是你别担心，很多人都这样，

看这个issues很多人的原因都是版本太低了，但我目前使用的是3.0.0（latest），但是啊~关键的来了！只要你推送到服务器上，他就是好的，一点乱码的问题也么有，如图

补充，我就跟傻X一样,模板主题的大佬给了他提供的rss位置我还自己手动整理一个，而且他写的很明白，就一个容器

blog/source/_data/widgets.yml1234recent: layout: recent rss: atom.xml # npm i hexo-generator-feed limit: 5 # Count of posts

现在

真的在遥相呼应，把我气的，必须在任何地方都出现底部的这些icons

让我的这份不找目的的用功多点成果

图片显示和New post命令(建议)图片显示图片显示主要可以使用三种语法格式

12

12{%image 图片地址 图片标注 %}{%image image-20231002230627780.png image-20231002230627780 %}

12{% asset_img 图片地址 图片标注 %}{% asset_img image-20230917223904196.png 20230917223904196 %}

目前本博客没用最后一个语法了，当初是看官方文档的

资源文件夹 | Hexo

它还需要下载一个包

12yarn add hexo-asset-imagenpm -i hexo-asset-image --save

因为那是我不清楚图片到底如何才能正确的显示出来，瞎琢磨的。

补充：

图片地址:build后public文件夹中图片的位置，你可以把public/assets中的public看作是你的站点，实际上也就是替换成你的站点，然后依次推路径，相对路径绝对路径都可以

图片标注:即图片下面的标注，图片路径错误的情况，标注依然正常显示

补充的补充：

第一种写法的图片标注好像1.21.0没有编译作用了

1.19.0：

1.21.0：

不知道是不是少了hexo-asset-image这个包，懒得想了，只能动手改成第二种了。

1.22.1：

使用正则表达式进行快速替换

123!\[.*?\]\(.*?/([^/]+)\){% image Vue快速入门/$1 %}

一般开发工具都有，全部替换即可

New post很多人在执行下面的命令的时候，没有自动创建对应post(文章)的文件夹

1hexo new post

这是因为你需要进行一些简单的设置

blog\_config.yml12345render_drafts: falsepost_asset_folder: true # false# marked: # 1.19.0 我是有加这个的，1.21.0我没有加，因为我没有看见什么变化和作用 img_assest这个语法标签我也不用了# prependRoot: true# postAsset: true

编辑器New post在配置好博客网站的一些设置后，不需要实时的打开项目，单独使用编辑器也可以。

记得新建的md文件要在blog\source_posts内，或者最后发布前和对应的图片文件夹放到这里。

这里我使用的markdown编辑器是Typora

在设置中对保存文件夹名进行更改

1./${filename}

好吧，其实我这里提的，也不是什么好方法，你需要最后手动删除./${filename}这一部分，因为启用了post_asset_folder: true 最后无论build还是deploy生成html文件中，图片和网页是一个文件里的，相对的路径就错了

最后你可以试试PicGo，也就是上传至图床，保存的是url。

Mermaid流程图支持（选）美人鱼图支持

12npm install --save hexo-filter-mermaid-diagrams;yarn add hexo-filter-mermaid-diagrams;

这个东西的兼容在我这里一直是个谜，但不妨碍我想要使用这个工具

blog\_config.stellar.yml12345678910######## JS Plugins ########plugins: ## required plugins ## # mermaid chart美人鱼流程图配置 mermaid: enable: true # js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js # Available themes: default | dark | forest | neutral theme: dark # 推荐使用 dark 主题 在夜间模式下显示效果更好

在文件头代码启用

1mermaid: true # 美人鱼图不需要就注释

效果代码块flowchart LR

Model-->ModelView

ModelView<-->View

ModelView-->Model1234flowchart LR Model-->ModelView ModelView<-->View ModelView-->Model

具体mermaid语法就要自己去学习了

文章分享与推荐（选）blog\_config.yml1url: https://bxzdyg.cn/ # 网站地址#对于这分享连接网站

可能会增加文章与评论区的距离感（多滑一点距离）

12npm i hexo-related-popular-posts --saveyarn add hexo-related-popular-posts

复制下面的代码到blog\_config.stellar.yml

blog\_config.stellar.yml12345678910111213141516171819article: # 如果没有指定封面，是否根据 tags 作为关键词搜索封面图片？ auto_cover: false # search from https://source.unsplash.com/ # 如果没有指定横幅，是否根据 tags 作为关键词搜索横幅图片？ auto_banner: false # search from https://source.unsplash.com/ # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？ auto_excerpt: 200 # 分类颜色 # category_color: # '探索号': '#f44336' # 不会用qwq # 文章许可协议 license: '本文采用 [署名-非商业性使用-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。' # 分享 share: [wechat, weibo, email, link] # 相关文章，需要安装插件 (for layout: post) # npm i hexo-related-popular-posts related_posts: enable: true title: 您可能感兴趣的文章

注意：有的人的分享网站可能和当前的网址不一样

是谁要害我啊？

其实吧，这个网站是根据这个有关的，更换网址记得修改

blog\_config.yml12# url: https://yguang233.github.io/ # 网站地址url: https://bxzdyg.cn/ # 网站地址 # 对应这分享连接网站

文章路由（选）能够解决中文标题转义的现象，因为你直接给她转码了。并且创建文章自动添加abbrlink

12npm -i hexo-abbrlink --saveyarn add hexo-abbrlink

在 blog/_config.yml 中找到对应 permalink 标签，进行修改即可：

12345678910url: https://yguang233.github.io/ # http://YGuang233.github.io#permalink: :year/:month/:day/:title/permalink: p/:abbrlink/abbrlink: alg: crc32 #算法： crc16(default) and crc32 rep: hex #进制： dec(default) and hexpermalink_defaults:pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks

使用了这个每使用命令新建一篇文章会在头代码上插入abbrlink:及对应的转码后的代码,

这使得他会自动去匹配每个md文件的头代码中的abbrlink

不同算法、进制生成的链接格式如下：

算法

进制

生成链接示例

crc16

hex

https://yourname.github.io/p/66c8.html

crc16

dec

https://yourname.github.io/p/65535.html

crc32

hex

https://yourname.github.io/p/8ddf18fb.html

crc32

dec

https://yourname.github.io/p/1690090958.html

如果你不想使用这个，就想让美丽的汉字显示在URL上，当然也没有问题,如果你还想自定义和指定路由可以采用下面的方式：

在 blog/_config.yml 中找到对应 permalink 标签，进行修改即可：

1permalink: :year/:month/:day/:title/

使用默认的或者更改一下

1permalink: p/:title/

123456789101112131415---title: {{ title }}date: {{ date }}tags: [] # 标签categories: [] # 分类 可以嵌套多个层级description:cover:banner:poster: # 海报（可选，全图封面卡片） topic: # 标题上方的小字 # 可选 # 选了这个就是在上方 headline: # 大标题 # 必选 caption: # 标题下方的小字 # 可选 color: # 标题颜色 # 可选mermaid: true # 美人鱼图不需要就注释---

效果

线上部署提前安装git，配置好ssh密钥。

Github配置SSH密钥连接（附相关问题解决） - 知乎 (zhihu.com)

GitHub Pages使用GitHub Pages托管静态页面站点。

优点：

不需要域名，有域名可以绑定自己的域名

不需要自己的服务器

一键推送方便

适合运维小白没错就是我

缺点：

访问慢，且看地理位置，看脸

GitHub Pages 快速入门 - GitHub 文档

创建一个仓库，仓库名

在_config.yml中

blog\_config.yml123456789101112# Deployment## Docs: https://hexo.io/docs/one-command-deployment# 推送设置deploy: # 类型 type: git # 部署分支名称，按照自己喜欢的起名就可以。这里写完还需要在 GitHub 上进行分支创建并配置 branch: master # 仓库，这里使用的 SSH 方式 repo: git@github.com:YGuang233/YGuang233.github.io.git # 如果你看了 hexo 的文档，这里很清楚。部署的时候会使用这个消息作为提交的信息 message: Automatic deploy by Github Action：{{ now('YYYY-MM-DD HH:mm:ss') }}

我这里采用的只是默认的主分支，你可以自行更改

然后更新提交（输入下面的命令就会自动更新提交到git上，前提配置好ssh,要不然显示权限不够，即使你使用网页登录过）

12hexo generatehexo deploy

这是很久以前写的,不清楚如果没用build推送会怎么样，不过这里也不是说每次都要build一下，写好文章build看看效果辣，然后推送而已。直接推送会怎么样，我不清楚啊，不过推送都会生成文件，影响应该不大

未安装hexo-deployer-git包会导致下面的错误

1ERROR Deployer not found: git

其实就这两个点一下就可以了

运行成功则变成了一个绿钩

setting/code and automation/pages则会自动执行静态页面文件的路径和显示已经成功生成的站点。这一现象可能稍晚，可以先一步去查看站点。

如果你一小时内重复提交查看申请，发现不能生成了，那是因为它一个小时内只能生成10次，而一个用户的站点存储上限为1G

我在网上看到有些人使用修改.git/config这个文件夹本地仓库配置信息，来解决在github pages编译和上传的问题，这次我并没有用到，但我还是把它贴出来(这部分也不需要自己写会自动生成，你就看看自己缺了什么吧)

12345678910111213141516#[user]# email=email@qq.com# name=YGuang233 #这部分是我手动添加上去的，我不清楚这个是写我git的用户名还是github的用户名，但是我使用websotrm提交的时候还增加了作者签名[core] repositoryformatversion = 0 filemode = false bare = false logallrefupdates = true symlinks = false ignorecase = true[remote "origin"] url = https://github.com/YGuang233/YGuang233.github.io.git fetch = +refs/heads/*:refs/remotes/origin/*[branch "master"] remote = origin merge = refs/heads/master

Vercel（已被墙）尝试在Vercel中部署你的博客

推送绑定域名在blog/source/中添加CNAME文件，无类型文件（没有文件后缀）

写入你自己的博客地址

blog\source\CNAME1blog.bxzdyg.cn

其他待编辑……qwq(其实写了的，一定是不见了！)

一些问题toc样式的问题默认设置在

blog/source/_data/widgets.yml1234567toc: layout: toc list_number: false # 是否显示序号 min_depth: 2 # 建议不要低于 2 即从 H2 标签开始解析（H1标签用于文章大标题） max_depth: 5 # 5 代表最多解析到 H5 标签 fallback: recent # Use a backup widget when toc does not exist.

禁用h1如在wiki使用h1标题也就是#

标题等级必需连续如上一个标题是h1下一个就是h3、h4

不连续会以下一个高级标题，形成断层。

toc最多显示到h5

备注：1.19.0只能到h4

Mermaid样式问题

话说同样是dark主题，样式这么差了这么多

不明白，怎么下面的样式又对了

Mermaid代码冲突问题（已解决）主题语法不能和Mermaid代码块进行嵌套

以前（v1.19.0）在这个主题下很多都不能够嵌套，基本上都是我现在浏览器上渲染一遍，复制html元素粘贴到markdown里面

mermaid代码块临近主题语法会无法正常编译，还是代码块

没想到现在居然可以了，牛哇。

不过这里的嵌套却不能显示原有的代码了，都能被识别，进行编译

但是用起来警告有点多啊……

post的相关问题文章如何置顶？在front-matter加入pin: true就可以了。然后就会在对应的文章多一个赞的小徽章

wiki的相关问题很遗憾的告诉各位高手们，stellar1.20.0将wiki重做了，不过如果你依然是老用户，我还是将对应的wiki项目的写法贴出来

1.19.0版本使用起来是相当费力的，不知怎么的，当时我读不懂文档，搞了很久才折腾出来了。

目录结构如下

12345678910111213---mermaid: truedate: 2023-09-19 16:25:20layout: wiki # 使用wiki布局模板wiki: Vue # 这是项目名title: Vue快速入门order: 0sidebar: - layout: search override: search filter: '/wiki/vue/' - toc---

重点是order要在对应的序列范围内

blog/source/_data/projects.yml123456789101112131415161718192021222324252627Vue: name: Vue title: Vue - 渐进式的前端框架 subtitle: '很开心的学了 | 结果又多了一个学过而不会的技术' # 项目中和主页相似的两个副标题 tags: 前端 # 分类 cover: true # 是否图片 # cover: [logo, description] # 如果 logo 中已经包含了项目标题，可以这样设置不显示项目标题 logo: src: /assets/wiki/vue/vue-js.svg # 项目封面 small: 112px large: 240px description: 我的Vue学习笔记-不断改进和完善中，欢迎留言批斗，但别说的太过分，我并没有那么坚强。 # repo: xaoxuu/hexo-theme-stellar # comment_title: '评论区仅供交流，有问题请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues) 反馈。' # giscus: # 对应仓库 # data-repo: xaoxuu/hexo-theme-stellar # data-mapping: number # data-term: 226 sections: '快速开始': [ 0, 99 ] '基本使用': [ 100, 199 ] '深入组件': [ 200, 299 ] '应用规模化': [ 300, 399 ] '跨域问题': [ 400, 599 ] '进阶主题': [ 600, 699 ]# sidebar: [search,toc] #侧边栏# index: false #在项目列表中隐藏

1.20.0+1234567891011121314151617181920212223242526272829```sh├─wiki│ └─vue│ ├─Axios│ ├─Vite项目构建工具│ ├─Vue对象提供的属性功能│ ├─Vue对象的生命周期│ ├─Vue常用指令│ ├─Vue快速入门│ ├─Vue路由│ ├─单文件组件的使用│ ├─组合API│ ├─项目构建工具│ ├─Axios.md│ ├─Vite项目构建工具md│ ├─Vue对象提供的属性功能.md│ ├─Vue对象的生命周期.md│ ├─Vue常用指令.md│ ├─Vue快速入门.md│ ├─Vue路由.md│ ├─单文件组件的使用.md│ ├─组合API.md│ └─项目构建工具.md├─_data| ├─wiki.yml│ └─wiki│ └─Vue.yml│

blog\source\_data\wiki\Vue.yml1234567891011121314151617181920212223242526272829303132333435363738394041424344454647name: Vuetitle: Vue.js - 渐进式的前端框架subtitle: '很开心的学了 | 结果又多了一个学过而不会的技术' # 项目中和主页相似的两个副标题tags: 前端cover: /assets/wiki/vue/vue-js.svg # 封面页大图icon: /assets/wiki/vue/vue-js.svg # 列表页图标# coverpage: [logo, description]coverpage: true # 默认是 truedescription: 我的vue学习笔记-不断改进和完善中，欢迎留言批斗，但别说的太过分，我并没有那么坚强。# repo: xaoxuu/hexo-theme-stellarsidebar: - search: override: search filter: /wiki/vue/ placeholder: '在 Vue笔记 中搜索...' - toc # - timeline_stellar_releases - related# comment_title: '评论区仅供交流，有问题请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues) 反馈。'# comments:# service: giscus# giscus:# data-repo: xaoxuu/hexo-theme-stellar# data-mapping: number# data-term: 226path: /wiki/vue/toc: '快速开始': - 'Vue快速入门' '基本使用': - 'Vue常用指令' - 'Vue对象提供的属性功能' - 'Vue对象的生命周期' - 'Vue组件化开发基础和浅入' - '项目构建工具' '深入组件': - '单文件组件的使用' '应用规模化': - 'Vue路由' '跨域问题': - Axios - Proxy - WebSocket '进阶主题': - '组合API' - 'Vite项目构建工具'

blog\source\_data\wiki.yml12 # 上架项目- Vue

头代码如下面写到

blog\source\wiki\vue\Vue快速入门.md12345---layout: wiki # 使用wiki布局模板wiki: Vue # 这是项目名title: Vue快速入门---

总结&nsbp;&nsbp;对于这个改动，对比以往，相当于多了一个草稿wiki，可以选择上不上架blog\source\_data\wiki.yml中添加即可

在写某一分页的时候不用去打开上一页的order是什么，只需要在blog\source\_data\wiki\Vue.yml这类的项目去添加下一个分页的title

这些都是有好处的，但是作为一个老用户，我哭啊，也要改些东西，不想动啊~

缺点也是有一些的就是文章标题不允许重复了

title要和markdown文件名一致

其他乱序

还有莫名的省略号。

解答：船新版本不能像1.19.0那样，进行目录嵌套，全部写在一个文件里，否则会在构建的时候报如下的错误

多次重写构建是能够正常构建，但是效果就像上面一样乱序。

消失的toc

title要和文件名一致，否则会出现省略号

而内容为空，只写了头代码toc就会消失

notes相关问题如何隐藏cover和title还有name这个大概就是notes上拉有wiki的开始使用提示字样

blog\source\_data\wiki\notes.yml123456# name: 备忘录# title: 备忘录# icon: # 列表页图标# cover: # 封面页大图# coverpage: [cover, title, description] # 封面页显示的内容coverpage: false # 封面页显示的内容

这部分修改成这样

你可能还是不清楚子文件的front-matter怎么写

blog\source\notes\vite初始化vue.md12345678---date: 2023-12-31 18:58:39layout: wikiwiki: notes # 这个跟上面的 /wiki/notes.yml 关联起来menu_id: explore # 这个跟配置文件中的 `sidebar.menu.notes` 关联起来，这很重要，如果没有这个，就像普通的wiki项目一样了title: vite初始化vue---待编辑……qwq{% psw 其实写了的，一定是不见了！%}

代码块怎么显示文件地址Stellar一些没有说明或者一时看不明白的，但是看起来就很叼的效果实现

这样编写在一般的md是不会被这样解析的，而是作为一整个字符串当作代码的类型打脸打的啪啪响 两个小时后：typora 也能够区分识别，将空格前面的作为类型，当然了有时候你写的一些语言，会无法识别，突出高亮如vue

1234{% folding child:codeblock open:flase color:yellow 警告此处为个人本题答案仅供参考，非唯一答案 %}``` 这是代码语言这是代码内容{% endfolding %}

代码块折叠

1{% quot 你好世界 el:h2 %}

使用这种指定标题，每个属性要隔开一些

123{% quot 热门话题 %} []{% quot 热门话题 icon:default %} “”{% quot 热门话题 icon:hashtag %} #

wiki项目的icon如何向老版本一样整大一点不知道

okr嵌套gallery如何控制哪些是大图哪些是小图不知道

一些小花样动态友链文章参考：

https://weekdaycare.cn/posts/stellar-friends/

克隆仓库后，开放Issues功能，按需求划定标签，并且修改厂库对应的判断语句，就可以在文章中

1{% friends repo:YGuang233/friends %}

就能加载出对应的友链信息

朋友文章（朋友圈）2023/101{% timeline type:fcircle api:https://github.com/YGuang233/friends-rss-generator/tree/output/data.json %}

有些人很好奇，明明这样写，打开一看是我厂库里的output分支的data.json

但实际上你只要多点一步，我们需要的是这个叫做data.json的字节流

1https://raw.githubusercontent.com/YGuang233/friends-rss-generator/output/data.json

1{% timeline type:fcircle api:https://raw.githubusercontent.com/YGuang233/friends-rss-generator/output/data.json %}

但是这个国内好像访问不了，Stellar作者又给了一个api接口

12{% timeline type:fcircle api:https://api.vlts.cc/output_data/v1/YGuang233/friends-rss-generator %}{% endtimeline %}

将其改成你对应的厂库就可以了

或者你可以显示在侧边栏

blog\source\_data\widgets.yml123456timeline_friend_blog: layout: timeline title: 朋友的文章 api: https://api.vlts.cc/output_data/v1/YGuang233/friends-rss-generator type: fcircle limit: 30 # 限制显示30条

在头代码sidebar加入这个自定义的组件

1sidebar: [timeline_friend_blog]

使用「memos」待编辑……qwq(其实写了的，一定是不见了！)

接入API欢迎图片接口地址1https://api.szfx.top/info-card/?word=%E6%AC%A2%E8%BF%8E%E6%9D%A5%E8%AE%BF%20%E5%8D%8A%E9%86%92%E7%9D%80%E7%9A%84%E9%98%B3%E5%85%89%20%E7%9A%84%E5%8D%9A%E5%AE%A2

你可以试着打开这个网址将word=欢迎词，修改成你喜欢的

blog/source/_data/widgets.yml12345welcome: layout: markdown title: 哈喽~ 旅人： content: |

效果展示，看起来挺有新意的，就是图片内的字太小

将上面的img部分改成下面的，可以有在文章那样的缩放图效果

blog/source/_data/widgets.yml1

二次元图片是非题 | ACG-API (shifeiti.com)

我们使用是非题大佬提供的api可以获取对应或随机的二次元图片

食用方式也是很简单，和上面接入欢迎图片是一样的将src改成下面的api接口url地址即可。

假定 API 部署到 https://acgapi.shifeiti.com

访问 https://acgapi.shifeiti.com/api ，跳转至图片地址

访问 https://acgapi.shifeiti.com/api/?id=数字 ，跳转至指定图片

示例 https://acgapi.shifeiti.com/api/?id=1717

示例 https://acgapi.shifeiti.com/api/?id=1717&json

效果展示

是挺赞的。

访问 https://acgapi.shifeiti.com/api/?json

输出json，例如：

1{"id":3,url":"https://z3.ax1x.com/2021/08/19/fqDucQ.png"}

相似的大家可以去网上找

如下面这个

https://blog.jixiaob.cn/?post=93https://blog.jixiaob.cn/?post=93

这个博主推荐的推荐的api还有涩图版本🙈

诗词和骚话今日诗词接入随机诗词提升网站逼格

今日诗词 - 一言API - 诗词实时智能推荐 - 今日诗词开放接口 - 今日诗词 API - 个人文章分享 (jinrishici.com)

接着我们只要在welcome引入就可以了

blog\source\_data\widgets.yml12345678welcome: layout: markdown title: 哈喽~ 远道而来的朋友呀~ content: | 欢迎来到我这么一个小破站哟~ 希望你能够在这里找到自己想要了解的东西 正在加载今日诗词....

效果展示

xenv/gushici: 一言·古诗词 API (Hitokoto API)，随机返回一条古诗词名句。采用 Vert.x + Redis 全异步开发，毫秒级稳定响应。 (github.com)

其开源项目

或者接入另外一个一言开源api

一言

Hitokoto - 一言

blog\source\_data\widgets.yml123456789101112131415161718welcome: layout: markdown title: 哈喽~ 远道而来的朋友呀 ： content: |

:D 获取中...

这个感觉更像是一个有趣的灵魂

我自己？但是你也可以接入大脑，放入一些自己想说的话，更加个性化和展现个人魅力！

blog\source\_data\widgets.yml123456789101112131415welcome: layout: markdown title: 哈喽~ 远道而来的朋友呀 ： content: |

:D 获取中...

这部分也可以改成图片，用img标签，图片就放在blog\source\assets里就行了，然后你也明白该怎么做了吧？

接入Steam（危）待编辑……qwq(其实写了的，一定是不见了！)

接入音乐播放器本站：stellar主题使用meetingjs接入aplayer音乐播放器https://bxzdyg.cn/p/stellar-aplayer-metingjs/

PicGo使用PicGo无非就是连接自己的图床，截图直接上传到网上，图床的服务器上与博客分开。

一般事是合一个markdown的编辑器使用的，文章推送再用命令提示符或者终端之类的切换到blog目录下，执行一段推送命令即可。这个就是使用这个的思路：

提高编写效率

减轻服务器分担，进行分流，提高阅读感受。

待编辑……qwq(其实写了的，一定是不见了！)

加水印待编辑……qwq(其实写了的，一定是不见了！)

评论系统/p/stellar-comment/https://bxzdyg.cn/p/stellar-comment/

这篇主要讲解waline的评论系统的部署和使用，当然你还可以选择其他的评论系统，如 twikoo,artalk等都是不错的评论系统，自己觉得合适和好用才是最重要的。

站点统计参考文章

Hexo添加字数统计 - Ezhixuan

Stellar主题在页脚添加访客统计及运行时间 - 酷小呵 (kuhehe.top)

这两位博主讲的都是可行的方法，不过第一种太麻烦了，我之前也尝试过，不过不利于以后更新，他直接上手模板文件，我还是建议在给定的位置插入,下方是本站的插入方式

footer:sitemap：

blog\_config.stellar.yml12345678910111213141516171819202122232425262728footer: content: | 本"页面"访问 次 | 👀总访问 次 | 总访客 人

自定义样式使用霞鹜文楷字体blog\_config.stellar.yml1"LXGW WenKai Screen"

将themes中的stellar的style复制到根目录下的_config.stellar.yml

字体大小也可以在这里一起设置，在下面代码块一起贴出

找到style:font-family:body:,添加到最前面就可以了，放在前面的意思就是优先用前面的

blog\_config.stellar.yml12345678910style: font-size: root: 16px # 阅读字体大小 body: .9375rem # 15px # 相对大小 code: 85% # 14px codeblock: 0.8125rem # 13px font-family: logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif' body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'

首页轮播图(1.19.0)听stellar作者说首页这块地方要整点别的，后面的可以不用考虑了，如果你还是想要用的话，那就以这个版本为基础吧。

如果缺少或者说是没有目标文件，那就需要手动添加

添加自定义css在 blog/themes/stellar/source/css/_custom/ 目录中添加 swiperstyle.styl 文件

blog/themes/stellar/source/css/_custom/swiperstyle.styl123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210div#swiper_container background var(--card); z-index auto.blog-slider position relative border-radius 12px 12px 12px 12px margin auto padding: 10px transition all .3s.blog-slider__item display flex align-items center &.swiper-slide-active .blog-slider__img img opacity 1 transition-delay .3s .blog-slider__content & > * opacity 1 transform none & > *:nth-child(1) transition-delay 0.3s & > *:nth-child(2) transition-delay 0.4s & > *:nth-child(3) transition-delay 0.5s & > *:nth-child(4) transition-delay 0.6s & > *:nth-child(5) transition-delay 0.7s & > *:nth-child(6) transition-delay 0.8s & > *:nth-child(7) transition-delay 0.9s & > *:nth-child(8) transition-delay 1s & > *:nth-child(9) transition-delay 1.1s & > *:nth-child(10) transition-delay 1.2s & > *:nth-child(11) transition-delay 1.3s & > *:nth-child(12) transition-delay 1.4s & > *:nth-child(13) transition-delay 1.5s & > *:nth-child(14) transition-delay 1.6s & > *:nth-child(15) transition-delay 1.7s.blog-slider__img width 300px flex-shrink 0 height 200px padding 10px border-radius 20px transform translateX(0px) overflow hidden &:after content '' position absolute top 0 left 0 width 100% height 100% border-radius 15px opacity 0.8 img width 100% height 100% object-fit cover display block opacity 0 border-radius 5px transition all .3s.blog-slider__content padding-right 50px padding-left 25px & > * opacity 0 transform translateY(25px) transition all .4s.blog-slider__code text-align left color var(--text-p3) margin-bottom 10px display block font-weight 500.blog-slider__title text-align left font-size $fs-h3 font-weight 500 color var(--text-p1) margin-bottom 15px -webkit-line-clamp 1 display -webkit-box overflow hidden -webkit-box-orient vertical.blog-slider__text text-align left font-size $fs-h5 color var(--text-p3) -webkit-line-clamp 3 display -webkit-box overflow hidden -webkit-box-orient vertical margin-bottom 15px line-height 1.5em width 100% word-break break-all word-wrap break-word.blog-slider__button display inline-flex background-color var(--block) padding 14px 14px border-radius 8px color var(--text-p1) text-decoration none font-weight 500 justify-content center text-align center letter-spacing 1px display none &:hover background-color var(--block-hover).blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction bottom 10px left 0 width 100%.blog-slider__pagination position absolute z-index 1 right 20px width 11px !important text-align center left auto !important top 50% bottom auto !important transform translateY(-50%) &.swiper-pagination-bullets .swiper-pagination-bullet margin 8px 0 !important .swiper-pagination-bullet width 11px height 11px display block border-radius 10px background #858585 opacity 0.2 transition all .3s .swiper-pagination-bullet-active opacity 1 background $color-theme height 30px@media screen and (max-width: 600px) .blog-slider__pagination transform translateX(-50%) left 50% !important top 320px width 100% !important display flex justify-content center align-items center .blog-slider__pagination &.swiper-pagination-bullets .swiper-pagination-bullet margin 0 5px !important .blog-slider__pagination .swiper-pagination-bullet-active height 11px width 30px .blog-slider min-height 350px height auto margin-bottom 10px .blog-slider__content margin-top 20px text-align center padding 0 30px .blog-slider__item flex-direction column .blog-slider__img .blog-slider__content padding-left 10px padding-right 10px .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets top 230px

添加自定义文件之后需要在 themes/stellar/source/css/main.styl 中引用

themes/stellar/source/css/main.styl12// 自定义样式@import '_custom/*'

增改 文件添加如下代码：

blog/themes/stellar/layout/_partial/scripts/index.ejs12345// -------- start 自定义首页文章轮播 if ('<%- theme.customSwiperTopArticle.enable %>' == 'true') { stellar.plugins.customSwiperTopArticle = Object.assign(<%- JSON.stringify(theme.customSwiperTopArticle) %>); } // -------- end 自定义首页文章轮播

blog/themes/stellar/layout/index.ejs12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273function layout_post_pin_article(type,post,content){ var el=''; if(post.post===undefined){ post.post='article'; } //文章简述 var articleDescription=''; if(post.excerpt){ articleDescription=strip_html(post.excerpt) }else if(post.description){ articleDescription=post.description }else if(post.content&&theme.article.auto_excerpt>0){ articleDescription=truncate(strip_html(post.content),{length:theme.article.auto_excerpt}) } el +='

'; el +=''; el +=''; el +=''; el +='

'; el +=''+ date(post.date,config.date_format) +''; el +=''+(post.title || post.seo_title) +''; el +='

'+articleDescription +'

'; el +='详情'; el +='

'; el +='

起始位置在function layout_post_card的下面

覆盖了function layout_posts

末尾在function layout_wikis的上方

blog/themes/stellar/source/js/main.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455// swiper// ------------------- start 首页置顶文章轮播 新增if (stellar.plugins.swiper) { const swiper_container = document.getElementById('swiper_container'); if (swiper_container !== undefined) { stellar.loadCSS(stellar.plugins.customSwiperTopArticle.css); stellar.loadScript(stellar.plugins.customSwiperTopArticle.js, {defer:true}).then(function () { var swiper = new Swiper('.blog-slider', { passiveListeners: true, spaceBetween: 30, effect: 'fade', loop: true, autoplay: { disableOnInteraction: true, delay: 3000 }, mousewheel: false, // autoHeight: true, pagination: { el: '.blog-slider__pagination', clickable: true, } }); swiper_container.onmouseenter = function() { swiper.autoplay.stop(); }; swiper_container.onmouseleave = function() { swiper.autoplay.start(); } }); }// ------------------- end 首页置顶文章轮播 新增 // swiper const swiper_api = document.getElementById('swiper-api'); if (swiper_api != undefined) { stellar.loadCSS(stellar.plugins.swiper.css); stellar.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () { var swiper = new Swiper('.swiper-container', { slidesPerView: 'auto', spaceBetween: 8, centeredSlides: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); }) }}

引入swiper轮播图插件blog/_config.stellar.yml123456# 自定义swiper文章置顶customSwiperTopArticle: enable: true css: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/css/swiper/swiper.min.css js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/swiper/swiper.min.js init_js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/swiper/swiper_init.js

正式使用

12pin: true # 是否置顶swiper_thumbnail: 图片地址

效果展示

由于字少，没有将左边顶过去

bug和缺陷将鼠标放在文字那一块有一个图片放大放大镜图标在除了主页外就会报错，待修(不过不影响使用)，最大的问题应该是加载的问题，图片比js早就会出现分离的状况

footer:content文本居中嗯，怎么嗦呢，他这个都是有点偏左，我某名奇妙就是想让这块部分居中，神奇吧？！那就开干吧

方法一

使用css对样式调整一下，然后在head导入css。需要对css选择器和样式有一定了解。

blog/source/css/override.css123.page-footer .text p { text-align: center;}

blog/_config.yml123inject: head: -

方法二

使用