夏夜流萤

在 Astro 博客中为 Markdown 添加多图并排的自适应网格画廊功能

Sun, 01 Mar 2026 00:00:00 GMT

背景#

在编写技术博客或是日常分享记录时，我们经常会遇到需要将几张照片（如对比图、风景照片）并排展示的需求。

默认的 Markdown 语法下，直接把好几张图写在一起只会根据屏幕宽度往下折行排布，并不能得到整齐划一的画廊（Gallery）排版效果。如果要使用原生的 HTML 写栅格代码，又会严重破坏 Markdown 中原始书写的流畅感与整洁度。

为了解决这个问题，我决定借助 Unified 体系中的 Remark 插件，在 Astro 环境里无缝开发一个自定义标签 [grid]。只要将图片放进这个标签里，系统就会自动将它们变为自适应的响应式网格布局并自动补齐对齐高度！

这个功能使用 Claude Code 协助完成。

插件最终效果与语法#

设想中的语法十分简单，只要用 [grid] 和 [/grid] 包裹住常规的 Markdown 图片语法即可。

例如两张照片的代码如下：

1
[grid]
2
![示例1](image_url_1)
3
![示例2](image_url_2)
4
![示例3](image_url_1)
5
[/grid]

最终效果

由于我们在底层介入了 AST（抽象语法树），渲染出的结果将不再是松散的图片，而是带有 Tailwind 栅格属性（grid, grid-cols-2 等）的容器，并且它可以依据内部包了两图还是三图做到自动计算列数进行展现。

原理分析：AST 语法树与 Remark#

在我们的博客打包全流程（Markdown -> HTML）中，主要经历下面两个核心生态的转换：

Remark (mdast): 解析 Markdown，生成抽象语法树 (AST)。
Rehype (hast): 接手 AST 将其转换为 HTML 并添加结构和类名。

我们要实现在 Remark 阶段截获特定的明文标记 [grid] 并进行打包。核心在于利用 unist-util-visit 库遍历这段抽象树中的所有 paragraph（段落），如果我们在段落头部发现了 [grid]，我们就可以通过将其转换成特定的 HTML div 节点来渲染出网格。

第一步：编写核心插件 `remark-image-grid.js`#

我们在 src/plugins/remark-image-grid.js 下编写自己的模块处理器：

1
import { visit } from "unist-util-visit";
2

3
/**
4
 * Custom Remark plugin for creating responsive image grids.
5
 *
6
 * It parses markdown blocks surrounded by `[grid]` and `[/grid]` tags and wraps
7
 * the contained images in a styled `div` container with a grid layout.
8
 * The column count is evaluated automatically based on the number of inserted images
9
 * inside the grid tags (up to 4 columns).
10
 */
11
export function remarkImageGrid() {
12
  return (tree) => {
13
    // 聚焦根节点，以便收集我们要进行重组的元素
14
    if (tree.type === 'root') {
15
      const newChildren = [];
16
      let inGrid = false;
17
      let gridChildren = [];
18

19
      for (let i = 0; i < tree.children.length; i++) {
20
        let node = tree.children[i];
21

22
        // 识别包含图片的段落中的 [grid] 或者 [/grid] 标记
23
        if (node.type === 'paragraph' && node.children.length > 0) {
24
          const first = node.children[0];
25
          const last = node.children[node.children.length - 1];
26

27
          let containsGridStart = false;
28
          let containsGridEnd = false;
29

30
          if (first.type === 'text' && first.value.trim().startsWith('[grid]')) {
31
            containsGridStart = true;
32
          }
33
          if (last.type === 'text' && last.value.trim().endsWith('[/grid]')) {
34
             containsGridEnd = true;
35
          }
36

37
          // Case: 当 [grid] 标签跨越不同段落（中间有空行换行）时
38
          if (!inGrid && containsGridStart) {
39
            inGrid = true;
40
            // 清理语法标签文本本身
41
            first.value = first.value.replace(/^\s*\[grid\]\s*/, '');
42
            if (node.children.length === 1 && first.value.trim() === '') {
43
               // 处理它自成一行的极端情况
44
            } else {
45
               gridChildren.push(node);
46
            }
47
            continue;
48
          }
49

50
          if (inGrid && containsGridEnd) {
51
             inGrid = false;
52
             last.value = last.value.replace(/\s*\[\/grid\]\s*$/, '');
53
             if (node.children.length === 1 && last.value.trim() === '') {
54
             } else {
55
                 gridChildren.push(node);
56
             }
57

58
             // ✨ 重点：动态计数，根据包含的图片自动计算列数，最高支持一行四列
59
             let imgCount = 0;
60
             gridChildren.forEach(child => {
61
                 visit(child, 'image', () => { imgCount++; });
62
             });
63
             const cols = imgCount || 2;
64
             const mdColClass = cols === 1 ? 'md:grid-cols-1' :
65
                                cols === 2 ? 'md:grid-cols-2' :
66
                                cols === 3 ? 'md:grid-cols-3' : 'md:grid-cols-4';
67

68
             // 将节点重新推入为一个自带 class 定义的 HTML 结构节点！
69
             newChildren.push({
70
               type: 'paragraph',
71
               data: {
72
                 hName: 'div',
73
                 hProperties: { className: ['image-grid', 'grid', 'grid-cols-1', mdColClass, 'gap-4', 'my-4'] }
74
               },
75
               children: gridChildren
76
             });
77
             gridChildren = []; // 初始化留待下次使用
78
             continue;
79
          }
80
        }
81

82
        // 把普通的非图节点正常塞回 AST 中
83
        if (inGrid) {
84
           gridChildren.push(node);
85
        } else {
86
           newChildren.push(node);
87
        }
88
      }
89

90
      // 防止用户忘记写闭合标签，帮他们补全推入
91
      if (inGrid) {
92
         newChildren.push(...gridChildren);
93
      }
94

95
      tree.children = newChildren;
96
    }
97
  };
98
}

展开收起

以上的逻辑非常巧妙地做到了几点：

处理了用户是否在标签里换行的问题（AST 会将其切割为不同的 paragraph 段落，所以需要用类似流的状态机 inGrid 变量开启拦截器）；
动态栅格分配：利用 Tailwind 中 grid 属性灵活分配每一行的占比；

第二步：在 Astro 中引入该插件#

只需前往项目的 astro.config.mjs 中登记上这一插件，它就会自动在我们构建（build）时注入生效了！

src/astro.config.mjs

1
import { remarkImageGrid } from "./src/plugins/remark-image-grid.js";
2

3
// ...略去无关代码...
4

5
export default defineConfig({
6
  markdown: {
7
    remarkPlugins: [
8
      remarkImageGrid, // 我们自定义开发的网格插件
9
      // ...其他remark插件,
10
    ],
11
  }
12
})

第三步：CSS 兜底高度对齐防翻车#

如果你测试一下可能会发现一个致命问题：虽然左右并排了！但是左侧的图片是个正方形，右边是一张扁平的长图，这就导致底下生成的图注（figcaption）一高一低参差不齐！

因此我们需要结合写好的 image-grid 父类在公共 CSS 样式中添加一套自适应填充满容器宽高的裁剪逻辑：

src/styles/markdown.css展开收起

1
.image-grid {
2
  @apply items-stretch;
3

4
  center {
5
    @apply h-full w-full;
6

7
    figure {
8
      @apply flex flex-col h-full w-full m-0 p-0;
9

10
      img {
11
        /* object-cover魔法让它中心裁剪完美等高，杜绝形变扭曲 */
12
        @apply object-cover w-full flex-grow rounded-xl m-0;
13
        height: 100%;
14
      }
15

16
      figcaption {
17
        @apply mt-2 mb-0; /* 将图注控制在同一底部水平线上 */
18
      }
19
    }
20
  }
21
}

展开收起

这里利用 Tailwind (或者纯 CSS 也可) 使用给图片层添加 height: 100% 设置并用 object-cover 进行了中心修剪，这不仅使得画面毫无拉扯而且强制它们保证在了一排同样完美的基线当中！

结语#

通过仅仅一段几十行的轻量 AST Remark 劫持逻辑以及搭配了几行 CSS。我们就十分优雅地给自己的博客注入了超酷的相册画廊（Image Grid）能力。这种完全基于 AST 标准流的方式比通过客户端注入 JS 会产生更少的性能消耗（因为它完全在服务端预渲染 HTML 阶段组装结束了）。

Astro 静态博客文章推荐功能的实现思路

Fri, 27 Feb 2026 00:00:00 GMT

一、需求分析#

博客文章详情页底部通常只有”上一篇 / 下一篇”导航，用户读完后缺乏继续浏览的动力。

我希望在这里加一个推荐组件，分为两栏：

左栏 — 相关文章：基于算法在构建时预计算，纯静态 HTML，零客户端 JS
右栏 — 随机文章：每次刷新都不同，需要客户端 JS 实现

核心约束：这是 Astro 静态站点，没有服务端运行时。“相关”可以在构建时确定，“随机”只能在客户端实现。

这个功能使用 Claude Code 协助完成。

实现效果

二、推荐算法设计#

相关文章的推荐采用多维度综合评分，公式如下：

1
totalScore = tagMatchScore + titleSimilarityScore + timeFreshnessScore + categoryBonus

1. 标签匹配分（0-100）#

使用 Jaccard 相似度衡量两篇文章标签的重叠程度：

1
Jaccard(A, B) = |A ∩ B| / |A ∪ B|
2
tagMatchScore = Jaccard(当前文章标签, 候选文章标签) × 100

标签完全相同得 100 分，完全不同得 0 分。这是最直观的相关性信号。

2. 标题相似度分（0-100）#

标签可能为空或过于宽泛，标题往往能更精确地反映文章主题。同样使用 Jaccard 相似度，但需要先对标题分词。

关键问题是中英文混合标题的分词。方案对比：

方案	优点	缺点
按空格分割	简单	中文完全失效
jieba 等分词库	效果好	引入重依赖
`Intl.Segmenter`	零依赖，Node.js 内置	需要 Node 16+

最终选择 Intl.Segmenter，零依赖且天然支持中英混合：

1
function tokenizeTitle(title: string): Set<string> {
2
  const tokens = new Set<string>();
3
  const segmenter = new Intl.Segmenter("zh", { granularity: "word" });
4
  for (const { segment, isWordLike } of segmenter.segment(title)) {
5
    if (!isWordLike) continue; // 过滤标点和空白
6
    tokens.add(segment.toLowerCase()); // 英文统一小写
7
  }
8
  return tokens;
9
}

例如标题 "Astro 博客主题开发指南" 会被分为 {"astro", "博客", "主题", "开发", "指南"}。

3. 时间新鲜度分（0-30）#

采用 6 个月半衰期的指数衰减：

1
timeFreshnessScore = 30 × e^(-ln2 × daysSincePublished / 180)

刚发布的文章得 30 分，6 个月前的约 15 分，一年前约 7.5 分。这样在其他维度得分接近时，新文章会排在前面。

4. 分类加成（0 或 10）#

同分类的文章额外加 10 分，作为锦上添花的信号。

5. 选取策略#

不是简单地取 Top N，而是分两轮：

优先取有标签匹配的（tagMatchScore > 0），按总分排序
不足 5 篇时，从无标签匹配的候选中按 timeFreshnessScore + categoryBonus 降序补充
跳过加密文章，加密文章不会出现在推荐列表

这样保证了：有相关标签的文章一定优先，没有标签匹配时也不会显示空列表。

三、随机文章的实现#

问题：静态站无法实现服务端随机#

Astro 构建后输出纯 HTML，构建时的 Math.random() 只执行一次，结果被固化到 HTML 中。每次刷新看到的都是同样的”随机”结果。

方案：复用已有 API + 客户端渲染#

项目中已有一个 /api/allPostMeta.json 端点（日历组件在用），返回所有文章的元信息。直接复用它：

给 API 补充 category 和 password 字段
客户端 fetch 这个 JSON，过滤掉当前文章、相关文章和加密文章
Fisher-Yates 洗牌后取前 5 篇
用 DOM API 渲染列表

1
// 使用缓存避免重复请求
2
if (window.__allPostMetaCache) {
3
  render(window.__allPostMetaCache);
4
} else {
5
  fetch(apiUrl)
6
    .then(r => r.json())
7
    .then(data => {
8
      window.__allPostMetaCache = data;
9
      render(data);
10
    });
11
}

缓存共享#

日历组件和随机文章组件共享同一个 window.__allPostMetaCache，无论哪个先加载，API 只请求一次。swup 页面切换时也不会重复请求，只是重新随机选取并渲染。

四、组件架构#

1
RecommendedPost.astro
2
├── 左栏：相关文章（Astro 静态渲染）
3
│   ├── 构建时由 getRelatedPosts() 预计算
4
│   └── 输出纯 HTML，零 JS
5
└── 右栏：随机文章（客户端渲染）
6
    ├── 只渲染卡片骨架
7
    ├── <div id="random-posts-list"> 作为挂载点
8
    └── inline script fetch API 后 DOM 渲染

两栏各自独立的 card-base 卡片，通过 grid grid-cols-1 md:grid-cols-2 响应式布局。

五、关键设计决策总结#

决策	选择	原因
分词方案	`Intl.Segmenter`	零依赖，Node.js 内置
相似度算法	Jaccard	简单有效，适合集合比较
随机实现	客户端 fetch + shuffle	静态站能实现真随机的方式
数据源	复用 allPostMeta API	避免新建端点，与日历共享缓存
缓存策略	`window.__allPostMetaCache`	跨组件共享，swup 友好
左栏渲染	构建时静态 HTML	SEO 友好，零运行时开销
右栏渲染	客户端 DOM API	每次刷新真随机，体积极小

feat: 添加文章推荐组件（相关文章 +随机文章）

Astro 静态博客文章加密功能的实现思路

Wed, 25 Feb 2026 00:00:00 GMT

背景#

静态博客没有服务端，无法做传统的登录鉴权。但有时候我们确实需要让某些文章仅对知道密码的人可见。

核心思路很简单：构建时把文章 HTML 加密成密文写入页面，访客输入密码后在浏览器端解密。页面源码中不存在任何明文，密码也不会发送到任何服务器。

这个功能使用 Claude Code 协助完成。

演示文章：Firefly 文章加密

整体架构#

graph LR subgraph 构建时 Node.js A[Markdown/MDX] --> B[Astro 渲染 HTML] B --> C[AES-256-GCM 加密] C --> D[Base64 密文] end D -- 网络传输 --> E subgraph 运行时浏览器 E[访客输入密码] --> F[PBKDF2 派生密钥] F --> G[AES-GCM 解密] G --> H[注入 DOM 显示] end

加密算法#

选择 AES-256-GCM，原因：

AES-256 足够安全
GCM 模式自带认证（auth tag），能检测密文是否被篡改
Web Crypto API 原生支持，无需引入第三方库

密钥派生使用 PBKDF2（SHA-256，100,000 次迭代），从用户密码派生出 256 位密钥。

数据格式#

1
Base64( salt[16] + iv[12] + authTag[16] + ciphertext )

解密时按固定偏移切分即可。

构建时加密#

加密工具 crypto-utils.ts 只有一个导出函数：

1
import { createCipheriv, createHmac, pbkdf2Sync } from "node:crypto";
2

3
function deriveBytes(key: string, context: string, length: number): Buffer {
4
  return createHmac("sha256", key)
5
    .update(context).digest().subarray(0, length);
6
}
7

8
export function encryptContent(
9
  html: string, password: string, slug: string
10
): string {
11
  // 确定性 salt/iv —— 相同输入产生相同密文
12
  const salt = deriveBytes(password, `salt:${slug}`, 16);
13
  const iv   = deriveBytes(password, `iv:${slug}`, 12);
14
  const key  = pbkdf2Sync(password, salt, 100000, 32, "sha256");
15

16
  const cipher = createCipheriv("aes-256-gcm", key, iv);
17
  const encrypted = Buffer.concat([
18
    cipher.update(html, "utf8"), cipher.final()
19
  ]);
20

21
  return Buffer.concat([
22
    salt, iv, cipher.getAuthTag(), encrypted
23
  ]).toString("base64");
24
}

展开收起

为什么 salt 和 IV 是确定性的？#

通常加密应使用随机 salt/IV，但这里有特殊原因：Astro 的 dev server 在 HMR 时会重新渲染页面，如果每次 salt/IV 不同，产生的密文就不同，而 sessionStorage 中缓存的密码是用旧密文解密的——密文变了，缓存就失效了，开发时每次热更新都要重新输密码。

使用 HMAC-SHA256 从 password + slug 派生 salt/IV，保证相同输入始终产生相同密文，同时不同文章之间的 salt/IV 仍然不同。

桥接组件#

EncryptedPost.astro 是核心桥接组件：

1
---
2
const rawHtml = await Astro.slots.render("default");
3
const encryptedData = encryptContent(rawHtml, password, slug);
4
---
5

6
<div id="encrypted-container"
7
     data-encrypted={encryptedData}
8
     data-slug={slug}>
9
  <!-- 锁定 UI：密码输入框 -->
10
  <div id="password-ui">...</div>
11
  <!-- 解密后的内容注入到这里 -->
12
  <div id="decrypted-content" class="hidden"></div>
13
</div>

关键点是 Astro.slots.render("default")——它在构建时把 slot 中的所有内容（Markdown 正文、赞助块、许可证块）渲染成 HTML 字符串，然后加密。最终页面只包含 Base64 密文。

客户端解密#

使用 <script is:inline> 内联脚本，不依赖任何框架：

1
async function decrypt(pwd) {
2
  var raw = base64ToBytes(encryptedData);
3
  var salt = raw.slice(0, 16);
4
  var iv = raw.slice(16, 28);
5
  var authTag = raw.slice(28, 44);
6
  var ciphertext = raw.slice(44);
7

8
  // GCM 要求 ciphertext + authTag 拼接
9
  var combined = new Uint8Array(ciphertext.length + 16);
10
  combined.set(ciphertext);
11
  combined.set(authTag, ciphertext.length);
12

13
  var keyMaterial = await crypto.subtle.importKey(
14
    'raw', new TextEncoder().encode(pwd),
15
    'PBKDF2', false, ['deriveKey']
16
  );
17
  var key = await crypto.subtle.deriveKey(
18
    { name: 'PBKDF2', salt: salt,
19
      iterations: 100000, hash: 'SHA-256' },
20
    keyMaterial,
21
    { name: 'AES-GCM', length: 256 },
22
    false, ['decrypt']
23
  );
24
  var decrypted = await crypto.subtle.decrypt(
25
    { name: 'AES-GCM', iv: iv }, key, combined
26
  );
27
  return new TextDecoder().decode(decrypted);
28
}

展开收起

为什么不用 Svelte 组件？#

最初的实现用了 Svelte 5 组件 + client:load 水合。但遇到了一个棘手的问题：Astro 水合过程中，Svelte 5 的 $state 在异步回调（如 onMount 中的 sessionStorage 自动解密）中的赋值无法触发 DOM 更新。F5 刷新后组件状态混乱，按钮无法点击。

最终改为纯 <script is:inline> + 原生 DOM 操作，彻底消除了框架水合带来的问题。

内容注入的陷阱#

解密后通过 innerHTML 注入 HTML，但有两个问题需要处理：

1. Script 标签不执行#

innerHTML 注入的 <script> 标签是惰性的，浏览器不会执行它们。需要手动重建：

1
var scripts = contentEl.querySelectorAll('script');
2
for (var i = 0; i < scripts.length; i++) {
3
  var old = scripts[i];
4
  var ns = document.createElement('script');
5
  // 复制所有属性
6
  for (var j = 0; j < old.attributes.length; j++) {
7
    ns.setAttribute(old.attributes[j].name, old.attributes[j].value);
8
  }
9
  ns.textContent = old.textContent;
10
  old.parentNode.replaceChild(ns, old);
11
}

这对 Mermaid 图表的渲染脚本至关重要。

2. Mermaid 单例阻塞#

Mermaid 的渲染脚本有单例检查 window.mermaidInitialized。解密后重建脚本时，需要先重置这个标志：

1
if (typeof window.mermaidInitialized !== 'undefined') {
2
  window.mermaidInitialized = false;
3
}

3. TOC 目录重新初始化#

解密前 DOM 中没有文章内容，TOC 自然是空的。解密后需要通知 TOC 组件重新扫描标题：

1
setTimeout(function() {
2
  document.dispatchEvent(new CustomEvent('password:decrypted'));
3
}, 100);

侧边栏 TOC 和悬浮 TOC 都监听了这个事件，收到后重新初始化。

4. Fancybox 灯箱重新绑定#

Fancybox 在页面初始化时通过 Fancybox.bind() 绑定图片点击事件。解密后新注入的图片不在初始 DOM 中，自然没有被绑定，点击无法打开灯箱。解决方式同样是监听 password:decrypted 事件，延迟重新调用 setup()：

1
document.addEventListener("password:decrypted", () => {
2
  setTimeout(setup, 200);
3
});

加密范围#

不是整个页面都加密，需要精确控制范围：

内容	处理方式
文章正文	加密
赞助/分享块	加密（放在 slot 内）
许可证块	加密（放在 slot 内）
标题、元数据	不加密（文章列表也可见）
封面图	不加密
评论区	隐藏（加密文章不渲染评论组件）
TOC 目录	解密前隐藏，解密后动态生成
RSS	仅输出标题和描述，不渲染正文

在 [...slug].astro 中通过条件渲染实现：

1
{entry.data.password ? (
2
  <EncryptedPost password={entry.data.password} slug={entry.id}
3
                 hint={entry.data.passwordHint}>
4
    <Markdown><Content /></Markdown>
5
    <!-- 赞助块、许可证块也放在这里一起加密 -->
6
  </EncryptedPost>
7
) : (
8
  <> 正常渲染 </>
9
)}
10

11
<!-- 评论：加密文章不显示 -->
12
{entry.data.comment && !entry.data.password && <Comment />}

会话缓存#

密码缓存使用 sessionStorage，按文章 slug 存储：

1
// 解密成功后缓存
2
sessionStorage.setItem('pw:' + slug, pwd);
3

4
// 页面加载时尝试自动解密
5
var cached = sessionStorage.getItem('pw:' + slug);
6
if (cached) {
7
  decrypt(cached).then(showContent)
8
    .catch(function() { sessionStorage.removeItem(cacheKey); });
9
}

同一标签页会话内刷新无需重复输入
关闭浏览器后缓存自动清除
密码错误（如文章密码被修改）时自动清除缓存

使用方式#

在文章 frontmatter 中添加两个字段即可：

1
---
2
title: 私密文章
3
published: 2025-01-01
4
password: "your-password"
5
passwordHint: "可选的密码提示"
6
---
7

8
这里的所有内容都会被加密。

安全性说明#

这个方案的安全性取决于密码强度。需要明确的是：

密文在页面源码中公开可见，任何人都可以拿到
安全性完全依赖 AES-256-GCM + PBKDF2 的密码学强度
弱密码（如 123456）理论上可以被暴力破解
适合隐私保护场景，不适合高安全性需求

对于静态博客来说，这已经是不依赖服务端能做到的最好方案之一了。

为我的Astro博客支持响应式图像和AVIF格式

Thu, 12 Feb 2026 00:00:00 GMT

背景#

大家应该都知道 Firefly 是基于 Fuwari 二开的。据了解 Fuwari 作者基本没有多少时间维护了，也很长时间没有更新——Astro 5 已经出来很久，Fuwari 的很多基础代码还停留在 Astro 4，如今 Astro 6 都出测试版了。

Firefly 虽然已经把很多 API 和特性更新到了 Astro 5，但图片组件一直没怎么动，只在更新内容集合 API 时做了小改。之前网站图片一多，性能就会受到很大影响——由于组件没有对博客图片做响应式处理，加上部分静态网站托管服务商的限速，大图片的加载会变得很慢，进而拖慢整个网站的加载速度。这个组件很早就想重写了，这次顺带把随机封面图组件也一起重写了。

响应式图像#

Astro 从 5.10.0 版本开始正式支持响应式图像。这次重写图片组件，主要就是为了引入这个特性，同时让博客支持 AVIF 格式。在构建时，Astro 会自动对 src 目录下的图片进行优化，将其转换为 AVIF 或 WebP 格式。也可以同时输出两种格式以兼容尚不支持 AVIF 的浏览器，会相应增加构建时间，但我觉得这是可以接受的，因为现在大家基本都是使用云托管自动构建，所以不会影响效率。

强烈建议将 public 目录下的壁纸、头像等图片迁移到 src 目录，因为 Astro 在构建时只会对 src 目录下的图像进行优化。

如果文章需要将图片放在本地而非图床，也强烈建议将图片放在文章目录 src/posts/ 下通过相对路径引用，而不是放在 public 目录。当然，本地图片数量较多时会影响构建速度，因为构建过程中需要对这些图片进行转换、优化和压缩。

配置说明#

1
// 图像优化及响应式配置
2
// 响应式图像会根据访问者的屏幕尺寸和分辨率，以不同大小提供图像，从而提升不同设备上的加载性能。
3
// Astro 仅能对 src 目录下的图像进行优化，图像越多构建时间越长。
4
imageOptimization: {
5
  // 输出图片格式
6
  // - "avif": 仅输出 AVIF 格式（最新技术，最小体积，兼容性较低）
7
  // - "webp": 仅输出 WebP 格式（体积适中，兼容性好）
8
  // - "both": 同时输出 AVIF 和 WebP（推荐，浏览器自动选择最佳格式）
9
  formats: "webp",
10
  // 图片压缩质量 (1-100)，值越低体积越小但质量越差，推荐 70-85
11
  quality: 85,
12
},

AVIF 与 WebP#

最后，我们有必要了解一下这两种现代图片格式。

AVIF#

AVIF（AV1 Image File Format）是基于 AV1 视频编码的开源图片格式，由开放媒体联盟（AOMedia）于 2019 年发布。它的核心优势在于极高的压缩效率——在相同画质下，AVIF 的文件体积通常比 JPEG 小 50% 以上，比 WebP 也要小 20%~30%。此外，AVIF 支持 HDR、宽色域、透明通道和动画，功能上非常全面。

不过 AVIF 也有明显的短板：编码速度慢，尤其是高分辨率图片，这会直接影响构建时间；早期浏览器兼容性也不太理想，但截至目前，Chrome、Firefox、Safari 和 Edge 的较新版本均已支持 AVIF。

WebP#

WebP 是 Google 于 2010 年推出的图片格式，基于 VP8 视频编码。相比 JPEG，WebP 有损压缩可以减小约 25%~34% 的体积，无损压缩也比 PNG 小约 26%。同样支持透明通道和动画。

WebP 最大的优势是兼容性好，如今所有主流浏览器都已完全支持，编码速度也比 AVIF 快得多。作为从 JPEG/PNG 迁移的过渡方案，WebP 是最稳妥的选择。

如何选择#

特性	AVIF	WebP
压缩率	最优	优
编码速度	较慢	较快
浏览器兼容性	主流浏览器新版支持	全面支持
透明通道	支持	支持
动画	支持	支持
HDR / 宽色域	支持	不支持

对于博客场景，推荐在 Firefly 配置中选择 "both"，同时输出 AVIF 和 WebP。浏览器会通过 <picture> 元素的 <source> 标签自动选择最优格式——支持 AVIF 的浏览器加载 AVIF，不支持的回退到 WebP。虽然同时生成两种格式会增加构建时间，但对访问者来说可以获得最佳的加载体验。

如果对构建时间比较敏感，选择 "webp" 也完全够用，在体积和兼容性之间取得了不错的平衡。

参考#

以下是 Astro 文档的相关说明：图像 | Docs

我们建议尽可能将本地图像保存在 src/ 中，以便 Astro 可以对其进行转换、优化和打包。/public 目录中的文件始终按原样服务或复制到构建文件夹中，不进行任何处理。
你在 src/ 中存储的本地图像可以被项目中的所有文件使用：.astro、.md、.mdx、.mdoc 和其他 UI 框架。图像可以存储在任何文件夹中，包括与你的内容一起。
如果你想要避免对图像做任何处理，请将图像存储在 public/ 文件夹中。

响应式图像行为添加于： astro@5.10.0
通过将响应式图像属性应用于 <Image /> 或 <Picture /> 组件，Astro 将自动为图像生成所需的 srcset 和 sizes 值，并应用必要的样式以确保它们正确调整大小。
当此响应式行为使用 image.layout 进行全局配置时，它将应用于所有图像组件，以及使用 Markdown ![]() 语法的任何本地和远程图像。
public/ 文件夹中的图像永远不会被优化，并且不支持响应式图像。
在 MDN Web 文档上阅读有关响应式图像的更多信息。

Fuwari/Firefly 升级到 Content Layer API

Mon, 17 Nov 2025 00:00:00 GMT

📝 背景介绍#

Astro v5 引入了全新的 Content Layer API，取代了之前的 Content Collections API。新 API 提供了更强大的内容管理能力和更灵活的数据源支持。

Fuwari 虽然已经升级了Astro v5，但仍然是使用Astro v4的Content Collections API，这个API在Astro v5已经不推荐使用，其实在半年前 L4Ph 就已经提交了PR到Fuwari，但仍然有一个问题未能解决，导致一直未合并到主分支，那就是封面会无法显示，现在主要就是解决这个问题，你可以不浏览此文章，直接查看PR记录即可，我目前已经提交修复封面问题的PR到Fuwari，但并不代表我的这是最优的解决方案，可以等Fuwari最终的解决方案。

API 更新(L4Ph)：[WIP] Astro v5 with new API(Astro Content Loader API)
修复封面无法显示：Fix: Astro v5 with new API cause image covers to not load

如果你是使用 Fuwari，根据上面两个PR的修改就可以完成升级

本博客使用的 Firefly 已经完成更新，直接拉取最新代码即可。

🎯 修复封面#

1. 新增一个URL工具#

src/utils/url-utils.ts

1
/**
2
 * 从文件完整路径中提取相对于 src 的目录路径
3
 * 例如：src/content/posts/guide/article.md -> content/posts/guide
4
 */
5
export function getFileDirFromPath(filePath: string): string {
6
  return filePath.replace(/^src\//, '').replace(/\/[^\/]+$/, '');
7
}

2. 调用工具提取封面路径#

src/components/PostCard.astro

1
import { getDir } from "../utils/url-utils";
2
import { getDir, getFileDirFromPath } from "../utils/url-utils";
3

4
// 其他代码
5

6
<ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post" class="w-full h-full">
7
<ImageWrapper src={image} basePath={getFileDirFromPath(entry.filePath || '')} alt="Cover Image of the Post" class="w-full h-full">

src/pages/posts/[...slug].astro

1
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
2
import { getDir, getPostUrlBySlug, getFileDirFromPath } from "@utils/url-utils";
3

4
// 其他代码
5

6
{entry.data.image &&
7
  <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
8
}
9
{entry.data.image &&
10
  <ImageWrapper id="post-cover" src={entry.data.image} basePath={getFileDirFromPath(entry.filePath || '')} class="mb-8 rounded-xl banner-container onload-animation"/>
11
}

3.封面无法加载的原因#

路径处理不正确，entry.id 包含文件扩展名

在 v4 中：entry.slug = "guide/article"，getDir() 返回 "guide/"
在 v5 中：entry.id = "guide/article.md"（包含扩展名），导致路径错误
解决方案：使用 getFileDirFromPath(entry.filePath) 直接从文件路径提取目录
- entry.filePath = "src/content/posts/guide/article.md"
- getFileDirFromPath() 返回 "content/posts/guide"

✅ 升级检查清单#

完成升级后，请检查以下项目：

tsconfig.json 中 moduleResolution 改为 bundler
配置文件移动到 src/content.config.ts 并添加 loader
所有 entry.slug 替换为 entry.id
所有 entry.render() 替换为 render(entry)
URL 生成时移除文件扩展名
图片路径使用 getFileDirFromPath() 处理
更新所有组件的 props（slug → id）
RSS 和其他页面中的链接更新
测试所有文章页面是否正常显示
测试图片资源是否正确加载
测试导航和链接是否正常工作

🎨 关键差异对比#

特性	Astro v4	Astro v5
配置文件位置	`src/content/config.ts`	`src/content.config.ts`
内容加载	自动扫描	显式 `loader`
文章标识符	`entry.slug`	`entry.id`
渲染方法	`entry.render()`	`render(entry)`
模块解析	`Node`	`bundler`

📚 参考资料#

💡 提示：升级过程中建议先创建一个新分支，完成所有更改并测试通过后再合并到主分支。

提交Commit或PR的同时关闭Issue

Mon, 10 Nov 2025 00:00:00 GMT

Tip

在处理 issue 的流程里，把修复信息写进 commit 或 PR 描述可以在合并后自动关闭 issue，保持 Issue 与提交记录的一致性。

GitHub 支持的关键词#

GitHub 在提交信息或 PR 描述中识别以下关键词（不区分大小写）：

close, closes, closed
fix, fixes, fixed
resolve, resolves, resolved

示例（都会在合并后自动关闭 #123）：

“Fixes #123”
“Closes #123”
“Resolved #123”

也可以一次性关闭多个 issue：

1
Fixes #12, fixes #34, closes #56

对于跨仓库引用，可以使用 owner/repo#number 的形式：

1
Fixes CuteLeaf/other-repo#78

注意：跨仓库引用仅在目标仓库可见且合并到目标仓库的默认分支时生效。

把关键词放在 Commit message 还是 PR 描述？#

直接写在 Commit message：当该 commit 最终被合并到仓库的默认分支时，GitHub 会在合并后关闭 issue。
写在 PR 描述：更常见也更可控。无论 PR 中包含多少个修复 commit，只要 PR 描述含有关键词并且 PR 被合并，相关 issue 会被关闭。

推荐做法：在 PR 描述中写 Closes #123，同时在具体修复的 commit 中也简短标注（如 fix: 修复 X 问题 (#123)），这样审查者和历史记录都清晰。

常见使用场景#

直接在 commit 中引用（一次性提交并推送）

Terminal window

1
git add .
2
git commit -m "Fixes #45: 修复登录超时问题"
3
git push origin feature/fix-login

如果你直接把这个 commit 推到 main（不推荐在协作仓库直接推到主分支），GitHub 会在该 commit 入主分支时关闭 issue。

在本地修改某个 commit（补上关闭关键词）

Terminal window

1
git commit --amend -m "Fixes #45: 修复登录超时问题"
2
git push --force-with-lease origin feature/fix-login

注意：--amend 会修改提交哈希，强推（force push）可能影响协作中的其他人，慎用。

在 PR 描述中关闭 issue（推荐）

在创建 PR 时，在描述里写：

1
This PR fixes the login timeout and improves retry logic.
2

3
Closes #45

合并 PR 后，issue #45 会自动被关闭。

注意事项#

仅当包含关键词的提交被合并到目标仓库的默认分支时，Issue 才会被关闭。把 commit 推到你的 fork 并不会关闭上游仓库的 issue，除非该 commit 被合并回上游仓库。
在 PR 描述中使用关键词通常比在某个单独 commit 中更可靠，因为 PR 合并时不会因为 rebase/合并策略而丢失信息。
如果你想引用 issue 但不自动关闭，使用 Refs #123 或 See #123（这些不会触发自动关闭）。
合并方式会影响行为：使用 rebase + merge 时，commit message 中的关键词依然会被识别；使用 squash merge 时，最终被合并的那条 squash commit 的 message 决定是否关闭 issue（因此在合并前请确保 PR 描述或合并消息包含关闭关键词）。

Git 保持主分支(master)和开发分支(develop)同步

Tue, 04 Nov 2025 00:00:00 GMT

为什么要同步这两个分支？#

在 Git Flow 工作流中，我们通常会创建一个开发分支，用于并行开发新特性和修复Bug。

master 分支通常用于生产环境，包含稳定可发布的代码；

develop 分支则是开发的主干，所有新功能都从这里合并；

如果不及时同步，时间一长，两个分支的差异会越来越大，合并时可能面临大量冲突，甚至需要重新梳理整个历史。

从 master 同步到 develop#

当 master 分支有新的提交需要同步到 develop 时：

Terminal window

1
# 1. 切换到 develop 分支
2
git checkout develop
3

4
# 2. 拉取最新的 develop 代码（如果有远程仓库）
5
git pull origin develop
6

7
# 3. 合并 master 分支的更新
8
git merge master

如果遇到冲突，解决冲突后继续：

Terminal window

1
# 解决冲突后
2
git add .
3
git commit -m "同步 master 分支的修复到 develop"

从 develop 同步到 master#

当 develop 分支的功能开发完成，准备发布到生产环境时：

Terminal window

1
# 1. 切换到 master 分支
2
git checkout master
3

4
# 2. 拉取最新的 master 代码
5
git pull origin master
6

7
# 3. 合并 develop 分支
8
git merge develop
9

10
# 4. 推送到远程仓库
11
git push origin master

使用 rebase 保持线性历史（适合小团队）#

如果你希望保持提交历史的线性，可以使用 rebase：

Terminal window

1
# 切换到 develop 分支
2
git checkout develop
3

4
# 将 master 的提交应用到 develop 之上
5
git rebase master

注意：rebase 会改写提交历史，如果 develop 已经推送到远程且多人协作，可能会影响其他人的工作。建议只在本地分支或确认团队成员了解的情况下使用。

实际遇到的问题和解决方案#

问题 1：合并时出现大量冲突#

场景：两个分支长时间未同步，合并时提示有几十个文件冲突。

解决方法：

先查看差异：git diff master..develop 了解具体变化
使用三路合并工具：git mergetool 可以调用配置的合并工具（如 VS Code、Beyond Compare）
如果冲突太多，考虑分批处理，先合并关键修复，再逐步同步其他更改

问题 2：合并后想撤销#

如果不小心合并错了，可以使用：

Terminal window

1
# 撤销最后一次合并（如果还没推送）
2
git reset --hard HEAD~1
3

4
# 如果已经推送，需要强制推送（谨慎使用）
5
git push origin develop --force

问题 3：只想同步特定的提交#

有时候 master 上有很多提交，但只想同步某个 bug 修复，可以使用 cherry-pick：

Terminal window

1
# 查看 master 的提交历史
2
git log master --oneline
3

4
# 只应用特定的提交到 develop
5
git checkout develop
6
git cherry-pick <commit-hash>

解决电脑看直播会导致电脑卡顿

Sun, 28 Sep 2025 00:00:00 GMT

卡顿原因#

发现自己电脑在看b站/虎牙等平台直播的时候经常导致电脑卡顿，鼠标移动卡顿很严重，浏览器和客户端看都是如此，尝试关闭硬件加速，根本没啥用，然后经过一番排查，才发现是当初微软商店下载的hevc解码扩展导致的。

卸载解码扩展#

卸载的时候我们会发现找不到卸载这两个扩展的入口，所以我们需要通过终端进行卸载

右键Windows徽标打开 Windows终端（管理员），输入

1
Get-AppxPackage | select Name,PackageFullName,NonRemovable

会出现一个两列的列表，在列表中找到对应的扩展包名，然后复制紧跟着的第二列的包名
输入Remove-AppxPackage <package name>，把<package name>替换成你刚刚复制的包名，执行。

Terminal window

1
PS C:\Users\leaf> Remove-AppxPackage Microsoft.HEVCVideoExtension_2.4.13.0_x64__8wekyb3d8bbwe

最后重启电脑即可

为Git设置代理，解决无法拉取和推送GitHub

Mon, 15 Sep 2025 00:00:00 GMT

前言#

我们通常使用 Git 进行 clone、pull、push 等操作，但是，如果网络环境不理想，或者 GitHub 的服务器经常遇到网络速度慢或超时的问题，即使我们使用了代理工具，也还无法正常操作，因为终端默认是不会走代理的，所以我们还需要在终端进行专门的设置代理才能走代理通道来提升连接速度，以下是针对 HTTP/HTTPS 和 SOCKS5 两种协议的代理设置方法。

Tip

通过以下方法，您可以轻松为 Git 设置网络代理，从而提升操作效率。请注意，以下的端口7890/1080请根据你的代理工具配置来修改。

HTTPS / HTTP 代理#

PowerShell#

临时在当前 PowerShell 会话中设置（仅对当前窗口生效）

Terminal window

1
$env:HTTP_PROXY = "http://127.0.0.1:7890"
2
$env:HTTPS_PROXY = "http://127.0.0.1:7890"

Windows CMD（命令提示符）#

临时在当前 cmd 会话中设置（仅对当前窗口生效）

Terminal window

1
set HTTP_PROXY=http://127.0.0.1:7890
2
set HTTPS_PROXY=http://127.0.0.1:7890

全局配置和SOCKS5代理#

设置 HTTP/HTTPS 或 SOCKS5 代理，使用以下命令设置全局代理

Terminal window

1
# 设置 HTTP/HTTPS 代理
2
git config --global http.proxy "http://127.0.0.1:7890"
3
git config --global https.proxy "http://127.0.0.1:7890"
4

5
# 设置 SOCKS5 代理
6
git config --global http.proxy "socks5://127.0.0.1:1080"
7
git config --global https.proxy "socks5://127.0.0.1:1080"
8

9
# 取消代理设置
10
git config --global --unset http.proxy
11
git config --global --unset https.proxy

GitHub 公开仓库与私有仓库的同步管理实践

Tue, 09 Sep 2025 00:00:00 GMT

Tip

在使用静态博客框架的时候，我们常会遇到这样的场景：需要维护一个公开仓库作为基础框架，同时保留一个私有仓库用于构建发布博客，且希望私有仓库能随时同步公开仓库的更新。这个需求看似简单，实际操作中却可能遇到各种 Git 冲突和分支问题。本文将结合我的实操经历，详细分享这一过程中的配置方法、遇到的问题及解决方案。

为什么需要这样做？#

我需要维护两个仓库：

公开仓库（Firefly）：作为基础项目框架，包含通用功能和公共更新
私有仓库（my-blog）：基于公开仓库的个人博客，包含私有内容和网站配置

核心需求是：私有仓库能选择性同步公开仓库的更新，既保留网站配置，又能及时获取基础框架的 bug 修复和功能升级。这种模式的优势在于：

公开仓库专注通用功能开发及个性化需求和公共更新
保护私有仓库里的网站配置及文章不被公开

操作步骤与遇到的问题及解决方案#

一、仓库初始化与关联配置#

1. 关联两个仓库#

首先需要将私有仓库与公开仓库关联，通过添加远程源（upstream 通常用于表示上游仓库）实现：

1
\# 克隆私有仓库到本地
2

3
git clone https://github.com/CuteLeaf/my-blog.git
4

5
cd my-blog
6

7
\# 添加公开仓库作为上游源
8

9
git remote add upstream https://github.com/CuteLeaf/Firefly.git
10

11
\# 验证关联结果
12

13
git remote -v

此时会显示两个远程源：origin（私有仓库）和 upstream（公开仓库）。

二、首次同步公开仓库更新#

1. 拉取公开仓库分支#

1
git fetch upstream

该命令会拉取公开仓库的所有分支信息（如 upstream/master）。

2. 合并公开仓库分支#

1
git merge upstream/master

如果出现报错：fatal: refusing to merge unrelated histories 一般会出现在首次合并时，因为两个仓库的提交历史不同。 Git 认为它们是完全独立的项目，拒绝合并。

解决方案：使用 --allow-unrelated-histories 参数强制首次合并，请注意，操作会完全覆盖本地修改：

1
git merge upstream/master --allow-unrelated-histories

三、合并冲突的处理#

强制合并后，出现大量文件冲突（add/add 类型）：

1
Auto-merging .gitignore
2

3
CONFLICT (add/add): Merge conflict in .gitignore
4

5
...（多个文件冲突）

这时候我们要手动解决冲突

1.打开冲突文件，寻找冲突标记：#

1
<<<<<<< HEAD          # 私有仓库内容
2

3
...
4

5
\=======               # 分隔线
6

7
...                   # 公开仓库内容
8

9
\>>>>>>> upstream/master

2.根据需求编辑：保留私有内容、保留公开内容或合并两者#

3.标记为已解决并提交：#

1
git add .
2

3
git commit -m "解决合并冲突，整合公开仓库更新"
4

5
git push origin master

更换博客系统，从Typecho更换到Astro

Tue, 09 Sep 2025 00:00:00 GMT

前言#

博客已经建立7年了，最开始是使用WordPress，但后面因为太臃肿，最后更换了Typecho已经5年时间，其中换过好几个域名。

那么现在为什么要更换呢？今年看见了Astro这个框架，同时看见了Fuwari这个非常符合我审美的模板，我决定将博客更换到 Astro，有一些前端经验的我很容易上手修改一些想自定义的内容，所以我修改过的 Fuwari 模板使用的是同样开源。

而因为是静态博客，所以可以使用腾讯云免费的EdgeOne Pages服务进行构建托管，有腾讯云的加速，以及全球的边缘节点，保证了用户国内访问速度。且减少了购买服务器的成本。

链接#

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

（本博客）Firefly开源地址：https://github.com/CuteLeaf/Firefly

导出Typecho文章#

首先需要将 Typecho 的数据导出并转换为 Markdown 格式，这里我们使用更简单的一个方法，使用PHP脚本直接从 Typecho 数据库导出文章。

复制下方代码在typecho网站根目录创建converter.php文件

1
<?php
2
// 启用错误显示，方便调试
3
error_reporting(E_ALL);
4
ini_set('display_errors', 1);
5

6
// 数据库配置
7
$dsn = 'mysql:host=localhost;dbname=数据库名';//数据源
8
$user = '数据库用户名';
9
$pwd = '数据库密码';
10

11
try {
12
    // 连接数据库，添加错误模式
13
    $pdo = new PDO($dsn, $user, $pwd, [
14
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
15
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
16
    ]);
17
    echo "数据库连接成功！\n";
18

19
    // 检查并创建posts目录
20
    if (!is_dir('posts')) {
21
        if (!mkdir('posts', 0755, true)) {
22
            throw new Exception("无法创建posts目录");
23
        }
24
        echo "已创建posts目录\n";
25
    }
26

27
    $sql = "
28
    SELECT
29
        c.title,
30
        c.text,
31
        c.slug,
32
        c.created,
33
        c.modified,
34
        GROUP_CONCAT(DISTINCT t.name) as tags
35
    FROM typecho_contents c
36
    LEFT JOIN typecho_relationships r ON c.cid = r.cid
37
    LEFT JOIN typecho_metas t ON r.mid = t.mid AND t.type = 'tag'
38
    WHERE c.type = 'post' AND c.status = 'publish'
39
    GROUP BY c.cid
40
    ORDER BY c.created DESC
41
    ";
42

43
    $stmt = $pdo->query($sql);
44
    $posts = $stmt->fetchAll();
45

46
    if (empty($posts)) {
47
        echo "没有找到需要导出的文章\n";
48
        exit;
49
    }
50

51
    echo "找到 " . count($posts) . " 篇文章，开始导出...\n";
52

53
    foreach ($posts as $index => $post) {
54
        // 使用标题作为文件名
55
        $filename = sanitize_filename($post['title']);
56

57
        // Windows系统下转换文件名编码为GBK，解决乱码问题
58
        if (strpos(PHP_OS, "WIN") !== false) {
59
            $filename = iconv("UTF-8", "GBK//IGNORE", $filename);
60
        }
61

62
        // 确保文件名唯一
63
        $originalFilename = $filename;
64
        $counter = 1;
65
        $fullPath = "posts/{$filename}.md";
66
        while (file_exists($fullPath)) {
67
            $filename = $originalFilename . "-" . $counter++;
68
            $fullPath = "posts/{$filename}.md";
69
        }
70

71
        // 处理日期
72
        $pubDate = date('Y-m-d', $post['created']);
73
        $updatedDate = date('Y-m-d', $post['modified']);
74

75
        // 处理标签
76
        $tags = $post['tags'] ? explode(',', $post['tags']) : [];
77
        // 转义标签中的特殊字符
78
        $tags = array_map(function($tag) {
79
            return addslashes($tag);
80
        }, $tags);
81

82
        // 构建frontmatter
83
        $frontmatter = "---\n";
84
        $frontmatter .= "title: \"" . addslashes($post['title']) . "\"\n";
85
        $frontmatter .= "published: $pubDate\n";
86
        $frontmatter .= "description: \"\"\n";
87
        $frontmatter .= "tags: [\"" . implode('", "', $tags) . "\"]\n";
88
        $frontmatter .= "category: \"\"\n";
89
        $frontmatter .= "draft: false\n";
90
        $frontmatter .= "---\n\n";
91

92
        // 组合内容
93
        $content = $frontmatter . $post['text'];
94

95
        // 写入文件
96
        $result = file_put_contents($fullPath, $content);
97
        if ($result === false) {
98
            throw new Exception("无法写入文件: " . $fullPath);
99
        }
100

101
        echo "已导出 " . ($index + 1) . "/" . count($posts) . ": " . $post['title'] . "\n";
102
    }
103

104
    echo "所有文章导出完成！\n";
105

106
} catch (PDOException $e) {
107
    die("数据库错误: " . $e->getMessage() . "\n");
108
} catch (Exception $e) {
109
    die("错误: " . $e->getMessage() . "\n");
110
}
111

112
/**
113
 * 清理文件名，移除特殊字符和路径分隔符
114
 */
115
function sanitize_filename($filename) {
116
    // 替换所有不允许的字符，特别是路径分隔符/和\
117
    $invalidChars = array(" ", "?", "\\", "/", ":", "|", "*", "\"", "<", ">");
118
    $filename = str_replace($invalidChars, '-', $filename);
119
    // 移除连续的短横线
120
    $filename = preg_replace('/-+/', '-', $filename);
121
    // 限制文件名长度，避免过长
122
    $maxLength = 100;
123
    if (strlen($filename) > $maxLength) {
124
        $filename = substr($filename, 0, $maxLength);
125
    }
126
    // 移除首尾的短横线
127
    return trim($filename, '-');
128
}
129
?>

展开收起

用文本编辑器打开converter.php将上方代码中 $dsn $user pwd的信息更改为你自己的数据库信息。
打开你的服务器终端输入 php converter.php ，就会自动转换为md文件啦
md文件文件路径在post/文章名.md

Debian系统重置忘记的 root 密码

Fri, 16 Aug 2024 00:00:00 GMT

1. 打开 Debian Grub 启动菜单

重新启动系统，同时按住键盘上的Shift键，这将使您进入 Debian 的 Grub 菜单。远程服务器则需要用控制台或者VNC连接。

2. 编辑 Gurb 菜单以进入命令行模式

选中 Grub 菜单上的启动菜单后，请直接按键盘上的“ e”键，这将允许您编辑 Grub 的引导提示符。请不要触摸或删除此处的任何内容。

在 Grub 编辑屏幕上，使用箭头键移动到以“ Linux ”开头的这一行文字的末尾。在此行类型的末尾加上

Terminal window

1
rw init=/bin/bash

添加给定的语法后，接下来，使用此配置启动您的系统。为此，请使用 Ctrl+X 或 F10 进入命令行模式。

3. 重置root用户密码

现在，让我们像在 Linux 系统上一样使用命令终端更改密码。

输入命令： passwd

系统会两次提示您输入新密码，输入完成后回车。

3. 重启系统

完成重置 Linux 密码后，重新启动系统以使用更改后的密码登录。要重新启动，请键入：

Terminal window

1
exec /sbin/init

然后按下Enter键重启。

Debian12安装docker和docker-compose

Fri, 16 Aug 2024 00:00:00 GMT

安装一些必要的系统工具#

Terminal window

1
sudo apt update
2
sudo apt upgrade -y
3
sudo apt -y install curl vim wget gnupg dpkg apt-transport-https lsb-release ca-certificates

更新并安装 Docker-CE#

Terminal window

1
sudo apt -y install docker.io

开启Docker服务，并设置开机自启#

Terminal window

1
sudo service docker start
2
sudo systemctl enable docker

配置Docker镜像加速器#

您可以通过修改daemon配置文件/etc/docker/daemon.json来使用加速器

Terminal window

1
sudo tee /etc/docker/daemon.json <<-'EOF'
2
{"registry-mirrors": ["https://hub-mirror.c.163.com"]}
3
EOF
4
sudo systemctl daemon-reload
5
sudo systemctl restart docker
6
docker info

如果加速后依然很慢修改DNS配置为 8.8.8.8

安装 docker-compose#

Terminal window

1
sudo curl -L "https://github.com/docker/compose/releases/download/v2.26.1/docker-compose-linux-x86_64" -o /usr/local/bin/docker-compose
2
sudo chmod +x /usr/local/bin/docker-compose
3
docker-compose --version

在三层交换机配置DHCP功能

Fri, 16 Feb 2024 00:00:00 GMT

Tip

本文使用的是华为的交换机

请先进行vlan划分：组建多VLAN多网段局域网

1、在三层交换机开启dhcp功能#

1
[Huawei]dhcp enable

2、创建地址池#

bumenA是自定义的名字，部门A

1
[Huawei]ip pool bumenA
2
[Huawei-ip-pool-bumena]network 192.168.1.0 mask 255.255.255.0
3
[Huawei-ip-pool-bumena]gateway-list 192.168.1.254
4
[Huawei-ip-pool-bumena]dns-list 114.114.114.114
5

6
[Huawei-ip-pool-bumena]ip pool bumenB
7
[Huawei-ip-pool-bumenb]network 192.168.2.0 mask 255.255.255.0
8
[Huawei-ip-pool-bumenb]gateway-list 192.168.2.254
9
[Huawei-ip-pool-bumenb]dns-list 114.114.114.114

3、在网关接口启用dhcp#

1
[Huawei-ip-pool-bumenb]int vlan 20
2
[Huawei-Vlanif20]dhcp select global
3
[Huawei-Vlanif20]int vlan 10
4
[Huawei-Vlanif10]dhcp select global

4、更多配置#

1
ip pool 2F 创建一个地址池，名字叫2F配置网关
2
gateway-list 192.168.20.1 分配网关
3
network 192.168.20.0 mask 255.255.0 分配地址段
4
excluded-ip-address 192.168.20.43 192.168.20.253 排除一些地址，不会再给主机分配
5
static-bind ip-address 192.168.20.40 mac-address e0d5-5ed7-06e0 静态绑定
6
static-bind ip-address 192.168.20.41 mac-address b42e-9911-fdf9
7
lease day 0 hour 8 minute0 租约
8
dns-list 58.20.127.170 114.114.114 可以配置两台dns服务器

组建多VLAN多网段局域网

Fri, 16 Feb 2024 00:00:00 GMT

Tip

本文使用的是华为的交换机

拓扑图

创健vlan#

vlan：虚拟局域网 1、隔离故障 2、广播隔离

Terminal window

1
[Huawei]vlan 10
2
[Huawei-vlan10]vlan 20

设置接口类型并划分vlan给接口#

vlan接口类型 access:只有1个vlan通过,接口用access trunk:有多个vlan要通过,接口用trunk

Terminal window

1
[Huawei-vlan20]int g0/0/1
2
[Huawei-GigabitEthernet0/0/1]port link-type access
3
[Huawei-GigabitEthernet0/0/1]port default vlan 10
4

5
[Huawei-GigabitEthernet0/0/1]int g0/0/2
6
[Huawei-GigabitEthernet0/0/2]port link-type access
7
[Huawei-GigabitEthernet0/0/2]port default vlan 10

给vlan配置网关地址#

Terminal window

1
[Huawei-vlan10]int vlan 10
2
[Huawei-Vlanif10]ip add 192.168.1.254 255.255.255.0
3
[Huawei-Vlanif10]int vlan 20
4
[Huawei-Vlanif20]ip add 192.168.2.254 255.255.255.0

Linux使用 NVM 安装 NodeJS

Mon, 05 Jun 2023 00:00:00 GMT

Node Version Manager (NVM) 是一个 bash 脚本，用于在同一台机器上管理多个活动的 NodeJS 版本。您可以轻松地在不同的 NodeJS 版本之间切换。使用这种方法，您将能够使用多个版本的 NodeJS，而不必担心兼容性问题。

1、首先，从 GitHub 下载安装程序脚本。

Terminal window

1
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
2
=> Downloading nvm as script to '/root/.nvm'
3
=> Appending nvm source string to /root/.bashrc
4
=> Appending bash_completion source string to /root/.bashrc

2、运行 source ~/.profile 命令将环境变量重新加载到当前会话中。

Terminal window

1
$ source ~/.profile

3、列出 NodeJS 的可用版本。

Terminal window

1
$ nvm ls-remote

4、确定版本后，运行 nvm install 命令下载并安装它。例如，要安装 NodeJS 11.6，运行：

Terminal window

1
$ nvm install 11.6
2
Downloading and installing node v11.6.0...
3
Downloading https://nodejs.org/dist/v11.6.0/node-v11.6.0-linux-x64.tar.xz...
4
Computing checksum with sha256sum
5
Checksums matched!
6
Now using node v11.6.0 (npm v6.5.0-next.0)

5、如果您没有明确指定版本号，将使用最新版本。你需要告诉 NVM 使用哪个版本的 NodeJS。例如，要使用 NodeJS 11，请运行：

Terminal window

1
$ nvm use 11.6
2
Now using node v11.6.0 (npm v6.5.0-next.0)

6、运行 nvm ls 命令列出已安装的 NodeJS 版本。NNM 还将指示哪个版本是默认版本。

Terminal window

1
$ nvm ls
2
v11.6.0
3
v11.7.0
4
default -> 11.6 (-> v11.6.0)

7、您还可以将特定版本设置为默认 NodeJS 版本。例如，要将版本 11.7 设置为默认 NodeJS 版本，请运行：

Terminal window

1
$ nvm alias default 11.7
2
default -> 11.7 (-> v11.7.0)

您已经使用多种方法安装了 NodeJS。此时，您可以使用 node 命令在任何这些已安装版本中运行您的 NodeJS 应用程序。您还可以使用 NVM 在 NodeJS 版本之间切换。

自建RustDesk远程工具中继服务器

Sat, 25 Mar 2023 00:00:00 GMT

生成密钥#

直接通过docker生成，方便快捷

Terminal window

1
docker run --rm --entrypoint /usr/bin/rustdesk-utils  rustdesk/rustdesk-server-s6:latest genkeypair

输出将如下所示：

Terminal window

1
Public Key:  8BLLhtzUBU/XKAH4mep3p+IX4DSApe7qbAwNH9nv4yA=
2
Secret Key:  egAVd44u33ZEUIDTtksGcHeVeAwywarEdHmf99KM5ajwEsuG3NQFT9coAfiZ6nen4hfgNICl7upsDA0f2e/jIA==

使用 Docker 机密存储密钥#

编写docker-compose.yaml，将获取到的公钥和私钥填写到env

Terminal window展开收起

1
version: '3'
2

3
services:
4
  rustdesk-server:
5
    container_name: rustdesk-server
6
    ports:
7
      - 21115:21115
8
      - 21116:21116
9
      - 21116:21116/udp
10
      - 21117:21117
11
      - 21118:21118
12
      - 21119:21119
13
    image: rustdesk/rustdesk-server-s6:latest
14
    environment:
15
      - "RELAY=rustdesk.example.com:21117"
16
      - "ENCRYPTED_ONLY=1"
17
      - "DB_URL=/db/db_v2.sqlite3"
18
      - "KEY_PRIV=egAVd44u33ZEUIDTtksGcHeVeAwywarEdHmf99KM5ajwEsuG3NQFT9coAfiZ6nen4hfgNICl7upsDA0f2e/jIA=="
19
      - "KEY_PUB=8BLLhtzUBU/XKAH4mep3p+IX4DSApe7qbAwNH9nv4yA="
20
    volumes:
21
      - ./db:/db
22
    restart: unless-stopped

展开收起

启动服务

Terminal window

1
docker-compose up -d

最后记得去云服务器商的安全组开放2117-21119的tcp和udp端口

项目地址#

RustDesk官网：RustDesk | 开源远程桌面软件

RustDesk文档：RustDesk文档 :: RustDesk文档

RustDesk中继服务器项目：rustdesk/rustdesk-server: RustDesk Server Program (github.com)

盘点免费图片无损放大工具

Mon, 20 Mar 2023 00:00:00 GMT

1、http://www.soutushenqi.com/home

2、https://chacha.so.com/enlarge

3、https://bigjpg.com/

4、http://waifu2x.udp.jp/

5、https://tools.miku.ac/

6、https://imglarger.com/

7、电脑软件图片无损放大修复软件：Squirrel Anime Enhance 下载地址：https://github.com/Justin62628/Squirrel-RIFE/releases/tag/v0.0.3 B站开源项目：https://github.com/bilibili/ailab/tree/main/Real-CUGAN

8、图片放大不失真工具(A Sharper Scaling) https://www.onlinedown.net/soft/983351.htm

9、Topaz Gigapixel AI 图片无损放大 https://www.onlinedown.net/soft/10009159.htm 中文 6.1.0 最新版 https://baijiahao.baidu.com/s?id=1709717644334274786&wfr=spider&for=pc 官方英文版 https://www.jb51.net/softjc/745488.html 中文汉化教程 https://www.jb51.net/softjc/746280.html 使用教程图解

10、SmillaEnlarger 图片清晰无损放大 https://www.onlinedown.net/soft/625611.htm

Debian系统常用命令

Mon, 20 Mar 2023 00:00:00 GMT

安装卸载软件

Terminal window

1
apt-get install #安装软件包
2
apt-get remove #仅卸载软件，但是并不卸载配置文件
3
apt-get purge #卸载指令，同时卸载相应的配置文件
4
slug: system-ops/debian-common-commands

更新可用的软件包

Terminal window

1
sudo apt update

升级所有现有的软件包

Terminal window

1
sudo apt upgrade

删除任何不必要的依赖文件

Terminal window

1
sudo apt autoremove

查看系统版本号

Terminal window

1
lsb_release -a

Debian 10/11更换国内源

1、先备份现有源

Terminal window

1
sudo cp /etc/apt/sources.list /etc/apt/sources.list_bak

2、一般情况下，将 /etc/apt/sources.list 文件中 Debian 默认的源地址 http://deb.debian.org/ 替换为国内源即可。

Terminal window

1
#中国科技大学
2
sudo sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
3
#网易云163
4
sudo sed -i 's/deb.debian.org/mirrors.163.com/g' /etc/apt/sources.list
5
#阿里云
6
sudo sed -i 's/deb.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list
7
#清华同方
8
sudo sed -i 's/deb.debian.org/mirrors.tuna.tsinghua.edu.cn/g' /etc/apt/sources.list

3、更新索引以生效

Terminal window

1
sudo apt-get update

Linux 密钥登录开启 ROOT 密码ssh登录

Mon, 20 Mar 2023 00:00:00 GMT

先使用用户密钥登陆后，输入 sudo passwd root 来设置root密码。

然后输入 su ，输入密码进入root

然后依次输入下面三条命令，等待重启即可。

Terminal window

1
sudo sed -i 's/^#\?PermitRootLogin.*/PermitRootLogin yes/g' /etc/ssh/sshd_config;
2
sudo sed -i 's/^#\?PasswordAuthentication.*/PasswordAuthentication yes/g' /etc/ssh/sshd_config;
3
sudo reboot

OpenStack安装过程中出现的一些问题及解决

Mon, 20 Mar 2023 00:00:00 GMT

dashboard仪表盘无法登陆#

浏览器输入 http://controller/dashboard 访问仪表盘无法登陆提示“出错啦！遇到异常情况，请刷新。如需帮助请联系管理员。”

1
[root@controller ~]# vim /etc/openstack-dashboard/local_settings
2

3
#SESSION_ENGINE = 'django.contrib.sessions.backends.cache'
4
#修改为
5
SESSION_ENGINE = 'django.contrib.sessions.backends.file'
6

7
[root@controller ~]# systemctl restart httpd memcached
8
[root@controller ~]# systemctl status httpd memcached

腾讯云服务器监控卸载教程

Mon, 20 Mar 2023 00:00:00 GMT

腾讯云服务器删除监控，指令如下

Terminal window

1
/usr/local/qcloud/stargate/admin/uninstall.sh
2
/usr/local/qcloud/YunJing/uninst.sh
3
/usr/local/qcloud/monitor/barad/admin/uninstall.sh

卸载新的TAT自动化助手

Terminal window

1
systemctl stop tat_agent
2
systemctl disable tat_agent
3
rm -f /etc/systemd/system/tat_agent.service
4
rm -fr /usr/local/qcloud

reboot重启后检查 agent 进程是否还在

Terminal window

1
ps -A | grep agent

如无任何输出，则已卸载干净。

VPS常用测试脚本合集

Mon, 20 Mar 2023 00:00:00 GMT

VPS Scripts#

开源地址：everett7623/vps_scripts: 一个多功能 VPS 脚本工具集，包含系统更新、测速、IP 质量检测、流媒体解锁测试等多种实用功能。

一键安装

Terminal window

1
bash <(curl -s https://raw.githubusercontent.com/everett7623/vps_scripts/main/vps.sh)

Terminal window

1
bash <(wget -qO- https://raw.githubusercontent.com/everett7623/vps_scripts/main/vps.sh)

image.png

ECS#

开源地址：oneclickvirt/ecs: VPS融合怪服务器测评项目 GO版本 VPS Fusion Monster Server Test GO Version 尽量成为最全能的服务器测评项目，使用 Go 实现，无需任何环境依赖。 Aiming to be the most comprehensive server testing project, implemented in Go with zero environment dependencies.

国际用户无加速

Terminal window

1
export noninteractive=true && curl -L https://raw.githubusercontent.com/oneclickvirt/ecs/master/goecs.sh -o goecs.sh && chmod +x goecs.sh && ./goecs.sh env && ./goecs.sh install && goecs

国际/国内使用 CDN 加速

Terminal window

1
export noninteractive=true && curl -L https://cdn.spiritlhl.net/https://raw.githubusercontent.com/oneclickvirt/ecs/master/goecs.sh -o goecs.sh && chmod +x goecs.sh && ./goecs.sh env && ./goecs.sh install && goecs

国内用户使用 CNB 加速

Terminal window

1
export noninteractive=true && curl -L https://cnb.cool/oneclickvirt/ecs/-/git/raw/main/goecs.sh -o goecs.sh && chmod +x goecs.sh && ./goecs.sh env && ./goecs.sh install && goecs

短链接

Terminal window

1
export noninteractive=true && curl -L https://bash.spiritlhl.net/goecs -o goecs.sh && chmod +x goecs.sh && ./goecs.sh env && ./goecs.sh install && goecs

image.png

Windows 10 Enterprise LTSC 2021正式版镜像下载与激活

Mon, 27 Jun 2022 00:00:00 GMT

微软在2021年底终于发布了Windows 10 Enterprise LTSC 2021 长期服务版，基于Windows 10 21H2版为基础进行开发，包含Windows 10 v1903、1909、2004、21H1和21H2等更新中的所有增强功能，推荐适合追求系统精简、运行稳定、不盲目追求功能更新的人士使用，系统支持周期到2027年1月中旬。具体升级项目请参考微软技术文档：

LTSC 2021的新增功能： https://docs.microsoft.com/zh-cn/windows/whats-new/ltsc/whats-new-windows-10-2021

image.png

（推荐）64位LTSC 2021下载：#

ED2K链接 | 磁力链接 | 微软官网下载点

Windows 10 Enterprise LTSC 2021 (x64) - DVD (Chinese-Simplified) 文件：SW_DVD9_WIN_ENT_LTSC_2021_64BIT_ChnSimp_MLF_X22-84402.ISO 大小：4.7GB SHA1：C19D7DAFBAFEB26C36E31D97C465E87C7A6E8A4C SHA256：C117C5DDBC51F315C739F9321D4907FA50090BA7B48E7E9A2D173D49EF2F73A3

32位LTSC 2021下载：#

ED2K链接 | 磁力链接 | 微软官网下载点

Windows 10 Enterprise LTSC 2021 (x86) - DVD (Chinese-Simplified) 文件：SW_DVD9_WIN_ENT_LTSC_2021_32BIT_ChnSimp_MLF_X22-84401.ISO 大小：3.37GB SHA1：50ED6860535FDDF9D0418EFD99EF7F40DAA696F5 SHA256：9F855FCC4CB44C119F9CE73DABE569FCB7F4F4D85F922206BF2E108116A34F25

LTSC 2021激活#

由于Win10 Enterprise 2021 LTSC版本目前只有MAK/GVLK密钥，尚未发布OEM密钥，暂时无法以数字权利形式永久激活LTSC 2021。但Win10 IoT Enterprise LTSC 2021是有OEM密钥的，可以数字权利激活。此外，也可以利用KMS38方式实际长期有效激活。

因为Win10 Enterprise 2021 LTSC和Win10 IoT Enterprise 2021 LTSC的区别，仅仅只有授权方式不同，功能上没有任何区别。所以可以将Win10 IoT Enterprise LTSC 2021的密钥安装到Win10 Enterprise LTSC 2021上，通过密钥即可切换版本——即切换授权方式。因此，在激活Win10 Enterprise LTSC 2021时，直接使用IoT的密钥，以达到永久激活的目的，应该算是目前的最佳解决方案。

下载HEU_KMS_Activator

修复Windows 10 LTSC 2021系统出现的一些小问题

Mon, 27 Jun 2022 00:00:00 GMT

图片

前言#

WSAPPX进程是一个 Microsoft Store 进程，包括 AppX 部署服务 (AppXSVC) 和客户端许可服务 (ClipSVC)，分别是安装及更新UWP应用的服务。但微软公司在精简系统时，缺失了相关依赖库，导致 Windows 系统一直尝试更新，导致占用较高的系统资源，甚至导致系统卡顿或运行缓慢。此外，系统自带输入法也依赖 AppXSVC 和 ClipSVC 这两个服务，导致系统自带输入法无候选词框。

slug: system-ops/windows10-ltsc-2021-fix-issues 一些较老配置的机子可能出现该Bug，我的笔记本则没有出现此问题。有以下三种解决方法——

方法一：添加VCLib依赖库（推荐）#

从 https://store.rg-adguard.net 下载任意应用的离线安装包，第一栏选 ProductId ，第二栏输入 9wzdncrfjbmp ，第三栏确保是 RP 再点击“ √ ”按钮。仅需下载这两个 Microsoft.VCLibs.140.00_14.0.30704.0_x64__8wekyb3d8bbwe.appx

Microsoft.VCLibs.140.00_14.0.30704.0_x64__8wekyb3d8bbwe.appx 将补丁放到C盘根目录，鼠标右键点击开始菜单，以管理员身份打开 Windows PowerShell，输入以下两条指令，重启系统后生效。

Terminal window

1
Add-AppxPackage -Path "C:\Microsoft.VCLibs.140.00_14.0.30704.0_x86__8wekyb3d8bbwe.Appx" #针对32位系统
2
Add-AppxPackage -Path "C:\Microsoft.VCLibs.140.00_14.0.30704.0_x64__8wekyb3d8bbwe.Appx" #针对64位系统

方法二：安装 Microsoft Store 补丁包（推荐）#

请打包下载后用右键管理员运行 Add-Store.cmd 开始安装，该该补丁包来自Github，点击这里下载

如果您不想安装App Installer / Purchase App / Xbox，请在运行安装之前删除对应的.appxbundle后缀的文件。但是，如果您计划安装游戏，或带有购买选项的应用，则不要删除。如果装完之后商店仍然打不开，请先重启试试。如果仍然不行，请以管理员身份打开命令提示符并运行以下命令之后，然后再重启试试。

Terminal window

1
PowerShell -ExecutionPolicy Unrestricted -Command "& {$manifest = (Get-AppxPackage Microsoft.WindowsStore).InstallLocation + '\AppxManifest.xml' ; Add-AppxPackage -DisableDevelopmentMode -Register $manifest}"

方法三：修改注册表禁用服务#

Warning

不推荐，会导致 Microsoft Store 无法正常运行，且查看电脑属性界面闪退

打开注册表

1、计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\AppXSvc，将 start 由 3 改为 4

2、计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\ClipSVC，将 start 由 3 改为 4

3、重启系统，发现服务已被禁用

修复共享打印机不能正常工作#

KB5007253补丁是微软最新针对Windows 10 21H1版本发布的最新补丁。用户安装升级此补丁之后，系统版本将升级至最新的19043.1382版本，并且在此版本中，重点修复了之前系统版本中共享打印机所存在的一些问题。

在检查系统更新，会发现“有可选的质量更新可用”，补丁编号KB5007253。如果没有，可以从微软官网下载该补丁。

SqlServer 重命名数据库名称,报5030错误解决方法

Tue, 03 May 2022 00:00:00 GMT

问题原因#

进程占用，有进程在正在占用这个数据库，使用master 进行查出正在占用的SPID PS：SPID在sqlserver中是很重要的一个标识

解决方法#

1
use master
2
select spid from master.dbo.sysprocesses
3
where dbid=db_id('数据库原名')

得出对应的spid后，进行删除即可

1
use master kill 54

Sublime Text 4.0 Build 4126 激活

Thu, 14 Apr 2022 00:00:00 GMT

1、打开浏览器进入网站HexEd.it - Browser-based Online and Offline Hex Editing 2、打开sublime text4安装目录选择文件sublime_text.exe 3、搜索80 78 05 00 0F 94 C1更改为C6 40 05 01 48 85 C9(第一个匹配到的) 4、保存文件命名为sublime_text.exe并替换原文件

Linux常用快捷键和命令

Sun, 27 Mar 2022 00:00:00 GMT

基本快捷键的使用#

（1）Tab，补充命令#

不用输入完整的命令，输入命令前几个字母后Tab键，会自动补全命令提示。

（2）移动光标命令#

Ctrl+A：移动光标到开头

Ctrl+E：移动光标到结尾

Ctrl+F：往光标后面移动一个字符

Ctrl+B：往光标前面移动一个字符

（3）剪切字符#

Ctrl+K：剪切光标处到行尾的字符

Ctrl+U：剪切光标处到行首的字符

Ctrl+Y：将剪切的字符进行粘贴

（4）复制粘贴#

Ctrl+Ins：复制

Shift+Ins：粘贴

（5）中断正在运行的命令行#

Ctrl+C

（6）退出当前Xshell#

Ctrl+D

（7）搜索命令行使用过的历史命令记录#

Ctrl+R

（8）获取上一条命令的最后部分，用空格分隔开来的部分#

ESC+.

（9）清屏命令#

Ctrl+L

（10）暂停命令#

Ctrl+Z

（11）锁屏#

Ctrl+S

（12）解除锁屏#

Ctrl+Q

（13）！+命令执行上一条命令，!! 执行上两条命令#

vim快捷键键位图

Thu, 24 Mar 2022 00:00:00 GMT

vim常用：#

dd 删除一行 shift+d 删除该行光标后面内容保存文件 ! 强制保持路径另存为退出vim ! 不保存强制退出保存后退出路径另存后退出 ! 强制保存后退出

编辑模式#

i 在光标所在字符前开始插入 a 在光标所在字符后开始插入 o 在光标所在行的下面另起一新行插入 s 删除光标所在的字符开始插入

需按Esc退出编辑模式 . 重复刚才的动作 u 撤销刚才的动作 Ctrl+R 恢复刚才撤销的动作

Ctrl+u 向上滚动半页 Ctrl+d 向下滚动半页

/内容向下查找 n向下找 N行上找 ?内容向上查找 n向上找 N行下找需要查找以 xx 结尾的行时，需要在后面加上"$"，比如"/xx$" 不区分大小写 /内容\c 区分大小写 /内容\C ic 打开区分大小写 noic 不区分大小写 nu 显示行号 nonu 关闭行号

gg跳到文件的第一行 G跳到文件最后一行 :行号跳转到指定行 $快速移动移动搭配行尾 shift+4 ^快速移动到行头 shift+6

galera集群启动异常问题

Sat, 12 Mar 2022 00:00:00 GMT

错误提示#

[ERROR] WSREP: It may not be safe to bootstrap the cluster from this node. It was not the last one to leave the cluster and may

数据库集群宕机，在运行/bin/galera_new_cluster启动第一个节点时报错，意思是该节点不是最后一个停掉的，不能安全启动；然后可以尝试在其他节点运行该命令；如果报错都相同，则需要从3个节点中选取一个主节点，修改/var/lib/mysql/grastate.dat，把其中safe_to_bootstrap的值改为1即可。然后运行/bin/galera_new_cluster。其他节点依次启动或者直接删除/var/lib/mysql/grastate.dat文件

MariaDB主从复制

Fri, 11 Mar 2022 00:00:00 GMT

Note

使用OpenStack私有云平台，创建两台云主机vm1和vm2，在这两台云主机上分别安装数据库服务，并配置成主从数据库，vm1节点为主库，vm2节点为从库

安装Mariadb#

【master/slave】#

1
yum -y install mariadb mariadb-server
2
#启动Mariadb
3
systemctl start mariadb

【master】#

1
[root@master ~]# vim /etc/my.cnf.d/server.cnf

在[mysqld]下添加

1
[mysqld]
2
server-id=1
3
log-bin=master-bin

1
重启
2
[root@master ~]# systemctl  restart mariadb
3
登录数据库
4
[root@slave ~]# mysql -uroot
5
验证配置是否生效
6
MariaDB [(none)]> show master status;
7
+------------------+----------+--------------+------------------+
8
| File             | Position | Binlog_Do_DB | Binlog_Ignore_DB |
9
+------------------+----------+--------------+------------------+
10
| mysql-bin.000001 |      328 |              |                  |
11
+------------------+----------+--------------+------------------+
12
1 row in set (0.000 sec)
13
创建用户并授权
14
MariaDB [(none)]> GRANT ALL PRIVILEGES ON *.* TO 'xiaye'@'%' IDENTIFIED BY '000000';
15
Query OK, 0 rows affected (0.001 sec)
16
MariaDB [(none)]> flush privileges;
17
Query OK, 0 rows affected (0.000 sec)

展开收起

【slave】#

1
[root@slave ~]# vim /etc/my.cnf.d/server.cnf

在[mysqld]下添加

1
[mysqld]
2
server-id=2
3
log-bin=mysql-bin

重启#

1
[root@slave ~]# systemctl  restart mariadb
2
登录数据库
3
[root@slave ~]# mysql -u root
4
连接主库
5
MariaDB [(none)]> change master to master_host='192.168.22.64',master_user='xiaye',master_password='000000';
6
Query OK, 0 rows affected (0.195 sec)
7
重启
8
[root@slave ~]# systemctl restart mariadb

查看#

Tip

注：两个yes即为成功

Slave_IO_Running: Yes

Slave_SQL_Running: Yes

1
[root@slave ~]# mysql -uroot
2
Welcome to the MariaDB monitor.  Commands end with ; or \g.
3
Your MariaDB connection id is 13
4
Server version: 10.3.23-MariaDB-log MariaDB Server
5
Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.
6

7
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
8

9
MariaDB [(none)]> show slave status \G
10
*************************** 1. row ***************************
11
Slave_IO_State: Waiting for master to send event
12
Master_Host: 192.168.22.64
13
Master_User: xiaye
14
Master_Port: 3306
15
Connect_Retry: 60
16
Master_Log_File: mysql-bin.000001
17
Read_Master_Log_Pos: 635
18
Relay_Log_File: slave-relay-bin.000003
19
Relay_Log_Pos: 934
20
Relay_Master_Log_File: mysql-bin.000001
21
Slave_IO_Running: Yes
22
Slave_SQL_Running: Yes
23
Replicate_Do_DB:
24
Replicate_Ignore_DB:
25
Replicate_Do_Table:
26
Replicate_Ignore_Table:
27
Replicate_Wild_Do_Table:
28
Replicate_Wild_Ignore_Table:
29
Last_Errno: 0
30
Last_Error:
31
Skip_Counter: 0
32
Exec_Master_Log_Pos: 635
33
Relay_Log_Space: 1243
34
Until_Condition: None
35
Until_Log_File:
36
Until_Log_Pos: 0
37
Master_SSL_Allowed: No
38
Master_SSL_CA_File:
39
Master_SSL_CA_Path:
40
Master_SSL_Cert:
41
Master_SSL_Cipher:
42
Master_SSL_Key:
43
Seconds_Behind_Master: 0
44
Master_SSL_Verify_Server_Cert: No
45
Last_IO_Errno: 0
46
Last_IO_Error:
47
Last_SQL_Errno: 0
48
Last_SQL_Error:
49
Replicate_Ignore_Server_Ids:
50
Master_Server_Id: 1
51
Master_SSL_Crl:
52
Master_SSL_Crlpath:
53
Using_Gtid: No
54
Gtid_IO_Pos:
55
Replicate_Do_Domain_Ids:
56
Replicate_Ignore_Domain_Ids:
57
Parallel_Mode: conservative
58
SQL_Delay: 0
59
SQL_Remaining_Delay: NULL
60
Slave_SQL_Running_State: Slave has read all relay log; waiting for the slave I/O thread to update it
61
Slave_DDL_Groups: 2
62
Slave_Non_Transactional_Groups: 0
63
Slave_Transactional_Groups: 0
64
1 row in set (0.000 sec)

展开收起

验证#

【master】

1
MariaDB [(none)]> show databases;
2
+--------------------+
3
| Database           |
4
+--------------------+
5
| information_schema |
6
| mysql              |
7
| performance_schema |
8
| test               |
9
+--------------------+
10
4 rows in set (0.001 sec)
11

12
MariaDB [(none)]> create database test1;
13
Query OK, 1 row affected (0.000 sec)
14

15
MariaDB [(none)]> show databases;
16
+--------------------+
17
| Database           |
18
+--------------------+
19
| information_schema |
20
| mysql              |
21
| performance_schema |
22
| test               |
23
| test1              |
24
+--------------------+
25
5 rows in set (0.000 sec)

展开收起

【slave】

1
MariaDB [(none)]> show databases;
2
+--------------------+
3
| Database           |
4
+--------------------+
5
| information_schema |
6
| mysql              |
7
| performance_schema |
8
| test               |
9
| test1              |
10
+--------------------+
11
5 rows in set (0.001 sec)

rabbitmq集群

Fri, 11 Mar 2022 00:00:00 GMT

创建三台云主机来搭建rabbitmq集群。使用普通集群模式，其中一台做磁盘节点，另外两台做内存节点，配置完毕后启动rabbitmq服务

rabbitmq集群#

1.安装rabbitmq服务#

1
yum install rabbitmq-server -y

2.配置域名解析文件#

1
192.168.22.50 rabbitmq1
2
192.168.22.51 rabbitmq2
3
192.168.22.52 rabbitmq3

3.对应节点更改为对应主机名#

1
hostnamectl set-hostname rabbitmq1
2
hostnamectl set-hostname rabbitmq2
3
hostnamectl set-hostname rabbitmq3

3.三节点全部启动rabbitmq服务#

Terminal window

1
[root@rabbitmq1 ~]# systemctl start rabbitmq-server
2
[root@rabbitmq2 ~]# systemctl start rabbitmq-server
3
[root@rabbitmq3 ~]# systemctl start rabbitmq-server

4.复制rabbitmq1节点的.erlang.cookie 文件中的值到另外两个节点#

1
[root@rabbitmq1 ~]# scp -rp /var/lib/rabbitmq/.erlang.cookie  root@rabbitmq2:/var/lib/rabbitmq/
2
[root@rabbitmq1 ~]# scp -rp /var/lib/rabbitmq/.erlang.cookie  root@rabbitmq3:/var/lib/rabbitmq/

5.查看.erlang.cookie文件用户组#

1
[root@rabbitmq2 ~]# ls -a -ll /var/lib/rabbitmq/
2
total 8
3
drwxr-x---   3 rabbitmq rabbitmq   42 Mar 11 02:53 .
4
drwxr-xr-x. 29 root     root     4096 Mar 11 02:53 ..
5
-r--------   1 rabbitmq rabbitmq   20 Mar 11 00:00 .erlang.cookie
6
drwxr-xr-x   4 rabbitmq rabbitmq   97 Mar 11 02:53 mnesia
7

8
如果不是rabbitmq rabbitmq则需要更改
9
更改用户和用户组
10
chown rabbitmq:rabbitmq /var/lib/rabbitmq/.erlang.cookie
11

12
重启服务
13
systemctl restart rabbitmq-server

6.加入集群#

1
[root@rabbitmq2 ~]# rabbitmqctl stop_app
2
[root@rabbitmq2 ~]# rabbitmqctl join_cluster --ram rabbit@rabbitmq1
3

4
[root@rabbitmq3 ~]# rabbitmqctl stop_app
5
[root@rabbitmq3 ~]# rabbitmqctl join_cluster --ram rabbit@rabbitmq1

7.查看状态进行验证#

1
[root@rabbitmq1 ~]# rabbitmqctl cluster_status
2
[root@rabbitmq1 ~]# rabbitmqctl cluster_status
3
Cluster status of node rabbit@rabbitmq1 ...
4
[{nodes,[{disc,[rabbit@rabbitmq1]},{ram,[rabbit@rabbitmq3,rabbit@rabbitmq2]}]},
5
{running_nodes,[rabbit@rabbitmq1]},
6
{cluster_name,<<"rabbit@rabbitmq1">>},
7
{partitions,[]}]
8
...done.

OpenStack安全策略提升

Mon, 07 Mar 2022 00:00:00 GMT

使用 OpenStack 私有云平台，通过提供的相关软件包，安装必要组件，将私有云平台的访问策略从 http 提升至 https。

安装mod_ssl#

1
[root@controller ~]# yum -y install mod_ssl

修改local_settings文件#

1
[root@controller ~]# vi /etc/openstack-dashboard/local_settings
2
##在DEBUG = False下增加4行
3
CSRF_COOKIE_SECURE = True    ##原文中有，去掉注释即可
4
SESSION_COOKIE_SECURE = True    ##原文中有，去掉注释即可
5
USE_SSL = True
6
SESSION_COOKIE_HTTPONLY = True

修改ssl.conf配置文件#

1
[root@controller ~]# vi /etc/httpd/conf.d/ssl.conf
2
##将SSLProtocol all -SSLv2 -SSLv3改成：
3
SSLProtocol all -SSLv2

验证#

1. 重启服务#

1
[root@controller ~]# systemctl restart httpd
2
[root@controller ~]# systemctl restart memcached

2. 访问Web#

最后游览器访问https://IP/dashboard访问并登录成功即可！

Riad管理-创建磁盘阵列

Mon, 07 Mar 2022 00:00:00 GMT

在 OpenStack 私有云平台，创建一台云主机，并创建一个40G 大小的 cinder 块存储，将块存储连接到云主机，然后在云主机上对云硬盘进行操作。要求分出 4 个大小为 5G 的分区，使用这 4 个分区，创建名为/dev/md5、raid 级别为 5 的磁盘阵列加一个热备盘（使用最后一个分区作为热备盘）。

一、先分区好#

二、安装mdadm#

[root@raid ~]# yum install mdadm -y

1
## 三、创建raid

#[root@raid ~]# mdadm -Cv /dev/md5 -l5 -n3 /dev/vdb[1-3] —spare-devices=1 /dev/vdb4

1
## 四、验证

[root@raid ~]# mdadm -D /dev/md5

/dev/md5: Version : 1.2 Creation Time : Mon Mar 7 13:16:21 2022 Raid Level : raid5 Array Size : 10475520 (9.99 GiB 10.73 GB) Used Dev Size : 5237760 (5.00 GiB 5.36 GB) Raid Devices : 3 Total Devices : 4 Persistence : Superblock is persistent

1
   Update Time : Mon Mar  7 13:18:00 2022
2
         State : clean
3
Active Devices : 3

Working Devices : 4 Failed Devices : 0 Spare Devices : 1

1
        Layout : left-symmetric
2
    Chunk Size : 512K

Consistency Policy : resync

1
          Name : raid.novalocal:5  (local to host raid.novalocal)
2
          UUID : 9aa36e11:516c882d:d4fe5595:1c017b68
3
        Events : 18
4

5
Number   Major   Minor   RaidDevice State
6
   0     253       17        0      active sync   /dev/vdb1
7
   1     253       18        1      active sync   /dev/vdb2
8
   4     253       19        2      active sync   /dev/vdb3
9

10
   3     253       20        -      spare   /dev/vdb4

Docker管理命令

Wed, 02 Mar 2022 00:00:00 GMT

1
docker load -i 镜像tar文件 #导入镜像至本地仓库
2
------ 以下 XX:XX 必须要能够在 docker images查询到 -----
3
docker tag XX:XX YY:YY #镜像改名，修改tag（像是另存为）
4
docker pull 172.16.21.15/library/XX:XX #从远程镜像仓库拉取镜像
5
docker rmi -f XX:XX #删除镜像，-f表示强制操作
6
docker save -o 本地路径/XX.tar XX:XX #将镜像存储在本地，-o指定导出的路径和文件名
7
docker push 172.16.21.15/library/XX:XX #上传镜像至远程仓库（镜像的tag必须带有远程地址和项目名）
8
docker inspect XX:XX # 查看镜像详细信息

docker import和docker load的区别简单来说，就是带不带历史信息的区别，这点上可以分别使用他们两个后，用dockerimages查看出来的时间点的区别就可以看出具体参照：https://www.cnblogs.com/Cherry-Linux/p/8025777.html

1
docker ps -a #查看容器，如果没有加-a选项，则只显示已启动的容器
2
docker container ps #查看容器
3
docker create -it --name 容器名 镜像 [容器命令] [命令参数] #创建容器
4
docker start 容器名或容器id #启动容器
5
docker run --rm --it --name 容器名 镜像 [容器命令] [命令参数] #创建新容器并启动，--rm是指容器退出后就自动删除该容器
6
docker run -d [--name 容器名] 镜像名称 #在后台启动一个容器
7
docker run和docker create的区别
8
docker run 命令同时完成了 create 及 start 操作

1
docker pause 容器名 #暂停容器
2
docker unpause 容器名 #取消暂停容器
3
docker restart [-t 数字] 容器名 #重启，-t表示多少秒后重启，默认10s docker stop 容器名 #关闭容器
4
docker kill 容器名 #终止容器
5
docker rm [-f] 容器名 #删除容器，-f表示强制删除正在运行的容器

docker stop 和 docker pause的区别一个是暂停容器中的进程（pause），而另外一个是暂停容器（stop）

1
docker exec -it 容器名 /bin/bash #进入一个运行中的容器 docker exec 容器名 命令 #在一个正在运行的容器中运行命令，登录出容器ctrl+d
2
docker logs 容器名 #查看容器的运行日志
3
docker inspect 容器名 #查看容器的详细信息
4
docker port 容器名 #查看容器占用的端口
5
docker rename 旧容器名 新容器名 #改容器名
6
docker commit -m '评论' -a '作者' 容器名 新镜像名:版本号#基于容器创建镜像 docker cp 源 目标 #复制文件 容器名或id：路径

k8s搭建

Wed, 02 Mar 2022 00:00:00 GMT

master配置最低要求CPU双核，内存最低8G，硬盘100G node配置最低要求CPU双核，内存最低4G，硬盘100G

容器云iaas搭建#

设置主机名

1
hostnamectl set-hostname master
2
hostnamectl set-hostname node

配置本地源【master/node】 yum源备份

1
mkdir /opt/yum-backup
2
mv /etc/yum.repos.d/*  /opt/yum-backup

创建repo文件【master】

1
在/etc/yum.repos.d创建centos.repo源文件
2
[centos]
3
name=centos
4
baseurl=file:///opt/yum-repo/centos
5
gpgcheck=0
6
enabled=1
7
[k8s]
8
name=k8s
9
baseurl=file:///opt/yum-repo/kubernetes-repo
10
gpgcheck=0
11
enabled=1

【node】

1
[centos]
2
name=centos
3
baseurl=ftp://controller/centos
4
gpgcheck=0
5
enabled=1
6
[k8s]
7
name=k8s
8
baseurl=ftp://controller/kubernetes-repo
9
gpgcheck=0
10
enabled=1

主机名映射【master/node】

1
vi /etc/hosts
2
127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
3
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
4
172.16.21.15 master
5
172.16.21.12 node

挂载镜像【master】【挂载CentOS-7-x86_64-DVD-1804.iso】

1
mount -o loop CentOS-7-x86_64-DVD-1804.iso /mnt/
2
mkdir /opt/centos
3
cp -rvf /mnt/* /opt/centos
4
umount  /mnt/

【挂载chinaskills_cloud_paas.iso】

1
mount  -o loop chinaskills_cloud_paas.iso /mnt/
2
cp -rvf /mnt/* /opt/
3
umount  /mnt/

清除缓存，验证yum源【master/node】

1
yum clean all
2
yum makecache
3
yum list

搭建ftp服务器，开启并设置自启

1
yum install vsftpd -y
2
vi /etc/vsftpd/vsftpd.conf
3
# 添加anon_root=/opt
4
systemctl start vsftpd
5
systemctl enable vsftpd

防火墙配置【master/node】编辑selinux文件

1
vi /etc/selinux/config
2
SELINUX=disabled
3
setenforce 0
4
//关闭防火墙并设置开机不自启
5
systemctl stop firewalld
6
systemctl disable firewalld

【master/node】

1
iptables -F
2
iptables -X
3
iptables -Z
4
iptables-save

【master】把opt目录下的k8s_node_install.sh脚本传给node

1
scp /opt/k8s_node_install.sh root@node:/root/

开始执行安装脚本 //执行第一个脚本

1
source /opt/k8s_harbor_install.sh

//执行第二个脚本

1
source /opt/k8s_image_push.sh
2
输入镜像仓库地址(不加http/https): 172.16.21.15
3
输入镜像仓库用户名: admin
4
输入镜像仓库用户密码: Harbor12345

//执行第三个脚本

1
source /opt/k8s_master_install.sh

检测是否安装正常

1
kubectl get pod -A

STATUS全部为Running则正常搭建，有出现不是Running就重装吧

【node】执行第四个脚本

1
source k8s_node_install.sh
2
输入镜像仓库地址(不加http/https): 172.16.21.15
3
输入镜像仓库用户名: admin
4
输入镜像仓库用户密码: Harbor12345

验证集群是否正常#

【master】

1
kubectl get nodes

Mariadb数据库高可用集群与负载均衡

Wed, 02 Mar 2022 00:00:00 GMT

Note

三台 CentOS7.5 系统的云主机，分别命令为 node1、node2、node3，（使用提供的 mariadb-repo.tar.gz 软件包在http 服务下），在这三个节点上安装数据库服务，数据库密码设置为 123456。将这三个节点配置为数据库高可用集群即 MariaDB_Galera_Cluster，配置完高可用服务后，安装 haproxy 负载均衡服务。配置node1 节点为负载均衡的窗口，配置负载均衡为轮询算法；HA 服务监听的端口为node1 节点的 3307 端口；配置访问三个节点的权重依次为 1,2,4。

【node1/2/3】

1
yum install -y mariadb-server
2
vim /etc/my.cnf.d/server.cnf

1
[galera]
2
# Mandatory settings
3
wsrep_on=ON
4
wsrep_provider=/lib64/galera/libgalera_smm.so
5
wsrep_cluster_address=gcomm://172.16.21.5,172.16.100.6,172.16.21.23
6
binlog_format=row
7
default_storage_engine=InnoDB
8
innodb_autoinc_lock_mode=2
9
#
10
# Allow server to accept connections on all interfaces.
11
#
12
bind-address=0.0.0.0

启动服务

1
systemctl start mariadb

【node1/2/3】

1
mysql -uroot -p123456 -e "grant all privileges on *.* to root@'%' identified by '123456';"
2

3
systemctl stop mariadb

【node1】

1
/bin/galera_new_cluster

【node2/3】

1
systemctl start mariadb

然后都查看一下

1
ss -lnt   //查看端口4567是否运行

查看数据的状态是否返回NO

1
mysql -uroot -p123456 -e "show status like 'wsrep_ready';"
2
+---------------+-------+
3
| Variable_name | Value |
4
+---------------+-------+
5
| wsrep_ready   | ON    |
6
+---------------+-------+

查看集群数

1
mysql -uroot -p123456 -e "show status like 'wsrep_cluster_size';"
2
+--------------------+-------+
3
| Variable_name      | Value |
4
+--------------------+-------+
5
| wsrep_cluster_size | 3     |
6
+--------------------+-------+

安装 haproxy 负载均衡服务【node1】

1
yum install -y haproxy//配置文件底部添加vim /etc/haproxy/haproxy.cfg
2

3
listen stats
4
    bind 172.16.21.5:9000
5
    stats enable
6
    stats uri /stats
7

8

9
listen mariadb
10
    mode tcp
11
    bind 172.16.21.5:3307
12
    server node1 172.16.21.5:3306 weight 1
13
    server node2 172.16.21.6:3306 weight 2
14
    server node3 172.16.21.23:3306 weight 4

设置开机自启并启动服务

1
stemctl enable haproxy
2
systemctl start haproxyss
3
ss -lnt   //查看端口3307是否运行

OpenStack XianDian2.4 的搭建

Tue, 01 Mar 2022 00:00:00 GMT

两台主机（CentOS7），使用最小安装即可，不要安装图形界面（后期搭建openstack平台时会出问题）内存均设置为设置6G，CPU最好给到双核一台作为controller控制节点，一台作为compute计算节点两台主机分别添加两块网卡，其中compute节点再添加两块硬盘

搭建先电私有云平台#

设置主机名

1
hostnamectl set-hostname controller
2
hostnamectl set-hostname compute

配置本地源【controller/compute】

1
mkdir /opt/yum-backup
2
mv /etc/yum.repos.d/*  /opt/yum-backup

创建repo文件【controller】在/etc/yum.repos.d创建centos.repo源文件

1
[centos]
2
name=centos
3
baseurl=file:///opt/centos
4
gpgcheck=0
5
enabled=1
6
[iaas]
7
name=iaas
8
baseurl=file:///opt/iaas-repo
9
gpgcheck=0
10
enabled=1

【compute】在/etc/yum.repos.d创建centos.repo源文件

1
[centos]
2
name=centos
3
baseurl=ftp://controller/centos
4
gpgcheck=0
5
enabled=1
6
[iaas]
7
name=iaas
8
baseurl=ftp://controller/iaas-repo
9
gpgcheck=0
10
enabled=1

主机名映射【controller/compute】

1
vi /etc/hosts
2

3
127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
4
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
5
192.168.100.10 controller
6
192.168.100.20 compute

挂载镜像【controller】【挂载CentOS-7-x86_64-DVD-1804.iso】

1
[root@controller ~]# mount -o loop CentOS-7-x86_64-DVD-1804.iso /mnt/
2
[root@controller ~]# mkdir /opt/centos
3
[root@controller ~]# cp -rvf /mnt/* /opt/centos
4
[root@controller ~]# umount  /mnt/

【挂载XianDian-IaaS-v2.4.iso（chinaskills_cloud_iaas.iso）】

1
[root@controller ~]# mount -o loop chinaskills_cloud_iaas.iso  /mnt/
2
[root@controller ~]# cp -rvf /mnt/* /opt/
3
[root@controller ~]# umount  /mnt/

清除缓存，验证yum源【controller/compute】

1
yum clean all
2
yum makecache
3
yum list

搭建ftp服务器，开启并设置自启

1
[root@controller ~]# yum install vsftpd -y
2
[root@controller ~]# vi /etc/vsftpd/vsftpd.conf
3
添加anon_root=/opt
4

5
[root@controller ~]# systemctl start vsftpd
6
[root@controller ~]# systemctl enable vsftpd

防火墙配置【controller/compute】编辑selinux文件

1
vi /etc/selinux/config
2
SELINUX=permissive
3
setenforce 0
4

5
//关闭防火墙并设置开机不自启
6
systemctl stop firewalld
7
systemctl disable firewalld

【controller/compute】

1
iptables -F
2
iptables -X
3
iptables -Z
4
iptables-save

安装并配置先电软件包所有节点上执行：

1
yum clean all //清除缓存
2
yum makecache //建立缓存
3

4
yum install -y iaas-xiandian  //安装先电

Controller 和Conpute节点配置变量：

1
vi /etc/xiandian/openrc.sh

编辑文件/etc/xiandian/openrc.sh,此文件是安装过程中的各项参数，根据每项参数上一行的说明及服务器实际情况进行配置。

1
HOST_IP=192.168.100.10
2
HOST_PASS=000000
3
HOST_NAME=controller
4
HOST_IP_NODE=192.168.100.20
5
HOST_PASS_NODE=000000
6
HOST_NAME_NODE=compute
7
network_segment_IP=192.168.100.0/24
8
RABBIT_USER=openstack
9
RABBIT_PASS=000000
10
DB_PASS=000000
11
DOMAIN_NAME=demo
12
ADMIN_PASS=000000
13
DEMO_PASS=000000
14
KEYSTONE_DBPASS=000000
15
GLANCE_DBPASS=000000
16
GLANCE_PASS=000000
17
NOVA_DBPASS=000000
18
NOVA_PASS=000000
19
NEUTRON_DBPASS=000000
20
NEUTRON_PASS=000000
21
METADATA_SECRET=000000
22
INTERFACE_IP=192.168.100.10  （controllerIP/computeIP）
23
INTERFACE_NAME=ens34 （外部网络网卡名称）
24
Physical_NAME=provider （外部网络适配器名称）
25
minvlan=101 （vlan网络范围的第一个vlanID）
26
maxvlan=200 （vlan网络范围的最后一个vlanID）
27
CINDER_DBPASS=000000
28
CINDER_PASS=000000
29
BLOCK_DISK=sdb1 （空白分区）
30
SWIFT_PASS=000000
31
OBJECT_DISK=sdc1 （空白分区）
32
STORAGE_LOCAL_NET_IP=192.168.100.20
33
HEAT_DBPASS=000000
34
HEAT_PASS=000000
35
ZUN_DBPASS=000000
36
ZUN_PASS=000000
37
KURYR_DBPASS=000000
38
KURYR_PASS=000000
39
CEILOMETER_DBPASS=000000
40
CEILOMETER_PASS=000000
41
AODH_DBPASS=000000
42
AODH_PASS=000000

展开收起

Compute 节点：

1
[root@compute ~]# scp root@controller:/etc/xiandian/openrc.sh /etc/xiandian //从控制节点拷贝变量配置文件

所有节点上执行：

1
source /etc/xiandian/openrc.sh //使环境变量生效
2
iaas-pre-host.sh //执行先电官方脚本

Controller 节点：

1
iaas-install-mysql.sh
2
iaas-install-keystone.sh
3
iaas-install-glance.sh
4
iaas-install-nova-controller.sh
5
#然后执行compute的nova脚本
6
iaas-install-neutron-controller.sh
7
#然后执行compute的neutron脚本
8
iaas-install-dashboard.sh

Compute 节点：

1
iaas-install-nova-compute.sh
2
iaas-install-neutron-compute.sh

注：控制节点脚本全部运行完毕后再运行计算节点脚本，不要同时进行。

浏览器访问: http://192.168.100.10/dashboard

创建镜像

1
source /etc/keystone/admin-openrc.sh
2
glance image-create --name "CentOS7.5" --disk-format qcow2 --container-format bare --progress < /opt/images/CentOS_7.5_x86_64_XD.qcow2

（1）管理员->资源管理->云主机类型->创建云主机类型

（2）管理员->网络->网络->创建网络

（3）项目->网络->安全组->管理规则->添加规则（ICMP、TCP、UDP）

（4）项目->资源管理->云主机->创建云主机

创建云主机无法运行 VMware虚拟机环境需要在Compute节点执行下面的命令：（重要）更改配置文件并重启nova-compute服务

1
crudini --set /etc/nova/nova.conf libvirt virt_type  qemu
2
systemctl restart libvirtd.service openstack-nova-compute.service

注：这里的两条命令是为了解决虚拟机环境下的 QEMU模拟器错误导致云主机无法使用的问题，旧版本先电v2.2不存在此问题，服务器请忽略。#

Controller 节点：

1
iaas-install-cinder-controller.sh
2
#然后执行compute的cinder脚本
3
iaas-install-swift-controller.sh
4
#然后执行compute的swift脚本
5
iaas-install-heat.sh
6
iaas-install-zun-controller.sh
7
#然后执行compute的zun脚本

Compute 节点：

1
iaas-install-cinder-compute.sh
2
iaas-install-swift-compute.sh
3
iaas-install-zun-compute.sh

Controller 节点：

1
[root@controller ~]# iaas-install-ceilometer-controller.sh
2
[root@controller ~]# iaas-install-aodh.sh

注：控制节点脚本全部运行完毕后再运行计算节点脚本，不要同时进行。

zun的使用

1
[root@controller ~]# source /etc/keystone/admin-openrc.sh
2
[root@controller ~]# openstack image create centos7.5 --public --container-format docker --disk-format raw < /opt/yum-repo/images/CentOS7_1804.tar
3
[root@controller ~]# zun run --image-driver glance centos7.5

如出现Error，compute重新iaas-install-zun-compute.sh，然后systemctl restart zun-compute重启服务

1
[root@compute ~]# systemctl restart zun-compute docker

redis主从

Tue, 01 Mar 2022 00:00:00 GMT

在两个节点安装 redis服务并启动，配置 redis的访问需要密码，密码设置为123456。然后将这两个 redis 节点配置为 redis 的主从架构。

安装redis#

1
[root@node1 ~]# yum install -y redis

【redis1】

1
[root@node1 ~]# vim /etc/redis.conf
2
#第一处修改 61行
3
# bind 127.0.0.1                 //找到bind 127.0.0.1这行并注释掉
4
#第二处修改 80行
5
protected-mode no                //修改后，外部网络可以访问
6
#第三处修改 128行
7
daemonize yes                    //修改后，开启守护进程
8
#第四处修改 480行
9
requirepass "123456"             //添加设置访问密码
10
#第五处修改 272行 设定主库密码与当前库密码同步，保证从库能够提升为主库
11
masterauth "123456"
12
#第六处修改 593行 打开AOF持久化支持
13
appendonly yes

【redis2】

1
[root@node2 ~]# vim /etc/redis.conf
2
#第一处修改 61行
3
# bind 127.0.0.1                  //找到bind 127.0.0.1这行并注释掉
4
#第二处修改 80行
5
protected-mode no                 //修改后，外部网络可以访问
6
#第三处修改 128行
7
daemonize yes                     //修改后，开启守护进程
8
#第四处修改 480行
9
requirepass "123456"              //添加设置访问密码
10
#第五处修改 265行
11
slaveof 172.16.21.5 6379          //添加访问的主节点IP与端口
12
#第六处修改  272行
13
masterauth "123456"               //添加访问主节点密码
14
#第七处修改 593行 打开AOF持久化支持
15
appendonly yes

展开收起

重启服务#

1
systemctl restart redis

测试#

【redis1/redis2】

1
[root@node1 ~]# redis-server /etc/redis.conf
2
[root@node1 ~]# redis-cli
3

4
127.0.0.1:6379> auth 123456
5
OK
6
127.0.0.1:6379> info replication
7

8
# Replication
9
role:master
10
connected_slaves:1
11
slave0:ip=172.16.21.6,port=6379,state=online,offset=1,lag=0
12
master_repl_offset:1
13
repl_backlog_active:1
14
repl_backlog_size:1048576
15
repl_backlog_first_byte_offset:2
16
repl_backlog_histlen:0
17
127.0.0.1:6379>

展开收起

解决SecureCRT小键盘在vim编辑器乱码问题

Thu, 13 Jan 2022 00:00:00 GMT

解决方法#

Sessions->右键Properties->Terminal—>Emulation–>modes选项下取消勾选Enable keypad mode switching

image.png

Linux网络配置

Tue, 04 Jan 2022 00:00:00 GMT

查看网卡名称和IP地址#

1
ip a 或者ip addr

修改网卡配置#

1
vim /etc/sysconfig/network-scripts/ifcfg-ens33   //ifcfg-ens33是随网卡名称变化
2
BOOTPROTO=static(静态地址) dhcp(动态获取地址)
3
ONBOOT=yes(配置文件生效) no(配置文件不生效)

设置静态地址#

Important

如果BOOTPROTO配置文件为static，那么需要在文件追加ip地址，子网掩码等

1
IPADDR=192.168.100.10  //ip地址
2
PREFIX=24  //子网掩码（NETMASK=255.255.255.0）
3
GATEWAY=192.168.100.1  //网关
4
DNS1=114.114.114.114  //DNS服务器配置

重启网络服务才能生效#

1
systemctl restart network

Linux设置定时任务，定时运行Python脚本

Tue, 07 Dec 2021 00:00:00 GMT

查看当前有哪些定时任务#

1
crontab -l

编辑定时任务#

1
crontab -e

定时任务配置#

从左到右依次表示分、时、日、月、周，后面为要执行的命令下面表示的就是每天7点10分执行Python脚本，并保留运行log

1
10 7 * * * python3  /home/pi/python/LoginNetwork_Get.py  >>  /home/pi/python/LoginNetwork_Get.log 2>&1

其他#

1
#启动
2
/etc/init.d/cron start
3
#关闭
4
/etc/init.d/cron stop
5
#重启
6
/etc/init.d/cron restart
7
#重新载入配置
8
/etc/init.d/cron reload

详细用法可以查看https://www.cnblogs.com/peida/archive/2013/01/08/2850483.html

树莓派3B+安装pip3

Tue, 07 Dec 2021 00:00:00 GMT

因为树莓派官方的Raspberry Pi OS系统默认装有Python3的但是并没有安装pip3，所以我们需要手动安装一下本文章使用的Rasberry Pi OS版本为：2021-05-07-raspios-buster-armhf-lite

安装pip3#

1
sudo apt-get install python3-pip

CentOS 7安装docker和docker-compose

Mon, 06 Dec 2021 00:00:00 GMT

安装docker#

1
sudo yum check-update
2
curl -sSL <https://get.daocloud.io/docker> | sh
3
#运行
4
sudo systemctl start docker
5
#查看运行状态
6
sudo systemctl status docker
7
#添加自启
8
sudo systemctl enable docker

安装docker-compose#

1
# 下载docker-compose
2
sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.27.4/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
3
# 添加可执行权限 sudo chmod +x /usr/local/bin/docker-compose
4
# 查看docker-compose版本
5
docker-compose --version

树莓派3B+安装Transmission

Mon, 06 Dec 2021 00:00:00 GMT

本文章使用的Rasberry Pi OS版本为：2021-05-07-raspios-buster-armhf-lite ##安装Transmission

更新软件源#

1
sudo apt-get update

开始安装#

1
sudo apt-get install transmission-daemon

给用户授权#

1
sudo usermod -a -G pi debian-transmission

设置Transmission的配置文件#

1
sudo nano /etc/transmission-daemon/settings.json
2

3
#设置下载目录为用户目录下的Downloads文件夹：
4
"download-dir": "/home/pi/Downloads",
5
#设置未下载完成数据存放地点为Downloads文件夹：
6
"incomplete-dir": "/home/pi/Downloads",
7
#设置Web登陆密码为：raspberry
8
"rpc-password": "raspberry",
9
#设置Web登陆用户名：transmission
10
"rpc-username": "transmission",
11
#允许Web登陆：（设置为true）
12
"utp-enabled": true

重新启动transmission服务#

1
sudo service transmission-daemon reload

到这里可以在浏览器中输入你的树莓派的ip地址和端口号访问transmission的web界面了比如你的树莓派地址是：192.168.2.6，那么在浏览器中输入：192.168.2.6:9091

登陆的用户名和密码使用配置文件中设置的内容例子中的用户名是：transmission，密码是：raspberry。如果遇到permission问题，使用以下命令提升Downloads目录的权限：

1
sudo chmod 777 -R /home/pi/Downloads/

原文地址：https://www.cnblogs.com/guguobao/p/9647336.html

SSH登录出错：WARNING--REMOTE-HOST-IDENTIFICATION-HAS-CHANGED!

Mon, 06 Dec 2021 00:00:00 GMT

错误信息#

解决方法#

在cmd控制台输入下面命令将储存在本地的公钥信息删除

1
ssh-keygen -R 服务器IP

树莓派3B+安装OpenMediaVault

Mon, 06 Dec 2021 00:00:00 GMT

image.png

OpenMediaVault，是一个开源的基于 Debian Linux 的下一代网络附加存储（NAS）解决方案。它包含众多服务，如 SSH、(S)FTP、SMB / CIFS、DAAP 媒体服务器、RSync、BitTorrent 客户机等。并具有通过插件可增强的模块化设计框架特性。

slug: system-ops/raspberry-pi-3b-plus-install-omv

这里介绍的 OpenMediaVault 的安装方法是基于 Raspberry Pi OS “Lite” 的，需要先准备好本文章使用的Rasberry Pi OS版本为：2021-05-07-raspios-buster-armhf-lite Raspberry Pi OS “Lite” 系统，然后在运行 OpenMediaVault 的安装脚本即可。

更新树莓派系统#

运行下面的命令更新树莓派系统。

1
sudo apt-get update
2
sudo apt-get upgrade

运行 OMV 安装脚本#

在终端运行下面的命令开始安装：

1
wget -O - https://github.com/OpenMediaVault-Plugin-Developers/installScript/raw/master/install | sudo bash

如果上面的 URL 被墙了，可以用 CDN 的链接：

1
wget -O - https://cdn.jsdelivr.net/gh/OpenMediaVault-Plugin-Developers/installScript@master/install | sudo bash

安装完成后重启树莓派。

通过 GUI 登录 OMV#

直接在 PC 的浏览器打开 http://<树莓派的IP地址> 即可看到 OMV 的登录页，默认的用户名为「admin」，密码「openmediavault」。

Firefly 代码块示例

Sat, 03 Jan 1970 00:00:00 GMT

在这里，我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。

表达性代码#

语法高亮#

语法高亮

常规语法高亮#

1
console.log('此代码有语法高亮!')

渲染 ANSI 转义序列#

Terminal window展开收起

1
Standard ANSI colors:
2
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
3
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
4
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
5
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
6

7
8-bit colors (showing colors 160-171 as an example):
8
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12

13
24-bit colors (full RGB):
14
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18

19
Font styles:
20
- Default
21
- Bold
22
- Dimmed
23
- Italic
24
- Underline
25
- Reversed
26
- Strikethrough

展开收起

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

my-test-file.js

1
console.log('标题属性示例')

src/content/index.html

1
<div>文件名注释示例</div>

终端框架#

Terminal window

1
echo "此终端框架没有标题"

PowerShell 终端示例

1
Write-Output "这个有标题!"

覆盖框架类型#

1
echo "看，没有框架!"

PowerShell Profile.ps1

1
# 如果不覆盖，这将是一个终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

标记整行和行范围#

1
// 第1行 - 通过行号定位
2
// 第2行
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行
6
// 第6行
7
// 第7行 - 通过范围 "7-8" 定位
8
// 第8行 - 通过范围 "7-8" 定位

选择行标记类型 (mark, ins, del)#

line-markers.js

1
function demo() {
2
  console.log('此行标记为已删除')
3
  // 此行和下一行标记为已插入
4
  console.log('这是第二个插入行')
5

6
  return '此行使用中性默认标记类型'
7
}

为行标记添加标签#

labeled-line-markers.jsx

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

在单独行上添加长标签#

labeled-line-markers.jsx展开收起

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

展开收起

使用类似 diff 的语法#

1
此行将标记为已插入
2
此行将标记为已删除
3
这是常规行

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

结合语法高亮和类似 diff 的语法#

1
function thisIsJavaScript() {
2
  // 整个块都会以 JavaScript 高亮显示，
3
  // 并且我们仍然可以为其添加 diff 标记！
4
  console.log('要删除的旧代码')
5
  console.log('新的闪亮代码！')
6
}

标记行内的单独文本#

1
function demo() {
2
  // 标记行内的任何给定文本
3
  return '支持给定文本的多个匹配项';
4
}

正则表达式#

1
console.log('单词 yes 和 yep 将被标记。')

转义正斜杠#

Terminal window

1
echo "Test" > /home/test.txt

选择内联标记类型 (mark, ins, del)#

1
function demo() {
2
  console.log('这些是插入和删除的标记类型');
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行

为每个块配置自动换行#

1
// 启用换行的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// wrap=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

配置换行的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// preserveIndent=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

可折叠部分#

可折叠部分


5 collapsed lines
1
// 所有这些样板设置代码将被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// 这部分代码默认可见
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // 您可以有多个折叠部分
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // 这将保持可见
17
  console.log(`计算结果: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// 直到块末尾的所有代码将再次被折叠
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: '示例样板代码结束' })

展开收起

行号#

行号

为每个块显示行号#

1
// 此代码块将显示行号
2
console.log('来自第2行的问候!')
3
console.log('我在第3行')

// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')

更改起始行号#

5
console.log('来自第5行的问候!')
6
console.log('我在第6行')

Firefly 布局系统详解

Sat, 03 Jan 1970 00:00:00 GMT

📖 概述#

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

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

左侧边栏+列表布局

右侧边栏+网格布局

左侧边栏+三列网格布局

双侧边栏+列表布局

双侧边栏+网格布局

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

一、侧边栏布局系统#

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

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", // 双侧边栏

二、文章列表布局系统#

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

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

特点#

单列纵向排列
显示文章封面图
展示更多文章摘要
适合深度阅读

列表布局结构#

列表模式布局

优点#

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

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list", // 列表模式
4
    allowSwitch: true,   // 允许用户切换
5
  },
6
};

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

特点#

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

自适应网格#

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

网格布局

配置示例#

src/config/siteConfig.ts

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

2.3 瀑布流布局 (Masonry)#

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

瀑布流布局

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

三、布局组合指南#

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

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

四、响应式布局行为#

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

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

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

五、常见问题#

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

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

六、总结#

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

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

Firefly 文章加密

Fri, 02 Jan 1970 00:00:00 GMT

这是一篇密码保护的示例文章，用于演示文章加密功能。

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

Fri, 02 Jan 1970 00:00:00 GMT

🌟 项目概述#

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

🖥️在线预览： Firefly - Demo site

🏠我的博客： https://blog.cuteleaf.cn

📝Firefly使用文档： https://docs-firefly.cuteleaf.cn

⭐Firefly开源地址：https://github.com/CuteLeaf/Firefly

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

CuteLeaf

Firefly

Waiting for api.github.com...

Waiting for api.github.com...

00K

Waiting...

Firefly

🚀 技术架构#

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

📖 配置说明#

📚 详细配置文档: 查看 Firefly使用文档获取完整的配置指南

Firefly 简单使用指南

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: 如何使用 Firefly 博客主题
3
published: 2023-09-09
4
slug: how-to-use-firefly-blog-theme
5
---

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

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

Slug 使用建议#

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

注意事项#

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

KaTeX 数学公式示例

Fri, 02 Jan 1970 00:00:00 GMT

本文展示了 Firefly 主题对 KaTeX 数学公式的渲染支持。

行内公式 (Inline)#

行内公式使用单个 $ 符号包裹。

例如：欧拉公式 eiπ+1=0e^{i\pi} + 1 = 0eiπ+1=0 是数学中最优美的公式之一。

质能方程 E=mc2E = mc^2E=mc2 也是家喻户晓。

块级公式 (Block)#

块级公式使用两个 $$ 符号包裹，会居中显示。

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞e−x2dx=πx=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2a−b±b2−4ac

复杂示例#

矩阵 (Matrices)#

(abcd)(αβγδ)=(aα+bγaβ+bδcα+dγcβ+dδ)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} \alpha & \beta \\ \gamma & \delta \end{pmatrix} = \begin{pmatrix} a\alpha + b\gamma & a\beta + b\delta \\ c\alpha + d\gamma & c\beta + d\delta \end{pmatrix}(acbd)(αγβδ)=(aα+bγcα+dγaβ+bδcβ+dδ)

极限与求和 (Limits and Sums)#

∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞n21=6π2lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1x→0limxsinx=1

麦克斯韦方程组 (Maxwell’s Equations)#

∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ε0∂E∂t\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned}∇⋅E∇⋅B∇×E∇×B=ε0ρ=0=−∂t∂B=μ0J+μ0ε0∂t∂E

化学方程式 (Chemical Equations)#

CHX4+2 OX2→COX2+2 HX2O\ce{CH4 + 2O2 -> CO2 + 2H2O}CHX4+2OX2COX2+2HX2O

符号	代码	渲染结果
Alpha	`\alpha`	α\alphaα
Beta	`\beta`	β\betaβ
Gamma	`\Gamma`	Γ\GammaΓ
Pi	`\pi`	π\piπ
Infinity	`\infty`	∞\infty∞
Right Arrow	`\rightarrow`	→\rightarrow→
Partial	`\partial`	∂\partial∂

MDX 格式文章示例

Fri, 02 Jan 1970 00:00:00 GMT

Tip

Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。

Markdown 和 MDX 的区别#

Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。

特性	Markdown	MDX
基础语法	支持 (CommonMark)	支持 (CommonMark)
HTML 标签	支持	支持 (作为 JSX)
组件导入	不支持	支持 (import)
动态数据	不支持	支持 (JS 表达式)
样式定制	有限 (class/style)	灵活 (className/CSS-in-JS)

使用组件#

这是一个图标组件：

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
  <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" />
5
  <span>火箭发射！</span>
6
</div>

火箭发射！

使用 JSX#

你也可以直接写 HTML/JSX：

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
3
</div>

这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。

简单的变量导出#

1
export const year = new Date().getFullYear()
2

3
今年是 {year} 年。

今年是 2026 年。

更多信息，请查看 MDX 文档

Markdown 扩展功能

Thu, 01 Jan 1970 00:00:00 GMT

GitHub 仓库卡片#

您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。

CuteLeaf

Firefly

Waiting for api.github.com...

00K

Waiting...

使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。

1
::github{repo="CuteLeaf/Firefly"}

提醒框(Admonitions)配置#

Firefly 采用了 rehype-callouts 插件，支持了三种风格的提醒框主题：GitHub、Obsidian 和 VitePress。您可以在 src/config/siteConfig.ts 中进行配置：

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  // ...
3
  rehypeCallouts: {
4
    // 选项: "github" | "obsidian" | "vitepress"
5
    theme: "github",
6
  },
7
  // ...
8
};

注意：更改配置后需要重启开发服务器才能生效。

以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。

1. GitHub 主题风格#

这是 GitHub 官方支持的 5 种基本类型。

GitHub

基本语法

1
> [!NOTE] NOTE
2
> 突出显示用户应该考虑的信息。
3

4
> [!TIP] TIP
5
> 可选信息，帮助用户更成功。
6

7
> [!IMPORTANT] IMPORTANT
8
> 用户成功所必需的关键信息。
9

10
> [!WARNING] WARNING
11
> 关键内容，需要立即注意。
12

13
> [!CAUTION] CAUTION
14
> 行动的负面潜在后果。
15

16
> [!NOTE] 自定义标题
17
> 这是一个带有自定义标题的示例。

展开收起

2. Obsidian 主题风格#

Obsidian 风格支持非常丰富的类型和别名。

点击展开 Obsidian 语法列表

1
> [!NOTE] NOTE
2
> 通用的笔记块。
3

4
> [!ABSTRACT] ABSTRACT
5
> 文章的摘要。
6

7
> [!SUMMARY] SUMMARY
8
> 文章的总结（同 Abstract）。
9

10
> [!TLDR] TLDR
11
> 太长不看（同 Abstract）。
12

13
> [!INFO] INFO
14
> 提供额外信息。
15

16
> [!TODO] TODO
17
> 需要完成的事项。
18

19
> [!TIP] TIP
20
> 实用技巧或提示。
21

22
> [!HINT] HINT
23
> 暗示（同 Tip）。
24

25
> [!IMPORTANT] IMPORTANT
26
> 重要信息（Obsidian 风格通常使用类似的图标）。
27

28
> [!SUCCESS] SUCCESS
29
> 操作成功。
30

31
> [!CHECK] CHECK
32
> 检查通过（同 Success）。
33

34
> [!DONE] DONE
35
> 已完成（同 Success）。
36

37
> [!QUESTION] QUESTION
38
> 提出问题。
39

40
> [!HELP] HELP
41
> 寻求帮助（同 Question）。
42

43
> [!FAQ] FAQ
44
> 常见问题（同 Question）。
45

46
> [!WARNING] WARNING
47
> 警告信息。
48

49
> [!CAUTION] CAUTION
50
> 注意事项（同 Warning）。
51

52
> [!ATTENTION] ATTENTION
53
> 引起注意（同 Warning）。
54

55
> [!FAILURE] FAILURE
56
> 操作失败。
57

58
> [!FAIL] FAIL
59
> 失败（同 Failure）。
60

61
> [!MISSING] MISSING
62
> 缺失内容（同 Failure）。
63

64
> [!DANGER] DANGER
65
> 危险操作警告。
66

67
> [!ERROR] ERROR
68
> 错误信息（同 Danger）。
69

70
> [!BUG] BUG
71
> 报告软件缺陷。
72

73
> [!EXAMPLE] EXAMPLE
74
> 展示一个例子。
75

76
> [!QUOTE] QUOTE
77
> 引用一段话。
78

79
> [!CITE] CITE
80
> 引证（同 Quote）。
81

82
> [!NOTE] 自定义标题
83
> 这是一个带有自定义标题的示例。

展开收起

Obsidian

3. VitePress 主题风格#

VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。

点击展开 VitePress 语法列表

1
> [!NOTE] NOTE
2
> 对应 GitHub 的 Note。
3

4
> [!TIP] TIP
5
> 对应 GitHub 的 Tip。
6

7
> [!IMPORTANT] IMPORTANT
8
> 对应 GitHub 的 Important。
9

10
> [!WARNING] WARNING
11
> 对应 GitHub 的 Warning。
12

13
> [!CAUTION] CAUTION
14
> 对应 GitHub 的 Caution。
15

16
> [!TIP] 自定义标题
17
> VitePress 风格同样支持自定义标题。

展开收起

VitePress

4. Docusaurus 风格语法#

仅支持语法，风格保持跟上面三个主题相同。

点击展开 Docusaurus 语法列表

支持以下类型的提醒框：note tip important warning caution

1
:::note
2
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
3
:::
4

5
:::tip
6
可选信息，帮助用户更成功。
7
:::
8

9
:::important
10
用户成功所必需的关键信息。
11
:::
12

13
:::warning
14
由于潜在风险需要用户立即注意的关键内容。
15
:::
16

17
:::caution
18
行动的负面潜在后果。
19
:::
20

21
:::tip[自定义标题]
22
可选信息，帮助用户更成功。
23
:::

展开收起

剧透#

您可以为文本添加剧透。文本也支持 Markdown 语法。

内容被隐藏了哈哈！

1
内容 :spoiler[被隐藏了 **哈哈**]！

图片画廊网格 (Image Grid)#

您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。

自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。

图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。

示例图片一

示例图片二

基本语法

1
[grid]
2
![示例图片一](./images/firefly1.avif)
3
![示例图片二](./images/firefly2.avif)
4
![示例图片二](./images/firefly3.avif)
5
[/grid]

Markdown Mermaid 图表

Thu, 01 Jan 1970 00:00:00 GMT

Markdown 中 Mermaid 图表完整指南#

本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例#

流程图非常适合表示流程或算法步骤。

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子过程] D --> E subgraph E [子过程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{另一个决策} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例#

时序图显示对象之间随时间的交互。

sequenceDiagram participant User as 用户 participant WebApp as 网页应用 participant Server as 服务器 participant Database as 数据库 User->>WebApp: 提交登录请求 WebApp->>Server: 发送认证请求 Server->>Database: 查询用户凭据 Database-->>Server: 返回用户数据 Server-->>WebApp: 返回认证结果 alt 认证成功 WebApp->>User: 显示欢迎页面 WebApp->>Server: 请求用户数据 Server->>Database: 获取用户偏好 Database-->>Server: 返回偏好设置 Server-->>WebApp: 返回用户数据 WebApp->>User: 加载个性化界面 else 认证失败 WebApp->>User: 显示错误消息 WebApp->>User: 提示重新输入 end

甘特图示例#

甘特图非常适合显示项目进度和时间线。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段需求分析 :a1, 2023-10-01, 7d UI设计 :a2, after a1, 10d 原型创建 :a3, after a2, 5d section 开发阶段前端开发 :b1, 2023-10-20, 15d 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 部署生产环境部署 :d1, after c3, 3d 发布 :milestone, after d1, 0d

类图示例#

类图显示系统的静态结构，包括类、属性、方法及其关系。

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : 写作 User "1" -- "*" Comment : 发表 Article "1" -- "*" Comment : 拥有 Article "1" -- "*" Category : 属于

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 拒绝审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 活跃活跃 --> 隐藏 : 临时隐藏隐藏 --> 活跃 : 恢复活跃 --> [*] 隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合显示比例和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "推荐链接" : 6.4 "其他来源" : 2.6

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。

尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！

Markdown 教程

Thu, 01 Jan 1970 00:00:00 GMT

这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。

块级元素
- 段落与换行
- 标题
- 引用
- 列表
- 代码块
- 分割线
- 表格
内联元素
- 链接
- 强调
- 行内代码
- 图片
- 删除线
杂项
- 自动链接
- 反斜杠转义
内联 HTML

块级元素#

段落与换行#

段落#

HTML 标签：<p>

使用一个或多个空行分隔段落。（仅包含空格或制表符的行也视为空行。）

代码：

1
This will be
2
inline.
3

4
This is second paragraph.

预览：

This will be inline.

This is second paragraph.

换行#

HTML 标签：<br />

在行末添加两个或更多空格来产生换行。

代码：

1
This will be not
2
inline.

预览：

This will be not
inline.

标题#

Markdown 支持两种标题样式：Setext 与 atx。

Setext#

HTML 标签：<h1>，<h2>

使用等号 (=) 表示 <h1>、使用短横线 (-) 表示 <h2>，数量不限，作为“下划线”。

代码：

1
This is an H1
2
=============
3
This is an H2
4
-------------

预览：

This is an H1#

This is an H2#

atx#

HTML 标签：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>

在行首使用 1-6 个井号 (#)，对应 <h1> 至 <h6>。

代码：

1
# This is an H1
2
## This is an H2
3
###### This is an H6

预览：

This is an H1#

This is an H2#

This is an H6#

可选：你可以在行尾“闭合” atx 标题。末尾的井号数量不必与开头一致。

代码：

1
# This is an H1 #
2
## This is an H2 ##
3
### This is an H3 ######

预览：

This is an H1#

This is an H2#

This is an H3#

引用#

HTML 标签：<blockquote>

Markdown 使用邮件风格的 > 作为引用符号。若手动换行并在每行前加 >，显示效果最佳。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown 允许“偷懒”：在一个硬换行段落中，只在第一行前加 > 即可。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

引用可以嵌套（引用中的引用），通过增加 > 层级实现。

代码：

1
> This is the first level of quoting.
2
>
3
> > This is nested blockquote.
4
>
5
> Back to the first level.

预览：

This is the first level of quoting.
This is nested blockquote.
Back to the first level.

引用内可包含其他 Markdown 元素，包括标题、列表与代码块。

代码：

1
> ## This is a header.
2
>
3
> 1.   This is the first list item.
4
> 2.   This is the second list item.
5
>
6
> Here's some example code:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

预览：

This is a header.#

This is the first list item.

This is the second list item.

Here’s some example code:
1
return shell_exec("echo $input | $markdown_script");

列表#

Markdown 支持有序（数字）与无序（圆点）列表。

无序列表#

HTML 标签：<ul>

无序列表可使用 星号 (*)、加号 (+) 或 短横线 (-)。

代码：

1
*   Red
2
*   Green
3
*   Blue

预览：

Red
Green
Blue

等价于：

代码：

1
+   Red
2
+   Green
3
+   Blue

或者：

代码：

1
-   Red
2
-   Green
3
-   Blue

有序列表#

HTML 标签：<ol>

有序列表使用数字加英文句点：

代码：

1
1.  Bird
2
2.  McHale
3
3.  Parish

预览：

Bird
McHale
Parish

注意：像下面这样可能会“意外触发”有序列表：

代码：

1
1986. What a great season.

预览：

What a great season.

你可以用反斜杠转义 (\) 句点：

代码：

1
1986\. What a great season.

预览：

1986. What a great season.

列表中的缩进内容#

列表项里的引用#

在列表项内放置引用，需要将 > 符号整体缩进：

代码：

1
*   A list item with a blockquote:
2

3
    > This is a blockquote
4
    > inside a list item.

预览：

A list item with a blockquote:

This is a blockquote inside a list item.

列表项里的代码块#

在列表项内放置代码块，需要缩进两层——8 个空格或两个 Tab：

代码：

1
*   A list item with a code block:
2

3
        <code goes here>

预览：

A list item with a code block:
```
1
<code goes here>
```

嵌套列表#

代码：

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

预览：

A
- A1
- A2
B
C

代码块#

HTML 标签：<pre>

将代码块中的每行缩进至少4 个空格或1 个制表符。

代码：

1
This is a normal paragraph:
2

3
    This is a code block.

预览：

This is a normal paragraph:

1
This is a code block.

代码块会一直持续，直到遇到未缩进的行（或文末）。

在代码块内，与号 (&) 和尖括号 (< >) 会自动转为 HTML 实体。

代码：

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

预览：

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。

围栏代码块#

使用成对的反引号围起来（如下所示），就不需要四空格缩进了。

代码：

1
Here's an example:
2

3
```
4
function test() {
5
  console.log("notice the blank line before this function?");
6
}
7
```

预览：

Here’s an example:

1
function test() {
2
  console.log("notice the blank line before this function?");
3
}

语法高亮#

在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。

代码：

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

预览：

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

分割线（水平线）#

HTML 标签：<hr /> 一行中放置三个或以上的短横线 (-)、星号 (*) 或下划线 (_)。符号之间允许有空格。

代码：

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

预览：

表格#

HTML 标签：<table>

这是扩展语法。

用竖线 (|) 分隔列，用短横线 (-) 分隔表头，使用冒号 (:) 指定对齐方式。

两侧的竖线 (|) 与对齐可选。用于表头分隔时，每列至少需要 3 个短横线。

代码：

1
| Left | Center | Right |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

预览：

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

内联元素#

链接#

HTML 标签：<a>

Markdown 支持两种链接样式：行内链接与引用式链接。

行内链接#

行内链接格式：[文本](URL "标题")

标题可选。

代码：

1
This is [an example](http://example.com/ "Title") inline link.
2

3
[This link](http://example.net/) has no title attribute.

预览：

This is an example inline link.

This link has no title attribute.

如果引用同一站点的本地资源，可以使用相对路径：

代码：

1
See my [About](/about/) page for details.

预览：

See my About page for details.

引用式链接#

可以预定义链接引用。定义格式：[id]: URL "标题"

标题同样可选。引用时使用：[文本][id]

代码：

1
[id]: http://example.com/  "Optional Title Here"
2
This is [an example][id] reference-style link.

预览：

This is an example reference-style link.

说明：

方括号中包含链接标识（不区分大小写，可在左侧缩进最多三格空格）；
随后是冒号；
再跟一个或多个空格（或 tab）；
然后是链接 URL；
URL 可选地用尖括号包裹；
可选地跟随标题属性，用引号或圆括号包裹。

以下三种定义等价：

代码：

1
[foo]: http://example.com/  "Optional Title Here"
2
[foo]: http://example.com/  'Optional Title Here'
3
[foo]: http://example.com/  (Optional Title Here)
4
[foo]: <http://example.com/>  "Optional Title Here"

如果使用空的方括号，则链接文本本身会作为名称。

代码：

1
[Google]: http://google.com/
2
[Google][]

预览：

Google

强调#

HTML 标签：<em>，<strong>

Markdown 使用 星号 (*) 或 下划线 (_) 表示强调。一个分隔符对应 <em>；两个分隔符对应 <strong>。

代码：

1
*single asterisks*
2

3
_single underscores_
4

5
**double asterisks**
6

7
__double underscores__

预览：

single asterisks

single underscores

double asterisks

double underscores

但如果两侧有空格，则会被视作普通字符而非强调语法。

你可以使用反斜杠进行转义：

代码：

1
\*this text is surrounded by literal asterisks\*

预览：

*this text is surrounded by literal asterisks*

行内代码#

HTML 标签：<code>

用反引号 (`) 包裹。

代码：

1
Use the `printf()` function.

预览：

Use the printf() function.

若行内代码中需要包含反引号字符，可使用多重反引号作为定界符：

代码：

1
``There is a literal backtick (`) here.``

预览：

There is a literal backtick (`) here.

行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：

代码：

1
A single backtick in a code span: `` ` ``
2

3
A backtick-delimited string in a code span: `` `foo` ``

预览：

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

图片#

HTML 标签：<img />

Markdown 的图片语法与链接类似，支持行内与引用两种方式。

行内图片#

行内图片语法：![替代文本](URL "标题")

标题可选。

代码：

1
![Alt text](/path/to/img.jpg)
2

3
![Alt text](/path/to/img.jpg "Optional title")

预览：

Alt text

说明：

一个感叹号 !；
后接方括号，放置图片的替代文本；
再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。

引用式图片#

引用式图片语法：![替代文本][id]

代码：

1
[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
2
![Alt text][img id]

预览：

Alt text

删除线#

HTML 标签：<del>

这是扩展语法。

GFM 增加了删除线语法。

代码：

1
~~Mistaken text.~~

预览：

Mistaken text.

杂项#

自动链接#

Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。

代码：

1
<http://example.com/>
2

3
<address@example.com>

预览：

http://example.com/

address@example.com

GFM 会自动识别标准 URL 并转换为链接。

代码：

1
https://github.com/emn178/markdown

预览：

https://github.com/emn178/markdown

反斜杠转义#

Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。

代码：

1
\*literal asterisks\*

预览：

*literal asterisks*

以下字符可通过反斜杠转义以按字面量输出：

Code:

1
\   backslash
2
`   backtick
3
*   asterisk
4
_   underscore
5
{}  curly braces
6
[]  square brackets
7
()  parentheses
8
#   hash mark
9
+   plus sign
10
-   minus sign (hyphen)
11
.   dot
12
!   exclamation mark

内联 HTML#

对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。

代码：

1
This is a regular paragraph.
2

3
<table>
4
    <tr>
5
        <td>Foo</td>
6
    </tr>
7
</table>
8

9
This is another regular paragraph.

预览：

This is a regular paragraph.

Foo

This is another regular paragraph.

请注意：在块级 HTML 标签内不会处理 Markdown 语法。

与块级标签不同，在行内级标签内会处理 Markdown 语法。

代码：

1
<span>**Work**</span>
2

3
<div>
4
    **No Work**
5
</div>

预览：

Work

**No Work**

***

在文章中嵌入视频

Thu, 01 Jan 1970 00:00:00 GMT

只需从 YouTube 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。

1
---
2
title: 在文章中嵌入视频
3
published: 2023-10-19
4
// ...
5
---
6

7
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

夏夜流萤

在 Astro 博客中为 Markdown 添加多图并排的自适应网格画廊功能

背景#

插件最终效果与语法#

原理分析：AST 语法树与 Remark#

第一步：编写核心插件 remark-image-grid.js#

第二步：在 Astro 中引入该插件#

第三步：CSS 兜底高度对齐防翻车#

结语#

Astro 静态博客文章推荐功能的实现思路

一、需求分析#

二、推荐算法设计#

1. 标签匹配分（0-100）#

2. 标题相似度分（0-100）#

3. 时间新鲜度分（0-30）#

4. 分类加成（0 或 10）#

5. 选取策略#

三、随机文章的实现#

问题：静态站无法实现服务端随机#

方案：复用已有 API + 客户端渲染#

缓存共享#

四、组件架构#

五、关键设计决策总结#

Astro 静态博客文章加密功能的实现思路

背景#

整体架构#

加密算法#

数据格式#

构建时加密#

为什么 salt 和 IV 是确定性的？#

桥接组件#

客户端解密#

为什么不用 Svelte 组件？#

内容注入的陷阱#

1. Script 标签不执行#

2. Mermaid 单例阻塞#

3. TOC 目录重新初始化#

4. Fancybox 灯箱重新绑定#

加密范围#

会话缓存#

使用方式#

安全性说明#

为我的Astro博客支持响应式图像和AVIF格式

背景#

响应式图像#

配置说明#

AVIF 与 WebP#

AVIF#

WebP#

如何选择#

参考#

Fuwari/Firefly 升级到 Content Layer API

📝 背景介绍#

🎯 修复封面#

1. 新增一个URL工具#

2. 调用工具提取封面路径#

3.封面无法加载的原因#

✅ 升级检查清单#

🎨 关键差异对比#

📚 参考资料#

提交Commit或PR的同时关闭Issue

GitHub 支持的关键词#

把关键词放在 Commit message 还是 PR 描述？#

常见使用场景#

注意事项#

Git 保持主分支(master)和开发分支(develop)同步

为什么要同步这两个分支？#

从 master 同步到 develop#

从 develop 同步到 master#

使用 rebase 保持线性历史（适合小团队）#

实际遇到的问题和解决方案#

问题 1：合并时出现大量冲突#

问题 2：合并后想撤销#

问题 3：只想同步特定的提交#

解决电脑看直播会导致电脑卡顿

卡顿原因#

卸载解码扩展#

为Git设置代理，解决无法拉取和推送GitHub

前言#

HTTPS / HTTP 代理#

第一步：编写核心插件 `remark-image-grid.js`#