JieGerBlog

JieGerBlog 简单使用指南

Fri, 02 Jan 1970 00:00:00 GMT

这个博客模板是基于 Astro 构建的。对于本指南中未提及的内容，您可以在 Astro 文档中找到答案。

文章的 Front-matter#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我新 Astro 博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [前端, 开发]
7
category: 前端开发
8
draft: false
9
---

属性	描述
`title`	文章标题。
`published`	文章发布日期。
`updated`	文章更新日期。如果未设置，将默认使用发布日期。
`pinned`	是否将此文章置顶在文章列表顶部。
`description`	文章的简短描述。显示在首页上。
`image`	文章封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：`public` 目录中的图片 3. 不带任何前缀：相对于 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`lang`	文章语言代码（如 `zh-CN`）。仅当文章语言与站点默认语言不同时设置。
`licenseName`	文章内容的许可证名称。
`licenseUrl`	文章内容的许可证链接。
`author`	文章作者。
`sourceLink`	文章内容的来源链接或参考。
`draft`	如果这篇文章仍是草稿，则不会显示。
`comment`	是否启用此文章的评论功能。默认为 `true`。
`slug`	自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。
`password`	文章密码。设置后文章内容将被 AES-256-GCM 加密，访客需输入密码才能查看。
`passwordHint`	密码提示。显示在密码输入框上方，帮助访客回忆密码，也可以不加。

文章文件的放置位置#

您的文章文件应放置在 src/content/posts/ 目录中。您也可以创建子目录来更好地组织您的文章和资源。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

自定义文章 URL (Slug)#

什么是 Slug？#

Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。

Slug 使用示例#

示例 1：使用文件名作为 URL#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/my-first-blog-post

示例 2：自定义 Slug#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
slug: hello-world
5
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/hello-world

示例 3：其他语言文件名使用Slug#

1
---
2
title: 如何使用 JieGerBlog 博客主题
3
published: 2023-09-09
4
slug: how-to-use-jiegerbolg-blog-theme
5
---

文件：src/content/posts/如何使用JieGerBlog博客主题.md

URL：/posts/how-to-use-jiegerbolg-blog-theme

Slug 使用建议#

使用英文和连字符：my-awesome-post 而不是 my awesome post
保持简洁：避免过长的 slug
具有描述性：让 URL 能够反映文章内容
避免特殊字符：只使用字母、数字和连字符
保持一致性：在整个博客中使用相似的命名模式

注意事项#

Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接
如果多个文章使用相同的 slug，后面的文章会覆盖前面的
Slug 会自动转换为小写

JieGerBlog 一款清新美观的 Astro 博客主题模板

Fri, 02 Jan 1970 00:00:00 GMT

🌟 项目概述#

JieGerBlog 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。

🖥️项目仓库： JieGerBlog

📝JieGerBlog开源仓库： https://gitee.com/Destiny_cc/JieGerBlog

⭐JieGerBlog开源地址：https://github.com/lj874802276/JieGerBlog

⭐Fuwari开源地址：https://github.com/saicaca/fuwari

lj874802276

JieGerBlog

JieGer 的个人博客，一个默默无闻的码子的数字花园！

✨A static blog template built with Astro.

—

MIT

Astro

JieGerBlog

🚀 技术架构#

静态站点生成: 基于 Astro ，提供极快的加载速度和优秀的 SEO 优化
TypeScript 支持: 完整的类型安全，提升开发体验和代码质量
响应式设计: 使用 Tailwind CSS 构建，完美适配桌面端和移动端
组件化开发: 支持 Astro、Svelte 组件，灵活可扩展

📖 配置说明#

📚 配置指南：查看 JieGerBlog 开源仓库获取完整的配置指南

Windows10 闲置机部署 JumpServer 完整教程（防爆破+多厂商管理）

Thu, 03 Sep 2026 00:00:00 GMT

适用场景：公司有4-5台Linux/Windows服务器，需统一管理多家外部供应商工程师远程操作，要求操作可审计、防爆破、不侵入业务系统，利用闲置Windows10电脑部署，无需额外购买服务器。

核心优势：Docker部署（不污染系统、易卸载）、默认端口全修改（防扫描爆破）、支持多厂商分权、操作全程录屏审计，完全满足多外部工程师远程管理需求。

一、前置准备#

1. 硬件要求（闲置Windows10电脑完全满足）#

CPU：1核及以上（推荐2核，更流畅）
内存：2G及以上（最低1G，仅支持少量工程师同时在线）
硬盘：至少20G空闲空间（用于存储Docker镜像、JumpServer数据、操作录屏）
网络：能正常联网（用于下载Docker和JumpServer镜像），能访问公司内部所有服务器

2. 软件准备#

Windows10 系统（已激活，建议关闭自动更新，避免部署后异常）
网络连接正常（优先有线网络，稳定性更高）
管理员权限（安装Docker和执行命令需管理员权限）

3. 提前说明#

本教程采用「Windows10 + Docker + JumpServer」方案，Docker隔离环境，不修改Windows系统配置，卸载方便
已默认修改JumpServer所有默认端口（避免黑客扫描爆破），无需额外手动修改
后续将同步配置「MFA二次验证、登录锁定、IP白名单」，进一步提升安全性

二、分步部署流程（全程复制粘贴，无需手动修改）#

第一步：安装 Docker Desktop（Windows10）#

下载Docker安装包：https://www.docker.com/products/docker-desktop/（直接点击Download for Windows）
双击安装包，一路点击「Next」，无需修改默认配置（默认勾选「Use WSL 2 instead of Hyper-V」，若提示缺少WSL 2，按提示安装即可）
安装完成后，点击「Close and restart」，重启电脑（必须重启，否则Docker无法正常启动）
重启后，自动启动Docker，或手动打开「Docker Desktop」，等待左下角显示「Running」，即为启动成功（首次启动可能需要3-5分钟）

第二步：创建JumpServer数据存储文件夹#

**D:\JumpServer\data**打开「此电脑」，在D盘（或其他空闲空间较大的磁盘）新建文件夹，路径建议：（方便后续查找和备份数据）
确认文件夹权限：右键文件夹 → 「属性」→ 「安全」，确保当前管理员账号有「完全控制」权限（默认已具备，无需修改）

第三步：Docker部署JumpServer（改好端口，防爆破）#

关键提醒：此命令已修改所有默认端口，直接复制粘贴执行，无需修改任何内容！

以管理员身份打开「命令提示符（CMD）」或「PowerShell」（推荐PowerShell，兼容性更好）：
方法：Win+R → 输入「cmd」或「powershell」→ 右键「以管理员身份运行」
复制粘贴以下完整命令（无需修改任何内容），回车执行： docker run -d --restart always ^ ``-p 18080:80 -p 13306:3306 -p 12222:2222 -p 13389:3389 ^ ``-v D:\JumpServer\data:/opt/jumpserver/data ^ ``-e SECRET_KEY=YourStrongKey123456789 ^ ``-e BOOTSTRAP_TOKEN=YourBootToken123456 ^ ``jumpserver/jms_all:v3.10.3
执行后，等待3-5分钟（首次下载镜像，速度取决于网络，耐心等待），出现一串随机字符（容器ID），即为部署成功
**docker ps**验证部署：在CMD/PowerShell输入，若能看到「jumpserver/jms_all.10.3」的容器，状态为「Up」，则部署成功

端口说明（已修改，非默认端口，防扫描）#

用途	修改后端口（外部访问用）	原默认端口（已禁用，防爆破）
JumpServer Web页面访问	18080（HTTP）	80
SSH客户端连接（如Xshell）	12222	2222
RDP桌面代理（Windows远程）	13389	3389
MySQL数据库（内部使用）	13306	3306

第四步：访问并初始化JumpServer#

获取Windows10电脑的内网IP：
**ipconfig**CMD/PowerShell输入，找到「以太网适配器以太网」→ 「IPv4地址」（如：192.168.1.100）
**http://内网IP:18080**打开浏览器（本地或公司内网其他电脑），访问：（例：http://192.168.1.100:18080）
首次登录，使用默认管理员账号：
用户名：admin
密码：admin
登录后，系统会强制要求修改密码（必须修改），建议密码：12位以上，大小写+数字+特殊符号，如：Admin@123456
修改密码后，进入JumpServer主界面，初始化完成

三、安全加固（重点！防爆破、防越权）#

针对多外部供应商工程师场景，必须开启以下安全设置，防止密码爆破、越权操作，确保业务安全。

1. 开启MFA二次验证（必须开）#

登录JumpServer管理员账号（admin），点击左侧「系统设置」→ 「认证安全」
找到「多因素认证（MFA）」，勾选「启用多因素认证」，选择「TOTP」（手机验证码），点击「保存」
后续所有用户（包括管理员、外部工程师）登录时，除了账号密码，还需要手机APP（如：谷歌验证器、微软验证器）的动态验证码，就算密码泄露，也无法登录

2. 设置登录失败锁定（防暴力破解）#

左侧「系统设置」→ 「认证安全」→ 「登录限制」
配置参数（建议）：
登录失败次数：5次
锁定时间：30分钟
点击「保存」，防止黑客批量爆破密码

3. 开启登录验证码#

左侧「系统设置」→ 「认证安全」→ 勾选「启用登录验证码」
选择「图形验证码」，点击「保存」，防止机器人扫描登录

4. 配置IP白名单（最有效，推荐）#

此设置可直接拦截非授权IP，是最有效的防爆破手段，强烈开启！

左侧「系统设置」→ 「安全设置」→ 「IP白名单」
点击「添加」，输入外部供应商工程师的公网IP（或内网IP），备注供应商名称，点击「保存」
勾选「启用IP白名单」，点击「保存」，此时只有白名单内的IP能访问JumpServer，其他IP直接被拦截

5. 禁用默认账号、强化密码规则#

禁用默认admin账号（可选）：左侧「用户管理」→ 「用户列表」→ 点击admin → 「禁用」，新建一个新的管理员账号（避免默认账号被针对）
强化密码规则：左侧「系统设置」→ 「认证安全」→ 「密码策略」，配置：
密码长度：≥12位
密码复杂度：必须包含大小写字母、数字、特殊符号
密码有效期：90天（定期更换密码）

四、外部工程师访问配置（3种方案，选一种即可）#

核心需求：让外部供应商工程师能访问JumpServer，同时不暴露公司内网和业务服务器，优先选方案A（最安全）。

方案A：内网穿透（最安全，不暴露公网）→ 推荐#

使用Tailscale（免费、简单），让工程师加入虚拟局域网，仅授权访问JumpServer，不暴露任何公网端口，最适合多外部厂商场景。

在部署JumpServer的Windows10电脑上安装Tailscale：https://tailscale.com/download/windows，安装后注册登录（用邮箱即可）
外部工程师在自己的电脑上安装Tailscale，注册后，告知你他的Tailscale邮箱
https://login.tailscale.com/你登录Tailscale后台（），将工程师的邮箱加入你的团队，批准访问
工程师登录Tailscale后，即可在浏览器访问：http://Windows10内网IP:18080（例：http://192.168.1.100:18080），无需暴露公网

方案B：端口映射（省事，需做好安全）#

通过路由器做端口映射，让工程师通过公网IP访问JumpServer，需配合IP白名单、MFA验证，否则有爆破风险。

登录公司路由器管理后台（一般是192.168.1.1或192.168.0.1，账号密码在路由器背面）
找到「端口映射」「虚拟服务器」或「NAT转发」功能，添加映射规则：
外部端口：18080（和JumpServer Web端口一致）
内部IP：部署JumpServer的Windows10内网IP（如192.168.1.100）
内部端口：18080
协议：TCP
保存规则后，工程师即可访问：http://公网IP:18080（公网IP可在路由器后台查看，或百度「我的IP」）
必须开启「IP白名单」，只允许供应商工程师的公网IP访问，否则有爆破风险

方案C：花生壳内网穿透（折中，无需配置路由器）#

在Windows10电脑上安装花生壳客户端：https://hsk.oray.com/download/，注册登录
添加映射：选择「HTTP」协议，内部IP填写Windows10内网IP，内部端口填写18080，生成花生壳域名
工程师访问花生壳生成的域名（如：xxx.vip.oray.com<18080>），即可进入JumpServer

五、多厂商工程师管理（核心操作）#

实现「不同厂商、不同工程师，只能访问授权的服务器，操作全程审计」，避免越权。

1. 创建用户组（按厂商分组）#

左侧「用户管理」→ 「用户组」→ 「创建用户组」
填写组名称（如：A厂商、B厂商），备注厂商信息，点击「保存」

2. 创建工程师账号（按厂商分配）#

左侧「用户管理」→ 「用户列表」→ 「创建用户」
填写信息：
用户名：建议包含厂商名称（如：a_eng01，A厂商工程师01）
密码：按密码策略设置，告知工程师后，强制其首次登录修改
用户组：选择对应厂商的用户组
角色：选择「普通用户」（仅授予必要权限，不允许管理）
点击「保存」，重复操作，为每个工程师创建独立账号

3. 添加服务器资产（Linux+Windows）#

左侧「资产管理」→ 「资产列表」→ 「创建资产」
根据服务器系统选择类型：
Linux服务器：资产类型选择「Linux」，填写服务器内网IP、SSH端口（默认22），填写服务器账号密码（或密钥）
Windows服务器：资产类型选择「Windows」，填写服务器内网IP、RDP端口（默认3389），填写管理员账号密码
点击「保存」，重复操作，添加所有需要管理的服务器

4. 授权（按厂商分配服务器）#

关键：仅授权厂商对应服务器，避免跨厂商越权访问！

左侧「权限管理」→ 「资产授权」→ 「创建授权」
配置授权规则：
授权名称：如「A厂商授权」
用户组：选择「A厂商」用户组
资产：选择A厂商需要访问的服务器（仅授权对应服务器，不允许访问其他厂商的服务器）
权限：选择「仅查看+操作」（不授予管理权限）
点击「保存」，重复操作，为不同厂商分配对应服务器授权

5. 查看操作审计（关键，可追责）#

审计记录不可删除，是出问题后定位责任的核心依据，务必定期查看！

查看命令记录（Linux）：左侧「审计中心」→ 「命令审计」，可查看所有工程师在Linux服务器上执行的命令，支持搜索、回放
查看录屏记录（Windows）：左侧「审计中心」→ 「会话审计」，找到对应Windows服务器的会话，点击「回放」，可查看工程师全程操作（鼠标、键盘、桌面操作）
所有审计记录不可删除，出问题可直接定位到具体工程师和操作内容

六、常见问题排查（部署/使用中遇到问题，先看这里）#

以下是部署和使用中最常遇到的问题，优先按此排查，无需额外找解决方案。

问题1：Docker启动失败，提示「WSL 2 installation is incomplete」？ 解决：按提示下载安装WSL 2，安装后重启电脑，再启动Docker。
问题2：访问http://内网IP:18080，无法打开页面？ 解决：1. 检查Docker容器是否正常运行（cmd输入docker ps）；2. 检查Windows防火墙，放行18080、12222、13389端口；3. 确认内网IP是否正确。
问题3：工程师登录后，看不到任何服务器？ 解决：检查「资产授权」是否配置正确，确保用户组被授予对应服务器的访问权限。
问题4：Windows服务器无法远程（RDP）？ 解决：确认Windows服务器开启RDP远程功能，防火墙放行3389端口，JumpServer中添加资产时，RDP端口填写正确。
问题5：Docker容器重启后，JumpServer数据丢失？ 解决：确认部署命令中「-v D:\JumpServer\data:/opt/jumpserver/data」参数正确，数据会保存在D盘JumpServer/data文件夹，不会丢失。

七、后续维护（简单，无需频繁操作）#

备份数据：定期复制D盘「D:\JumpServer\data」文件夹，保存到其他磁盘，防止数据丢失
**docker restart 容器ID**重启JumpServer：若出现异常，CMD/PowerShell输入（容器ID可通过docker ps查看）
升级JumpServer：无需升级，当前版本（v3.10.3）足够满足4-5台服务器、多厂商管理需求
清理录屏：若磁盘空间不足，可在JumpServer后台「审计中心」→ 「会话审计」，删除旧的录屏记录

八、总结#

本教程利用闲置Windows10电脑，通过Docker部署JumpServer，已完成「端口修改、安全加固、多厂商分权、操作审计」，完全解决：

替代向日葵/ToDesk，实现统一远程入口
多外部工程师分权管理，避免越权
操作全程录屏、命令审计，可追责
防扫描、防爆破，保障业务安全
不侵入业务服务器，不污染系统，部署简单

后续若服务器数量增加、团队扩大，可直接沿用此方案，无需重新部署。

本地MySQL8.0 安装 + 宝塔5.7双库共存完整笔记

Wed, 02 Sep 2026 00:00:00 GMT

一、安装前说明#

本机已安装：宝塔 MySQL 5.7
本次安装：MySQL 8.0.36
端口方案：宝塔 5.7 改端口，MySQL 8.0 默认 3306
目标：两个数据库同时运行、互不冲突

二、MySQL 8.0 安装图文步骤（逐页操作）#

选择安装类型 选择 Server Only（仅安装服务端，最纯净），点击 Next。
安装依赖（VC++ 运行库） 点击 Execute，等待自动安装完成，点击 Next。
端口与运行模式【关键】
- Config Type：Development Computer（开发模式，不影响功能）
- Port：3306（默认）
- 勾选：TCP/IP、Open Windows Firewall ports
- 不勾选：Named Pipe、Shared Memory
- 点击 Next
认证方式【必选，否则老工具连不上】 选择 Use Legacy Authentication Method（保留 5.x 兼容），点击 Next。
设置 root 密码 输入自定义密码、重复密码，无需新建用户，点击 Next。
Windows 服务配置
- Service Name：MySQL80（默认）
- 勾选：开机自启
- 运行账户：Standard System Account
- 点击 Next
权限配置 保持默认第一项，点击 Next。
执行安装 点击 Execute，等待全部打勾，点击 Finish 完成。

三、MySQL 8.0 环境变量配置#

默认路径：

1
C:\Program Files\MySQL\MySQL Server 8.0\bin

配置步骤：

此电脑 → 属性 → 高级系统设置 → 环境变量
系统变量 → Path → 编辑
新建 → 粘贴上面路径
保存
生效方式：关闭所有 CMD，重新打开

四、双数据库登录命令#

Terminal window

1
# 登录 MySQL 8.0
2
mysql -u root -p -P3306
3

4
# 登录宝塔 MySQL 5.7（端口改成你自定义的）
5
mysql -u root -p -P你修改的端口

五、Navicat 连接双数据库#

MySQL 8.0

主机：127.0.0.1
端口：3306
用户名：root
密码：安装时设置的密码

宝塔 MySQL 5.7

主机：127.0.0.1
端口：你修改后的端口
用户名：root
密码：宝塔数据库密码

六、常用命令#

1
select version();    -- 查看版本
2
show databases;      -- 查看数据库
3
exit;                -- 退出

七、重要注意事项#

两个数据库端口不能一样，否则冲突
必须选兼容认证模式，否则 Navicat 连不上
Development 模式不影响功能，只是省内存
环境变量配置后必须重启 CMD
两个数据库完全独立，数据不互通

在「水果篮子」里，重新学会好好生活

Wed, 02 Sep 2026 00:00:00 GMT

本文素材取自 MyAnimeList 上的漫画条目 Fruits Basket（水果篮子），数据均为站点公开信息。

缘起：随手点开的一部漫画#

前几天在 myanimelist.net 上漫无目的地翻漫画排行，手指停在了 Fruits Basket 这一页。评分 8.53、被 15 万多人收藏、长期排在总榜前 200——一部 1998 年就开始连载的「老番」，凭什么到现在还这么能打？

带着疑问读了几话，答案很简单：它把「好好生活」这件事，讲得太温柔了。

它到底是什么故事#

女主角 本田透（Tooru Honda） 是个父母双亡、只能住在林中帐篷里的女孩子。偏偏她被神秘的 草摩家 收留了——而这个家族藏着一个奇怪的诅咒：被异性拥抱时，会化身成十二生肖里的动物。

于是故事就沿着「一个普通女孩，闯进一个不普通家庭的日常」铺开：

透用她近乎笨拙的善良，一点点焐热了每个被诅咒困住的家人；
草摩家那些别扭、疏离、互相伤害的相处方式，慢慢被「被接纳」取代；
没有惊天逆转，只有一顿顿饭、一次次倾诉、一个个普通到不能再普通的傍晚。

作者 高屋奈月（Natsuki Takaya） 一人担纲原作与作画，1998 年 7 月到 2006 年 11 月连载，全 23 卷、136 话，最终拿下 第 25 届讲谈社漫画奖（少女部门）。

为什么它属于「生活」书单#

它的标签是 Drama / Romance / Supernatural，主题也挂着 Love Polygon、School——听起来很「王道少女漫」。但读完你会明白，真正打动人的是那些生活质地：

家不一定是血缘，而是「有人等你回家吃饭」。 透失去双亲后，草摩家递来的那碗饭，比任何设定都更像一个「家」的样子。
情绪不需要「大事」来承载。 一通电话、一场雨、一句没说出口的抱歉，漫画都给了它该有的重量。
治愈不是瞬间药方，而是日复一日的选择。 草摩家的人不是被一句话救好的，是被透长久地、稳定地对待，才慢慢松动了心里的壳。

这几点，放在我们自己柴米油盐的日子里，其实都成立。

持续更新中，尽请期待！

本地MySQL8.0 安装 + 宝塔5.7双库共存完整笔记

Wed, 02 Sep 2026 00:00:00 GMT

一、安装前说明本机已安装：宝塔 MySQL 5.7 本次安装：MySQL 8.0.36 端口方案：宝塔5.7改端口，MySQL8.0 默认 3306 目标：两个数据库同时运行、互不冲突二、MySQL8.0 安装图文步骤（逐页操作）

选择安装类型选择：Server Only（仅安装服务端，最纯净）点击：Next
安装依赖（VC++运行库）点击：Execute 等待自动安装完成点击：Next
端口与运行模式【关键】 Config Type：Development Computer（开发模式，不影响功能） Port：3306（默认）勾选：TCP/IP、Open Windows Firewall ports 不勾选：Named Pipe、Shared Memory 点击：Next
认证方式【必选，否则老工具连不上】选择：Use Legacy Authentication Method（保留5.x兼容）点击：Next
设置 root 密码输入自定义密码重复密码无需新建用户点击：Next
Windows 服务配置 Service Name：MySQL80（默认）勾选：开机自启运行账户：Standard System Account 点击：Next
权限配置保持默认第一项点击：Next
执行安装点击：Execute 等待全部打勾点击：Finish 完成三、MySQL8.0 环境变量配置默认路径： C:\Program Files\MySQL\MySQL Server 8.0\bin 配置步骤：此电脑 → 属性 → 高级系统设置 → 环境变量系统变量 → Path → 编辑新建 → 粘贴上面路径保存生效方式：关闭所有CMD，重新打开四、双数据库登录命令登录 MySQL8.0 mysql -u root -p -P3306 登录宝塔MySQL5.7 mysql -u root -p -P你修改的端口五、Navicat 连接双数据库 MySQL8.0 主机：127.0.0.1 端口：3306 用户名：root 密码：安装时设置的密码宝塔MySQL5.7 主机：127.0.0.1 端口：你修改后的端口用户名：root 密码：宝塔数据库密码六、常用命令 select version(); — 查看版本 show databases; — 查看数据库 exit; — 退出七、重要注意事项两个数据库端口不能一样，否则冲突必须选兼容认证模式，否则Navicat连不上 Development模式不影响功能，只是省内存环境变量配置后必须重启CMD 两个数据库完全独立，数据不互通

JieGerBlog 布局系统详解

Sat, 03 Jan 1970 00:00:00 GMT

📖 概述#

JieGerBlog 提供了灵活的布局系统，允许您根据内容需求和个人喜好自定义博客的视觉呈现方式。布局系统主要包括侧边栏布局和文章列表布局两个维度，它们相互配合，共同决定了页面的整体结构。

本文将详细介绍 JieGerBlog 的各种布局模式、它们的特点、使用场景，以及不同布局组合的效果。

左侧边栏+列表布局

右侧边栏+网格布局

左侧边栏+三列网格布局

双侧边栏+列表布局

双侧边栏+网格布局

双侧边栏+网格瀑布流布局

一、侧边栏布局系统#

侧边栏是博客页面的重要组成部分，用于展示导航、分类、标签、统计信息等辅助内容。JieGerBlog 支持两种侧边栏布局模式。

1.1 单侧边栏模式#

左侧边栏 (position: “left”)#

左侧边栏布局

右侧边栏 (position: “right”)#

右侧边栏布局

特点#

侧边栏固定在页面其中一侧
文章阅读区域体验更佳，更宽敞
更加简约，没有那么紧凑

适用场景#

传统博客风格
强调导航和分类的博客
需要突出用户资料的个人博客
内容为主，辅助信息次之的场景

Tip

可以通过showBothSidebarsOnPostPage配置是否在文章详情页显示双侧边栏

当position为left或right时开启此项后，文章详情页将显示双侧边栏，主页等其他页面保持单侧边栏

适用在只想用单侧栏，但在文章详情页想用对侧栏的目录等组件的场景

配置示例#

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // 左侧边栏
4
  showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
5
};

1.2 双侧边栏模式 (position: “both”)#

特点#

左右两侧同时存在侧边栏
主内容区域位于中间
最大化利用屏幕空间
可以展示更多辅助信息
适合宽屏显示器

布局结构#

双侧边栏+列表布局

双侧边栏+网格布局

适用场景#

宽屏桌面端浏览
信息密集型博客
需要展示大量辅助内容
专业性强的技术博客

配置示例#

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // 双侧边栏

二、文章列表布局系统#

文章列表是博客首页和归档页的核心内容，JieGerBlog 提供两种展示方式，并支持多种网格配置。

2.1 列表模式 (defaultMode: “list”)#

特点#

单列纵向排列
显示文章封面图，可配置在左侧或右侧
展示更多文章摘要
适合深度阅读

列表布局结构#

列表模式布局

封面位置#

列表模式的封面图默认在卡片右侧，可以通过 coverPosition 改到左侧。改到左侧后，标题前的主题色竖线会自动隐藏（它是贴着卡片左边缘的设计），腾出的间距留给正文。

网格模式的封面固定在卡片顶部，不受这项配置影响。

优点#

✅ 视觉冲击力强，封面图吸引眼球
✅ 可以展示更多文章信息（摘要、标签等）
✅ 适合图片内容丰富的博客
✅ 移动端友好，单列更易阅读
✅ 兼容所有侧边栏配置（单侧、双侧）

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list",    // 列表模式
4
    coverPosition: "right", // 封面图位置："right" 右侧，"left" 左侧
5
  },
6
};

2.2 网格模式 (defaultMode: “grid”)#

特点#

自适应列数，根据浏览器宽度自动调整
紧凑布局，信息密度高
适合快速浏览

自适应网格#

网格模式通过 columnWidth 配置卡片的最小宽度（单位 px），浏览器会根据容器可用宽度自动计算能容纳多少列。

网格布局

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "grid",
4
    grid: {
5
      masonry: true,      // 开启瀑布流
6
      columnWidth: 320,   // 卡片最小宽度(px)，浏览器自动计算列数
7
    },
8
  },
9
};

2.3 瀑布流布局 (Masonry)#

JieGerBlog 的网格模式内置了智能瀑布流布局支持，解决了网格布局中因图文混合文章导致的卡片高度不一致导致的空白问题。

瀑布流布局

智能排版：自动将卡片放置到最短的列，最大化利用垂直空间。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上方卡片，消除垂直方向的空白间隙。
自适应列数：瀑布流同样根据 columnWidth 和容器宽度动态计算列数，无需固定配置。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南#

JieGerBlog 允许您自由组合侧边栏和文章列表布局。以下是各种组合的效果说明。

侧边栏模式	文章列表模式	推荐度	适用场景
单侧边栏	列表模式	⭐⭐⭐⭐⭐	摄影、设计、生活类博客，强调图片和沉浸感
单侧边栏	网格模式	⭐⭐⭐⭐⭐	技术、笔记类博客，平衡阅读与检索效率
双侧边栏	列表模式	⭐⭐⭐⭐⭐	需要展示大量侧边栏信息的站点
双侧边栏	网格模式	⭐⭐⭐⭐⭐	极客风格，追求最高信息密度

四、响应式布局行为#

JieGerBlog 的布局系统具有智能的响应式设计，会根据屏幕尺寸自动调整。

为了保证最佳阅读体验，系统会在屏幕变窄时自动调整布局：

网格列数自动减少：网格模式的列数由 columnWidth 和容器宽度自动决定，屏幕越窄列数越少。
列表模式 -> 网格模式：当屏幕宽度小于 380px（超小屏设备）时，列表模式会自动切换为网格模式，以保证卡片内容的可读性。
双侧边栏 -> 单侧边栏：当屏幕宽度小于 1280px 时，会根据tabletSidebar配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。

五、常见问题#

Q1: 如何调整网格列数？#

A: 通过 columnWidth 配置卡片最小宽度即可。值越小，同等宽度下列数越多；值越大，列数越少。浏览器会自动根据可用宽度计算最佳列数。

六、总结#

JieGerBlog 的布局系统给予了您更大的自由度，您都可以通过简单的配置实现。

我们建议您根据自己的内容类型和目标读者的设备偏好，尝试不同的组合，找到最适合您的博客形态。

JieGerBlog Wiki Link 内部链接示例

Sat, 03 Jan 1970 00:00:00 GMT

JieGerBlog 支持在 Markdown、MDX 文章中使用 Obsidian 风格的 Wiki Link 内部链接。链接目标填写文章的 slug 或文件路径，都不需要包含扩展名，具体匹配规则见下文「链接目标的三种写法」。

文章链接卡片#

[[slug]] 单独成段时，会自动读取目标文章的标题、描述、发布时间、分类、标签和封面，渲染为链接卡片：

1
[[jiegerbolg]]
2

3
[[guide/index]]
4

5
[[markdown-extended]]

JieGerBlog 一款清新美观的 Astro 博客主题模板

JieGerBlog 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。

1970-01-02文章示例#Markdown#JieGerBlog#博客#主题#模板

JieGerBlog 简单使用指南

如何使用 JieGerBlog 博客模板。

1970-01-02博客指南#JieGerBlog#博客#Markdown#指南

markdown-extended

行内链接#

[[slug]] 出现在正文中间时，渲染为普通链接，链接文字自动使用目标文章的标题

1
请参阅 [[jiegerbolg]] 了解主题特性。

请参阅 JieGerBlog 一款清新美观的 Astro 博客主题模板了解主题特性。

自定义显示标题#

在 | 后填写链接的显示文字。行内链接会用它替换文章标题；单独成段时依然渲染为卡片，卡片标题使用自定义文字，描述、时间、分类、标签和封面仍然读取目标文章：

1
请参阅 [[jiegerbolg|主题介绍]] 了解主题特性。
2

3
[[jiegerbolg|JieGerBlog 主题介绍]]

请参阅主题介绍了解主题特性。

JieGerBlog 主题介绍

1970-01-02文章示例#Markdown#JieGerBlog#博客#主题#模板

一个例外：如果 | 后的文字只是把链接目标又抄了一遍（[[guide/index|index]]），会被当作无效别名忽略，仍然显示文章标题。Obsidian 在插入的链接时会自动补上这样的别名，避免笔记里显示一长串路径，这个例外就是为它准备的。

链接目标的三种写法#

用 Obsidian 管理文章时，把 src/content/posts 目录本身作为 Obsidian 仓库（vault）打开。下文提到的「仓库根目录」都指这个目录，它正好也是 JieGerBlog 解析链接路径的起点。

链接目标按以下顺序匹配：

写法	示例	在 Obsidian 中
frontmatter 的 `slug`	`[[jiegerbolg-wiki-link]]`	✗ 不支持
文件路径（相对仓库根目录）	`[[guide/jiegerbolg-layout-system]]`	✓ 需改设置（推荐）
裸文件名（仓库内唯一时）	`[[jiegerbolg-layout-system]]`	✓ 默认即是

第一种：slug#

slug 写法在 Obsidian 中不支持，slug 是 JieGerBlog 自己的概念，Obsidian 不读取 frontmatter 里的 slug，所以按 slug 写的链接在 Obsidian 里既不会自动补全，也点不动，只有构建出的站点上能正常跳转。如果你主要在 Obsidian 里写作，用下面两种写法。

第二种：文件路径（推荐）#

文件路径写法需要改 Obsidian 设置，在 设置 → 文件与链接 → 链接 → 内部链接类型 中选择基于仓库根目录的绝对路径，Obsidian 插入的链接才会带上目录：

1
[[guide/jiegerbolg-layout-system|jiegerbolg-layout-system]]

JieGerBlog 布局系统详解

深入了解 JieGerBlog 的布局系统，包括侧边栏布局（左侧/双侧）和文章列表布局（列表/网格），以及自适应网格列数。

1970-01-03博客指南#JieGerBlog#布局#博客#指南

因为仓库根目录就是 src/content/posts，Obsidian 写出的这个路径和 JieGerBlog 需要的路径完全一致，不需要任何额外转换。

上面这行末尾的 |jiegerbolg-layout-system 是 Obsidian 自动补的别名，JieGerBlog 会忽略它，卡片标题仍然取文章的 title，除非你把它修改和文件名不一致，才会变成你修改后的别名。

内部链接类型下拉框里的基于当前笔记的相对路径只在同目录内可用：它给同目录文章生成的是裸文件名，能正常匹配；但跨目录时会生成 ../ 前缀，JieGerBlog 无法解析，链接会按原文显示。

第三种：裸文件名#

「内部链接类型」的默认值就是尽可能简短的形式：只要文件名在整个仓库里唯一，Obsidian 插入的链接就只有文件名，不带目录。这种写法不需要改任何设置，效果和写完整路径完全一致：

1
[[jiegerbolg-layout-system]]

JieGerBlog 布局系统详解

深入了解 JieGerBlog 的布局系统，包括侧边栏布局（左侧/双侧）和文章列表布局（列表/网格），以及自适应网格列数。

1970-01-03博客指南#JieGerBlog#布局#博客#指南

文件名重名时这种写法会失效，构建日志里会给出提示，改用完整文件路径即可，所以推荐直接修改 Obsidian 内部链接类型设置为基于仓库根目录的绝对路径，使用第二种文件路径写法，一劳永逸

链接到其他文章的标题#

在文章 slug 后添加 #标题。带标题锚点的链接始终渲染为普通链接：

查看代码块语法高亮

JieGerBlog 布局系统详解#相关链接

1
[[code-examples#语法高亮|查看代码块语法高亮]]
2

3
[[guide/jiegerbolg-layout-system#相关链接|jiegerbolg-layout-system]]

标题锚点使用与页面标题相同的 slug 规则，因此中文、空格和大小写都会按页面实际生成的 ID 处理。

链接到本页标题#

省略文章 slug，只填写标题即可链接到当前文章：

跳转到本页目标

1
[[#本页目标|跳转到本页目标]]

本页目标#

这是本页 Wiki Link 指向的标题。

不支持附件嵌入#

附件嵌入语法目前不会被转换，会按原文显示：

![[image.png]]

行内代码和代码块中的 [[jiegerbolg]] 也不会被转换。