年华

为 Firefly添加 Umami 访问统计卡片

Fri, 29 May 2026 00:00:00 GMT

Note

本教程基于THW’s Blog大佬教程两次创作。

开始#

了解访客来源与流量趋势是很有必要的。静态博客中配置简单，功能强大的 Umami 往往是我们的首选。

然而，直接挂载 Umami 的分享外链不够直观且破坏页面一致性。本文将教你如何将 Umami 的统计数据以原生组件的形式集成到 Firefly 主题的侧边栏中，让你的博客实时展示访问数据。

准备#

首先要有一个 Umami，并获得Umami的分享链接。

添加组件#

在 src/components/widget/ 目录下创建 UmamiStats.astro 文件，代码如下：

1
---
2
import WidgetLayout from "../common/WidgetLayout.astro";
3

4
interface Props {
5
  class?: string;
6
  style?: string;
7
}
8
const { class: className, style } = Astro.props;
9
---
10

11
<WidgetLayout name="统计" class:list={["umami-stats-container", className, "cursor-pointer transition-opacity active:scale-95"]} {style}>
12
    <a target="_blank" rel="noopener noreferrer" class="block umami-link">
13
        <div class="text-center py-2">
14
            <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-pageviews">-</div>
15
            <div class="text-sm text-neutral-500 dark:text-neutral-400">总浏览量</div>
16
        </div>
17
        <div class="grid grid-cols-2 divide-x divide-neutral-200 dark:divide-neutral-700 text-center pt-2">
18
            <div class="px-2">
19
                <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-visits">-</div>
20
                <div class="text-sm text-neutral-500 dark:text-neutral-400">访问数</div>
21
            </div>
22
            <div class="px-2">
23
                <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-visitors">-</div>
24
                <div class="text-sm text-neutral-500 dark:text-neutral-400">游客数</div>
25
            </div>
26
        </div>
27
    </a>
28
</WidgetLayout>
29

30
<script>
31
const UMAMI_CONFIG = {
32
    shareUrl: '你的方享链接',
33
};
34

35
let __UMAMI_INTERNAL = {
36
    baseUrl: '',
37
    websiteId: '',
38
    shareToken: '',
39
    shareId: '',
40
    isReady: false
41
};
42

43
const FALLBACK_STATS = {
44
    pageviews: 1000,
45
    visits: 1000,
46
    visitors: 1000,
47
};
48

49
async function initUmamiConfig() {
50
    try {
51
        const sharePath = UMAMI_CONFIG.shareUrl.split('/share/')[1];
52
        if (!sharePath) throw new Error('Invalid Umami Share URL');
53

54
        // 自动识别是官方云服务还是自建域名
55
        let apiBase = '';
56
        if (UMAMI_CONFIG.shareUrl.includes('cloud.umami.is') || UMAMI_CONFIG.shareUrl.includes('analytics.umami.is')) {
57
            const region = UMAMI_CONFIG.shareUrl.includes('/analytics/eu/') ? 'eu' : 'us';
58
            apiBase = `https://cloud.umami.is/analytics/${region}/api`;
59
        } else {
60
            // 自建域名动态提取基础 API 路径
61
            const urlObj = new URL(UMAMI_CONFIG.shareUrl);
62
            apiBase = `${urlObj.origin}/api`;
63
        }
64

65
        const res = await fetch(`${apiBase}/share/${sharePath}`);
66
        if (!res.ok) throw new Error(`Failed to fetch share config: ${res.status}`);
67
        const data = await res.json();
68

69
        __UMAMI_INTERNAL = {
70
            baseUrl: apiBase,
71
            websiteId: data.websiteId,
72
            shareToken: data.token,
73
            shareId: data.shareId,
74
            isReady: true
75
        };
76

77
        // 更新页面上所有统计组件的跳转链接
78
        const links = document.querySelectorAll('.umami-link');
79
        links.forEach(link => link.setAttribute('href', UMAMI_CONFIG.shareUrl));
80

81
    } catch (e) {
82
        console.error('Umami Config Init Failed:', e);
83
    }
84
}
85

86
function formatNumber(num: number): string {
87
    if (num >= 1000000) {
88
        return (num / 1000000).toFixed(1) + 'M';
89
    } else if (num >= 1000) {
90
        return (num / 1000).toFixed(1) + 'K';
91
    }
92
    return Math.round(num).toString();
93
}
94

95
function setStats(values: { pageviews: number; visits: number; visitors: number }) {
96
    // 抓取页面上所有的统计组件实例
97
    const pageviewsElements = document.querySelectorAll('.umami-total-pageviews');
98
    const visitsElements = document.querySelectorAll('.umami-total-visits');
99
    const visitorsElements = document.querySelectorAll('.umami-total-visitors');
100

101
    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
102
    const animHandles = new Map<HTMLElement, number>();
103

104
    const animateStat = (el: HTMLElement | null, to: number, duration = 2000) => {
105
        if (!el) return;
106

107
        const prev = animHandles.get(el);
108
        if (prev) cancelAnimationFrame(prev);
109

110
        const from = 0;
111
        const startTime = performance.now();
112

113
        const tick = (now: number) => {
114
            const elapsed = now - startTime;
115
            const progress = Math.min(1, elapsed / duration);
116
            const easedProgress = easeOutCubic(progress);
117

118
            const current = from + (to - from) * easedProgress;
119
            el.textContent = formatNumber(current);
120

121
            if (progress < 1) {
122
                animHandles.set(el, requestAnimationFrame(tick));
123
            }
124
        };
125
        animHandles.set(el, requestAnimationFrame(tick));
126
    };
127

128
    // 群发更新所有节点的数字
129
    pageviewsElements.forEach(el => animateStat(el as HTMLElement, values.pageviews));
130
    visitsElements.forEach(el => animateStat(el as HTMLElement, values.visits));
131
    visitorsElements.forEach(el => animateStat(el as HTMLElement, values.visitors));
132
}
133

134
async function fetchUmamiStats() {
135
    if (!__UMAMI_INTERNAL.isReady) {
136
        await initUmamiConfig();
137
    }
138

139
    if (!__UMAMI_INTERNAL.isReady) {
140
        setStats(FALLBACK_STATS);
141
        return;
142
    }
143

144
    try {
145
        const endAt = Date.now();
146
        const startAt = 0;
147
        const url = `${__UMAMI_INTERNAL.baseUrl}/websites/${__UMAMI_INTERNAL.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai`;
148

149
        const response = await fetch(url, {
150
            headers: {
151
                'x-umami-share-context': '1',
152
                'x-umami-share-token': __UMAMI_INTERNAL.shareToken
153
            }
154
        });
155

156
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
157
        const data = await response.json();
158
        const getValue = (field: any) => (typeof field === 'object' ? field?.value : field) || 0;
159

160
        setStats({
161
            pageviews: getValue(data.pageviews),
162
            visits: getValue(data.visits),
163
            visitors: getValue(data.visitors),
164
        });
165

166
    } catch (error) {
167
        console.error('Umami Fetch Failed:', error);
168
        setStats(FALLBACK_STATS);
169
    }
170
}
171

172
let __umamiStatsStarted = false;
173
function startUmamiStats() {
174
    if (__umamiStatsStarted) return;
175
    __umamiStatsStarted = true;
176
    fetchUmamiStats();
177
}
178

179
function initUmamiStatsVisibility() {
180
    const containers = document.querySelectorAll('.umami-stats-container');
181
    const io = new IntersectionObserver((entries) => {
182
        let isAnyVisible = false;
183
        entries.forEach(entry => {
184
            if (entry.isIntersecting) isAnyVisible = true;
185
        });
186

187
        if (isAnyVisible) {
188
            startUmamiStats();
189
            io.disconnect();
190
        }
191
    }, { threshold: 0.1 });
192

193
    containers.forEach(container => io.observe(container));
194
}
195

196
initUmamiStatsVisibility();
197

198
if (window.swup) {
199
    window.swup.hooks.on('page:view', () => {
200
        __umamiStatsStarted = false;
201
        initUmamiStatsVisibility();
202
    });
203
}
204
</script>

展开收起

配置参数#

在代码文件的 script 部分，填入你的分享链接

1
<script>
2
const UMAMI_CONFIG = {
3
    shareUrl: '你的方享链接',
4
};

添加到侧边栏组件#

在src/components/layout/SideBar.astro中导入并使用此组件，这部分可以查看下方完整代码

1
---
2
import type { MarkdownHeading } from "astro";
3
import Advertisement from "@/components/widget/Advertisement.astro";
4
import Announcement from "@/components/widget/Announcement.astro";
5
import Calendar from "@/components/widget/Calendar.astro";
6
import Categories from "@/components/widget/Categories.astro";
7
import Music from "@/components/widget/Music.astro";
8
import Profile from "@/components/widget/Profile.astro";
9
import SidebarTOC from "@/components/widget/SidebarTOC.astro";
10
import SiteStats from "@/components/widget/SiteStats.astro";
11
import Tags from "@/components/widget/Tags.astro";
12
import { sidebarLayoutConfig } from "@/config";
13
import type {
14
  MobileBottomComponentConfig,
15
  WidgetComponentConfig,
16
  WidgetComponentType,
17
} from "@/types/config";
18
import UmamiStats from "../widget/UmamiStats.astro";
19

20
interface Props {
21
  class?: string;
22
  headings?: MarkdownHeading[];
23
  side?: "left" | "right" | "bottom";
24
}
25

26
// 侧边栏位置常量
27
const SIDEBAR_SIDE = {
28
  LEFT: "left",
29
  RIGHT: "right",
30
  BOTTOM: "bottom",
31
} as const;
32

33
// 组件位置常量
34
const COMPONENT_POSITION = {
35
  TOP: "top",
36
  STICKY: "sticky",
37
} as const;
38

39
// 动画延迟配置
40
const ANIMATION_DELAY_UNIT = 50; // ms
41

42
// 组件映射表
43
const componentMap = {
44
  profile: Profile,
45
  announcement: Announcement,
46
  categories: Categories,
47
  tags: Tags,
48
  sidebarToc: SidebarTOC,
49
  advertisement: Advertisement,
50
  stats: SiteStats,
51
  calendar: Calendar,
52
  music: Music,
53
} satisfies Record<WidgetComponentType, typeof Profile>;
54

55
// 获取侧边栏位置
56
const side = (Astro.props.side ||
57
  SIDEBAR_SIDE.LEFT) as (typeof SIDEBAR_SIDE)[keyof typeof SIDEBAR_SIDE];
58
const className = Astro.props.class;
59

60
// 根据 side 属性获取对应的组件列表
61
const getComponents = (): (
62
  | WidgetComponentConfig
63
  | MobileBottomComponentConfig
64
)[] => {
65
  if (side === SIDEBAR_SIDE.LEFT) {
66
    return sidebarLayoutConfig.leftComponents;
67
  }
68
  if (side === SIDEBAR_SIDE.RIGHT) {
69
    return sidebarLayoutConfig.rightComponents;
70
  }
71
  if (side === SIDEBAR_SIDE.BOTTOM) {
72
    return sidebarLayoutConfig.mobileBottomComponents;
73
  }
74
  return [];
75
};
76

77
// 过滤并排序组件
78
const filterAndSortComponents = (
79
  components: (WidgetComponentConfig | MobileBottomComponentConfig)[],
80
) => {
81
  return components.filter((comp) => comp.enable);
82
};
83

84
// 分离 top 和 sticky 位置的组件
85
const getComponentsByPosition = (
86
  components: (WidgetComponentConfig | MobileBottomComponentConfig)[],
87
) => {
88
  const topComponents = components.filter(
89
    (c) => "position" in c && c.position === COMPONENT_POSITION.TOP,
90
  ) as WidgetComponentConfig[];
91
  const stickyComponents = components.filter(
92
    (c) => "position" in c && c.position === COMPONENT_POSITION.STICKY,
93
  ) as WidgetComponentConfig[];
94
  return { topComponents, stickyComponents };
95
};
96

97
// 获取动画延迟
98
const getAnimationDelay = (index: number): string => {
99
  return `${index * ANIMATION_DELAY_UNIT}ms`;
100
};
101

102
// 判断当前页面是否为文章页面
103
const isPostPage = Astro.url.pathname.includes("/posts/");
104

105
// 判断组件在当前页面首屏是否可见
106
const isComponentInitiallyVisible = (
107
  config: WidgetComponentConfig | MobileBottomComponentConfig,
108
): boolean => {
109
  if (
110
    "showOnPostPage" in config &&
111
    config.showOnPostPage === false &&
112
    isPostPage
113
  ) {
114
    return false;
115
  }
116
  if (
117
    "showOnNonPostPage" in config &&
118
    config.showOnNonPostPage === false &&
119
    !isPostPage
120
  ) {
121
    return false;
122
  }
123
  return true;
124
};
125

126
// 动态构建组件 props
127
const getComponentProps = (
128
  config: WidgetComponentConfig | MobileBottomComponentConfig,
129
  index: number,
130
): Record<string, unknown> => {
131
  const baseProps: Record<string, unknown> = {
132
    class: "onload-animation",
133
    style: `animation-delay: ${getAnimationDelay(index)}`,
134
  };
135

136
  if ("showOnPostPage" in config && config.showOnPostPage === false) {
137
    baseProps.class = `${baseProps.class} widget-hide-on-post`;
138
    if (isPostPage) {
139
      baseProps.class = `${baseProps.class} hidden`;
140
    }
141
  }
142
  if ("showOnNonPostPage" in config && config.showOnNonPostPage === false) {
143
    baseProps.class = `${baseProps.class} widget-hide-on-non-post`;
144
    if (!isPostPage) {
145
      baseProps.class = `${baseProps.class} hidden`;
146
    }
147
  }
148

149
  if (config.type === "sidebarToc") {
150
    return { ...baseProps, headings: Astro.props.headings || [] };
151
  }
152

153
  if (
154
    config.type === "advertisement" &&
155
    "configId" in config &&
156
    config.configId
157
  ) {
158
    return { ...baseProps, configId: config.configId };
159
  }
160

161
  return baseProps;
162
};
163

164
// 获取所有需要渲染的组件
165
const allComponents = getComponents();
166
const filteredComponents = filterAndSortComponents(allComponents);
167

168
const isMobileBottom = side === SIDEBAR_SIDE.BOTTOM;
169
const { topComponents, stickyComponents } = !isMobileBottom
170
  ? getComponentsByPosition(filteredComponents)
171
  : { topComponents: [], stickyComponents: [] };
172
const bottomComponents = isMobileBottom ? filteredComponents : [];
173
const hasInitiallyVisibleTopComponents = topComponents.some(
174
  isComponentInitiallyVisible,
175
);
176

177
// 为移动端准备分离的组件（为了实现 Profile 在上，统计在下）
178
let mobileProfileComp: MobileBottomComponentConfig | undefined;
179
let mobileOtherComponents: MobileBottomComponentConfig[] = [];
180

181
if (isMobileBottom) {
182
  mobileProfileComp = bottomComponents.find((comp) => comp.type === "profile");
183
  mobileOtherComponents = bottomComponents.filter(
184
    (comp) => comp.type !== "profile",
185
  );
186
}
187

188
// 决定是否渲染 sticky 容器（如果有 sticky 组件，或者当前是左侧边栏）
189
const hasStickyContent =
190
  stickyComponents.length > 0 || side === SIDEBAR_SIDE.LEFT;
191
---
192

193
{
194
  (topComponents.length > 0 || stickyComponents.length > 0 || bottomComponents.length > 0 || hasStickyContent) && (
195
    <div id={`${side}-sidebar`} class:list={[className, "flex flex-col w-full pt-0"]}>
196
      {/* Mobile bottom components - 移动端布局 */}
197
      {isMobileBottom ? (
198
        <div class="flex flex-col w-full gap-4">
199
          {/* 1. 先渲染个人信息 */}
200
          {mobileProfileComp && (() => {
201
            const Component = componentMap[mobileProfileComp.type];
202
            if (!Component) return null;
203
            const props = getComponentProps(mobileProfileComp, 0) as any;
204
            return <Component {...props} />;
205
          })()}
206

207
          {/* 2. 接着渲染统计组件（实现上下互换） */}
208
          <UmamiStats class="onload-animation" style="animation-delay: 50ms" />
209

210
          {/* 3. 最后渲染其他的常规组件 */}
211
          {mobileOtherComponents.map((comp, index) => {
212
            const Component = componentMap[comp.type];
213
            if (!Component) return null;
214
            const props = getComponentProps(comp, index + 2) as any;
215
            return <Component {...props} />;
216
          })}
217
        </div>
218
      ) : (
219
        <>
220
          {/* Top components */}
221
          {topComponents.length > 0 && (
222
            <div
223
              class:list={[
224
                "flex flex-col w-full gap-4",
225
                hasInitiallyVisibleTopComponents && "mb-4",
226
              ]}
227
            >
228
              {topComponents.map((comp, index) => {
229
                const Component = componentMap[comp.type];
230
                if (!Component) return null;
231
                const props = getComponentProps(comp, index) as any;
232
                return <Component {...props} />;
233
              })}
234
            </div>
235
          )}
236

237
          {/* Sticky components */}
238
          {hasStickyContent && !isMobileBottom && (
239
            <div
240
              id={`${side}-sidebar-sticky`}
241
              class:list={[
242
                "flex flex-col w-full mt-0 gap-4",
243
                "sticky",
244
                hasInitiallyVisibleTopComponents ? "top-4" : "top-0",
245
              ]}
246
            >
247
              {/* PC 端仅在左侧边栏渲染统计，避免两侧重复 */}
248
              {side === SIDEBAR_SIDE.LEFT && (
249
                <UmamiStats class="onload-animation" style="animation-delay: 200ms" />
250
              )}
251

252
              {stickyComponents.map((comp, index) => {
253
                const Component = componentMap[comp.type];
254
                if (!Component) return null;
255
                const props = getComponentProps(
256
                  comp,
257
                  topComponents.length + index
258
                ) as any;
259
                return <Component {...props} />;
260
              })}
261
            </div>
262
          )}
263
        </>
264
      )}
265
    </div>
266
  )
267
}

展开收起

结尾#

通过以上步骤，你就成功为 Firefly 添加了具有丰富交互感、自动解析配置且支持点击查看详情的 Umami 统计卡片。

NVIDIA Build:免费AI API

Fri, 29 May 2026 00:00:00 GMT

免费api#

NVIDIA Build限额非常慷慨，每分钟40次的限额，日常使用完全够用了。

模型也比较较丰富，有比如DeepSeek V4 Pro 和DeepSeek V4 Flase

还有云端 GPU 实例的免费试用。

如果你想体验前沿 AI 模型又不想花钱，NVIDIA Build 是目前最值得尝试的平台。

一个非常NB的ip优选

Sun, 24 May 2026 00:00:00 GMT

在MIFENG の主页有一个优选项目，非常好用。

并且是完全开源免费的项目。

网址：NB优选

论二模试卷上的错误

Sat, 23 May 2026 00:00:00 GMT

众所周知我是一名初二学生，在5月21日这么浪漫的一天，我考玩了地理和生物的二模。发现试卷上有些低价错误。

地理#

赤道周长写错了成了赤道昼长。

地理

生物#

肺泡写成了胚泡。

生物

所以，试卷是不需要审核的吗。错别字都能出现。果然世界就是一个巨大的草台班子。

转载止战之殇

Wed, 13 May 2026 00:00:00 GMT

止战之殇#

雷德王还有3个小时降临地球，世界各大媒体平台将这条消息传唤的沸沸扬扬，他的到来，是救赎还是毁灭，我无从得知，众说纷纭，我只想先吃个汉堡吧。

宇宙无穷，人生微渺，我从一无所有中来，自当归于虚无。唯独让我牵挂难以放下执念的，便是学校的汉堡了，汉堡不大，面包很干，初相识于三年前，我年少，它缥纱，浅尝一口：“哇”很好吃。可惜后来吃饭时间越来越晚，与曾经的挚爱想重逢却要隔着人山人海，我等了一次又一次。

可惜不悔梦归处，只恨太匆匆，不知什么时候起，汉堡的肉饼变成了自制小牛肉，陈然多了一份人情味，少了一份预制感，但干燥的触感与同样燥干的面饼相结合，让我失去了对其往日的热爱，或者它也不能称之为那个它了。

学校门口的餐车最近上了汉堡，用的和学校同样的佐料，不过是曾经的面饼一样的干，早上考试我又饿又渴，买了个汉堡，更渴了。

可字宙苍茫，谁又能主宰学校的汉堡呢?其实世间一切自有定数，我不信奉佛陀，自我信仰上帝，也许那全知全能的主会将仁爱的汉堡撒下大地，在我活着，或在我死后。

雷德王降临了，在维多利亚港。

没有谈判，硝烟中，炮火轰鸣中，世界想去了色彩。

我到了，因为我必须来，作为新时代新青年，肩负历史使命与伟大复兴重担，拯救世界，舍我其谁?

可站在雷德王脚下那一刻，我才意识到自己有多弱小，他比自由女神像还要大，尽管我没去过美国，但我刷过视频。

雷德王停下进攻的脚步，低头看我，示意我把手给他，我不敢拒绝却也止不住的颤抖，原来他是要我手中的汉堡啊，看来无论何等高级的生命都无法抵御汉堡的诱惑。

一颗子弹贯穿我的胸膛，临死前耳畔传来的话语，在说我通敌。

哈哈哈，这就是人性吗?雷德王，我开始理解你了，不过，突然……好想吃个汉堡····

原文图,请以倒观方式观看

Linux(Debian系)上搭建C++开发环境

Sat, 02 May 2026 00:00:00 GMT

1.介绍#

Linux 凭借其丰富的工具生态和出色的性能，一直是 C++ 开发者的热门选择。本文章将带你一步步在用 Visual Studio Code 搭配 Clang、CMake、Ninja 和 vcpkg，搭建一个现代化的 C++ 开发环境，并最终完成一个基于 C++20 模块的示例项目。

我们需要安装的四个核心组件是：#

编译器: Clang
项目构建器: CMake
本地构建器: Ninja
依赖包管理: vcpkg

安装和配置。#

1.安装 Clang 编译器#

Clang 不仅错误提示友好，还总能快速支持最新的 C++ 标准。根据 LLVM 项目发布页面显示，截至 2026 年 4 月，最新的稳定版本是 Clang 22.1.3。

LLVM 社区的开发非常活跃，Clang 23 也已发布了预发布版本（2026年4月13日），正处于积极的测试阶段。但推荐选择稳定版本。

使用 LLVM 官方脚本是最便捷的安装方式。

1. 下载并执行安装脚本：#

Terminal window

1
wget https://apt.llvm.org/llvm.sh
2
chmod +x llvm.sh
3
sudo ./llvm.sh 22

执行脚本后，它会自动添加 LLVM 的官方 APT 仓库，并安装 clang-22 及相关的所有工具。

2. 配置默认版本：#

由于安装后的编译器名为 clang-22，我们需要通过 update-alternatives 命令来设置系统级的默认调用，方便我们直接在终端使用 clang 命令。

Terminal window

1
# - 依次执行以下命令，将 Clang 22 设置为默认编译器
2
sudo update-alternatives --install /usr/bin/clang clang /usr/bin/clang-22 100
3
sudo update-alternatives --install /usr/bin/clang++ clang++ /usr/bin/clang++-22 100
4
sudo update-alternatives --install /usr/bin/clangd clangd /usr/bin/clangd-22 100
5
sudo update-alternatives --install /usr/bin/lldb lldb /usr/bin/lldb-22 100
6
sudo update-alternatives --install /usr/bin/lld lld /usr/bin/lld-22 100
7
sudo update-alternatives --install /usr/bin/clang-tidy clang-tidy /usr/bin/clang-tidy-22 100
8
sudo update-alternatives --install /usr/bin/clang-format clang-format /usr/bin/clang-format-22 100

执行完后，通过 clang —version 命令验证，你应该能看到类似 “clang version 22.1.3” 的输出信息。

2.安装 CMake 构建系统#

CMake 是 C++ 项目管理的核心，它能够生成不同构建系统所需的文件。自 CMake 4.0 起，项目引入了许多现代化改进。根据 Kitware 官方发布页面，当前 CMake 4.3.1 是我们可以获得的最新稳定版本。

这里给出通过 CMake 官方提供的通用安装脚本的安装方式：

1.下载安装脚本：#

Terminal window

1
wget https://github.com/Kitware/CMake/releases/download/v4.3.1/cmake-4.3.1-linux-x86_64.sh

2.运行脚本#

Terminal window

1
chmod +x cmake-4.3.1-linux-x86_64.sh
2
sudo ./cmake-4.3.1-linux-x86_64.sh --prefix=/opt/cmake-4.3.1 --skip-license

3.配置为默认版本：#

Terminal window

1
sudo update-alternatives --install /usr/bin/cmake cmake /opt/cmake-4.3.1/bin/cmake 100
2
sudo update-alternatives --install /usr/bin/ctest ctest /opt/cmake-4.3.1/bin/ctest 100
3
sudo update-alternatives --install /usr/bin/cpack cpack /opt/cmake-4.3.1/bin/cpack 100

现在运行 cmake —version，你应该会看到版本号为 4.3.1。

3.安装 Ninja 构建工具#

Ninja 是一个快速的构建工具，它专注于用最快的速度完成编译任务，非常适合配合 CMake 使用。目前最新的 Ninja 稳定版本是 1.13.2。

我们可以从 Ninja 的 GitHub 发布页面获取预编译好的二进制文件，快速完成安装：

Terminal window

1
# 下载最新的 Ninja 二进制包
2
wget https://github.com/ninja-build/ninja/releases/download/v1.13.2/ninja-linux.zip
3

4
# 解压并将可执行文件移动到系统路径
5
unzip ninja-linux.zip
6
sudo mv ninja /usr/bin/ninja
7
sudo chmod +x /usr/bin/ninja
8

9
# 验证安装
10
ninja --version

4.安装 vcpkg 包管理器#

vcpkg 是由微软主导的跨平台 C++ 库管理器，能够帮助我们一键安装和管理众多的 C++ 第三方库，极大简化了项目依赖问题。根据 2026 年 4 月的发布页面信息，最新的稳定版本是 2026.04.08。

1. 克隆仓库并引导安装：#

Terminal window

1
# 进入你想要安装 vcpkg 的目录（例如用户主目录）
2
cd ~
3
git clone https://github.com/microsoft/vcpkg.git
4
cd vcpkg
5
# 注意：Linux 环境下，引导脚本是 .sh 结尾的文件！
6
./bootstrap-vcpkg.sh

2. 配置环境变量：#

将以下内容添加到你的 Shell 配置文件中（例如 ~/.bashrc 或 ~/.zshrc），并根据你的实际安装路径进行调整后重启终端或执行 source：

Terminal window

1
# - 将 CMake 和 vcpkg 添加到 PATH 和系统变量
2
export PATH=/opt/cmake-4.3.1/bin:$PATH
3
export VCPKG_ROOT=~/vcpkg
4
export PATH=$VCPKG_ROOT:$PATH

配置完成后，运行 vcpkg —version 即可看到当前版本。

5.Visual Studio Code#

VS Code 是我们编写代码的核心编辑器(也可以使用其他编辑器)。请确保你已从官方网站下载并安装了最新版。为了获得最佳的 C++ 开发体验，请在扩展市场搜索并安装以下关键插件：

核心插件：#

1.Clangd (作者: LLVM)：提供精准的代码补全、跳转和实时诊断。

2.CodeLLDB (作者: Vadim Chugunov)：一个强大的本地调试器，与 VS Code 深度集成。

3.CMake Tools (作者: Microsoft)：让你可以直接在 VS Code 中配置、构建和运行 CMake 项目。

4.CMake (作者: Microsoft)：为 CMakeLists.txt 文件提供语法高亮等支持。

构建和运行你的第一个 C++ 程序#

现在，我们用 C++20 特性之一——“模块 (Modules)”，来作为你的第一个项目。

1.项目结构#

创建一个项目文件夹，使其具有如下结构：

1
CppProject/
2
├── .vscode/
3
│   └── launch.json      # - 调试配置文件 (稍后创建)
4
├── CMakeLists.txt      # - CMake 项目配置
5
├── CMakePresets.json   # - CMake 预设 (简化构建命令)
6
├── main.cpp           # - 主程序文件
7
├── utilities.ixx       # - 一个简单的 C++20 模块
8
└── vcpkg.json         # - vcpkg 依赖描述

不知这些文件里写什么的，把这篇文章给给，让ai吿诉你。

2.配置代码和调试器#

这是 utilities.ixx 模块文件的内容：

1
module;
2
#include <string>
3
export module utilities;
4
export auto get_greeting() {
5
    return "Hello from a C++20 Module!";
6
}

这是主程序文件 main.cpp 的内容：

1
import utilities;
2
#include <fmt/core.h>
3
int main() {
4
    fmt::print("{}\n", get_greeting());
5
    return 0;
6
}

接下来是调试配置。在 .vscode/launch.json 文件中粘贴以下内容，注意 program 的路径需要和你实际的构建输出目录相匹配：

1
{
2
    "version": "0.2.0",
3
    "configurations": [
4
        {
5
            "type": "lldb",
6
            "request": "launch",
7
            "name": "Debug (LLDB)",
8
            "program": "${workspaceFolder}/build/linux_clang/Debug/Rocket",
9
            "args": [],
10
            "cwd": "${workspaceFolder}"
11
        }
12
    ]
13
}

3.配置、构建与运行#

1.选择预设：#

在 VS Code中打开项目文件夹，按下 Ctrl+Shift+P 打开命令面板，输入并选择 CMake: Select Configure Preset。根据你的操作系统和编译器，为你自动选择一个合适的预设。

2.开始构建：#

再次打开命令面板，输入并选择 CMake: Build，或直接按快捷键 F7。你会看到 CMake 调用 Clang 和 Ninja，完成编译和链接。

3. 运行与调试：#

一切顺利的话，点击 VS Code 底部的 ▶️ 按钮即可运行你的程序。设置好断点后，按下 F5 启动调试，你就可以使用 F10 单步执行，并实时查看变量值了。

总结与关键提示#

恭喜！你已经成功搭建了一套强大且符合现代 C++ 最佳实践的开发环境。这个工作流不仅适用于单人学习，也适用于大型协作工程。

在整个过程中有两点很重要：

在所有安装完成后，务必通过 —version 命令验证各个工具的版本，确保环境变量配置正确。
为 VS Code 配置的 launch.json 文件是你项目的“一键启动器”。当你创建新项目时，别忘了将这个文件复制到新项目的 .vscode 目录中，并根据新项目生成的可执行文件路径，调整其中的 “program” 字段。
CMakeLists.txt和MakePresets.json如果你不知道应写什么内容请问AI应填什么内容。

Linux系统上安装和使用Astbot

Sat, 25 Apr 2026 00:00:00 GMT

AstrBot介绍#

AstrBot 是一款开源轻量的聊天机器人框架，支持AI agent与多平台对接（QQ、微信、飞书等）。内置插件系统及可视化面板，拥有上千款插件，可快速实现自动化回复、群管、定时任务，轻松打造专属智能助手。

1.安装#

在liunx系统下在终端输入以下命令（使用脚本安装）

Terminal window

1
bash <(curl -sSL https://raw.githubusercontent.com/zhende1113/Antlia/refs/heads/main/Script/AstrBot/Antlia.sh)

若你的电脑没有curl，可以使用wegt

Terminal window

1
wget -qO- https://raw.githubusercontent.com/zhende1113/Antlia/refs/heads/main/Script/AstrBot/Antlia.sh | bash

Tip

如果uv sync失败,用以下命令修改环境变量

Terminal window

1
echo 'export UV_LINK_MODE=copy' >> ~/.bashrc
2
source ~/.bashrc

再正常用命令启动。

Terminal window

1
cd AstrBot
2
uv run main.py

如果uv下载依赖时，遇到网络问题，可以设置镜像源来解决。

Terminal window

1
echo 'export UV_DEFAULT_INDEX="https://pypi.tuna.tsinghua.edu.cn/simple"' >> ~/.bashrc
2
source ~/.bashrc

AstrBot仓库

AstrBot官网文档

脚本仓库地址

Cloudflare Worker优选

Sat, 25 Apr 2026 00:00:00 GMT

什么是优选#

简单来说，优选就是选择一个国内访问速度更快的Cloudflare节点。

Cloudflare官方分配给我们的IP，在国内访问时延迟往往非常高，经常出现无法访问的情况。而通过优选，我们可以手动将域名解析到那些国内访问更快的Cloudflare IP，从而显著提升网站的访问速度和可用性。

要实现优选，我们只需要做到两点：自己控制路由规则和自己控制DNS解析。

寻找优选域名#

可以从用社区大佬的网站获取。

Worker优选方法#

打开你的Worker项目，选择添加路由，路由应该像**你的域名/**这样填。

路由示例

最后去域名DNS，填加DNS记录，类型选CNAME，名称跟距你路由填的内容填，比如你填的blog.examp.com这里名称填blog（前提是你托管在cloudflare上的域名是examp.com），如果你路由填的域名和你托管的一样，则填@即可，最后目标填入从社区网站中复制下来的域名即可。

DNS记录示例

Tip

优选必需有一个域名托管在cloudflare上。填写路由时必需在你域名后加上/*，不然优选只能做用于你的根域名。