Trrrrw's Blog

通过Umami实现访客数、浏览量

Sat, 06 Dec 2025 23:56:40 +0800

获取 Token

Umami 是有 API 的 (API Reference)
但是这玩意需要账号密码才能访问，不过账号密码也是用来拿 Token 的，所以我们直接拿 Token 就行了
这个 Token 无论如何都要在前端使用的，所以直接拿得了🫠
回头看看写个后端把这玩意封装一下

打开 Umami 后台，打开一个网页概览，随便找一个 /api/ 结尾的请求

在请求标头里找到 Authorization copy下来之后替换掉后面代码中的 :authorization

浏览量、访客、访问次数

文档：GET /api/websites/:websiteId/stats
打开 params.toml，在 [footer] 的 customText 中添加以下内容

`1`	`<span id="visit-info"></span>`

layouts\partials\footer\custom.html

<!-- 浏览量、访客、访问次数 -->
<script>
    (async () => {
        const spanElement = document.getElementById('visit-info')
        let pageviews = 0
        let visitors = 0
        let visits = 0
        const endOfDay = new Date()
        endOfDay.setHours(23, 59, 59, 999)
        const endAt = endOfDay.getTime()
        const headers = {
            'authorization': ':authorization'
        }
        try {
            const res = await fetch(`https://umami.trrw.tech/api/websites/:websiteId/stats?startAt=:startAt&endAt=${endAt}&unit=day&timezone=Asia%2FShanghai`, { headers: headers })
            const viewsData = await res.json()
            pageviews = viewsData.pageviews || 0
            visitors = viewsData.visitors || 0
            visits = viewsData.visits || 0
        } finally {
            spanElement.innerText = `浏览量${pageviews} · 访客${visitors} · 访问次数${visits}`
        }
    })()
</script>

获取 :websiteId

:startAt 可以在后台把时间调成 所有时间段 后找到这个stats请求来获得

最终效果

文章浏览量

文档：GET /api/websites/:websiteId/metrics/expanded

layouts\partials\article\components\details.html

<div class="article-details">
    {{ if .Params.categories }}
    <header class="article-category">
        {{ range (.GetTerms "categories") }}
            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                {{ .LinkTitle }}
            </a>
        {{ end }}
    </header>
    {{ end }}

    <div class="article-title-wrapper">
        <h2 class="article-title">
            <a href="{{ .RelPermalink }}">
                {{- .Title -}}
            </a>
        </h2>
    
        {{ with .Params.description }}
        <h3 class="article-subtitle">
            {{ . }}
        </h3>
        {{ end }}
    </div>

    {{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }}
    {{ $showDate := not .Date.IsZero }}
    {{ $showFooter := or $showDate $showReadingTime }}
    {{ if $showFooter }}
    <footer class="article-time">
        {{ if $showDate }}
            <div>
                {{ partial "helper/icon" "date" }}
                <time class="article-time--published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
                    {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </div>
        {{ end }}

        {{ if $showReadingTime }}
            <div>
                {{ partial "helper/icon" "clock" }}
                <time class="article-time--reading">
                    {{ T "article.readingTime" .ReadingTime }}
                </time>
            </div>
        {{ end }}

        <!-- 这里是新增的，其余都是主题原本的功能 -->
        <!-- 浏览量 -->
        <div>
            {{ partial "helper/icon" "read" }}
            <time class="article-analysic" data-path="{{ .RelPermalink }}">
                0 阅读
            </time>
        </div>
        <!-- ⬆️⬆️⬆️ -->
    </footer>
    {{ end }}

    {{ if .IsTranslated }}
        <footer class="article-translations">
            {{ partial "helper/icon" "language" }}
            <div>
                {{ range .Translations }}
                    <a href="{{ .Permalink }}" class="link">{{ .Language.LanguageName }}</a>
                {{ end }}
            </div>
        </footer>
    {{ end }}
</div>

这里 {{ partial "helper/icon" "read" }} 是对应的 assets/icons 下的svg，这里就是 assets/icons/read.svg
这里贴一下svg代码，省的找了

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-eye">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M2 12s3 -7 10 -7s10 7 10 7s-3 7 -10 7s-10 -7 -10 -7" />
    <circle cx="12" cy="12" r="2" />
</svg>

layouts\partials\footer\custom.html

<!-- 文章浏览量 -->
<script>
    (async () => {
        const els = document.querySelectorAll('.article-analysic')
        if (!els.length) return

        const endOfDay = new Date()
        endOfDay.setHours(23, 59, 59, 999)
        const endAt = endOfDay.getTime()
        const headers = {
            'authorization': ':authorization'
        }
        for (const el of els) {
            const search = el.dataset.path || '/'
            let pageviews = 0
            try {
                const res = await fetch(`https://umami.trrw.tech/api/websites/:websiteId/metrics/expanded?startAt=:startAt&endAt=${endAt}&unit=day&timezone=Asia%2FShanghai&search=${search}&type=path`, { headers: headers })
                const data = await res.json()
                if (Array.isArray(data) && data.length > 0)
                    pageviews = data[0].pageviews || 0
            } finally {
                el.textContent = `${pageviews} 阅读`
            }
        }
    })()
</script>

最终效果

附录

参考文献

Umami API Reference

文章封面

Stack 主题下 Waline 美化

Wed, 22 Oct 2025 17:24:14 +0800

前言

这篇文章只是简单修改了下 Waline 的配色以及 a 标签的样式
可以先参考 「建站技术 | 使博客更好地接入 Waline」 配置好 Waline

Waline 美化

assets\scss\custom.scss

// Waline
:root {
    --waline-theme-color: var(--accent-color) !important;
    --waline-active-color: var(--accent-color-darker) !important;
}

.wl-panel {
    border-radius: var(--card-border-radius) !important;
}

.wl-action:first-child {
    display: none;
}

.wl-content a {
    text-decoration: none;
    box-shadow: 0 -2px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
    transition: all .3s ease;

    &:hover {
        color: var(--waline-theme-color) !important;
        box-shadow: 0 calc(-1rem * 2.2) rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
    }
}

.wl-header-item input {
    color: var(--card-text-color-secondary);
    font-size: .75em !important;
}

比较难绷的是如果你的标题只是 waline 的话，会因为 id=“waline” 而把评论显示在标题位置

附录

参考文献

建站技术 | 使博客更好地接入 Waline

文章封面

遙@RSyaooooo

Stack主题友链等页面美化

Tue, 24 Jun 2025 21:05:33 +0800

前言

Stack默认的友链是一行一个，友链一多就会导致页面很长，影响美观。
本来是准备参考 「建站技术 | 我的链接页面是如何实现的？」 这篇来设置成三列的，但是其HTML文件的内容给的不是很完整，导致完全不熟悉Hugo语法的我没法成功复现，所以就来记录一下。

代码

SCSS

assets\scss\custom.scss

//链接页面//链接页面
@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        background: none;
        box-shadow: none;

        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
            border-radius: 10px;
            transition: transform .2s;

            &:not(:nth-child(3n)) {
                margin-right: 8px;
            }

            // 添加hover效果
            &:hover {
                transform: translateY(-3px);
                box-shadow: var(--shadow-l3);
            }
        }
    }
}

.article-list--title {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.6rem;
    margin-left: 10px;
}

.article-list--compact.links {
    // 缩小连接组标题与下面链接的距离
    margin-top: -20px;
}

.article-image>img {
    // 给文章卡片、友链卡片等的图标添加圆角
    border-radius: 10px;
}

.section-image>img {
    // 给categories的图标添加圆角
    object-fit: cover;
    border-radius: 10px;
}

这里由于我用不到原博主的 badge 功能，所以将那一部分删掉了，并将所有卡片的图标都添加了圆角
给卡片添加了鼠标悬浮动画

JSON

data\links.json

[
    {
        "title": "我的网站",
        "links": [
            {
                "title": "Trrrrw's Blog",
                "description": "Spending a lifetime to taste the love and pain",
                "website": "https://www.trrw.tech/",
                "image": "https://www.trrw.tech/favicon.webp"
            },
            {
                "title": "影像档案架",
                "description": "整合原神、崩铁、绝区零的官网视频",
                "website": "https://hoyo-video.trrw.tech/",
                "image": "https://hoyo-video.trrw.tech/pwa@1024.png"
            }
        ]
    },
    {
        "title": "友链",
        "links": [
            {
                "title": "唯知笔记",
                "description": "探索知识的无限可能",
                "website": "https://note.weizwz.com",
                "image": "https://p.weizwz.com/logo_a4353391cbf0889b.webp"
            },
            {
                "title": "失迹の博客",
                "description": "猫与茶与代码与你：一位 编程 / 设计 / ACGN 爱好者的博客。",
                "website": "https://blog.reincarnatey.net/",
                "image": "https://npm.elemecdn.com/@mitr-yuzr/vno-dmego-yuzr@latest/assets/img/headimg.png"
            }
        ]
    }
]

这里的图片可以是链接，也可以是本地图片，起始路径是 content\page\links

HTML

layouts\page\links.html

{{ define "body-class" }}article-page keep-sidebar{{ end }}
{{ define "main" }}
    {{ partial "article/article.html" . }}

    {{ range $i, $category := $.Site.Data.links }}
        <span class="article-list--title">{{ $category.title }}</span>
        <div class="article-list--compact links">
            {{ $siteResources := resources }}
            {{ range $i, $link :=  $category.links }}
                <article>
                    <a href="{{ $link.website }}" target="_blank" rel="noopener">
                        <div class="article-details">
                            <h2 class="article-title">
                                {{- $link.title -}}
                            </h2>
                            <footer class="article-time">
                                {{ with $link.description }}
                                    {{ . }}
                                {{ else }}
                                    {{ $link.website }}
                                {{ end }}
                            </footer>
                        </div>
                        {{ if $link.image }}
                            <div class="article-image">
                                <img src="{{ $link.image }}" loading="lazy" data-key="links-{{ $link.website }}">
                            </div>
                        {{ end }}
                    </a>
                </article>
            {{ end }}
        </div>
    {{ end }}

    {{ if not (eq .Params.comments false) }}
        {{ partial "comments/include" . }}
    {{ end }}

    {{ partialCached "footer/footer" . }}

{{ end }}

因为我的习惯是直接使用友链网站的图片链接，所以这里把 <img> 的 src 直接设置成了json中的image参数。

最终效果

附录

参考文献

文章封面

Skirk

Waline评论配置Server酱通知

Tue, 03 Jun 2025 00:11:56 +0800

添加环境变量

在你的 Vercel 中的 Waline 的 Project 中添加环境变量：

环境变量	描述
SC_KEY	Server 酱提供的 Token，必填
AUTHOR_EMAIL	博主邮箱，用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知
SITE_NAME	网站名称，用于在消息中显示
SITE_URL	网站地址，用于在消息中显示
SC_TEMPLATE	Server酱使用的通知模板，变量与具体格式可参见 Waline文档的通知模板。未配置则使用默认模板

添加推送代码

按理说这样设置之后就可以正常推送了，而且文档中就是这样写的，但实际是，即使设置了环境变量，也无法正常推送。
此时打开你 Waline 对应的 Github 仓库，打开根目录下的 index.cjs 文件，在其中添加以下代码：

const Application = require('@waline/vercel');

const FormData = require('form-data');
const fetch = require('node-fetch');

module.exports = Application({
    plugins: [],
    async postSave(comment) {
        // do what ever you want after comment saved
        console.log('New comment received:', comment);

        // 获取环境变量
        const { SC_KEY, SITE_NAME, SITE_URL, PUSH_PLUS_KEY } = process.env;

        // 准备数据
        const data = {
            self: comment,
            site: {
                name: SITE_NAME || 'Default Site Name',
                url: SITE_URL || 'https://default.site.url',
                postUrl: (SITE_URL || 'https://default.site.url') + comment.url + '#' + comment.objectId,
            },
        };

        const contentTemplate = `
💬 LengM
----------------------------

评论页面: ${data.site.postUrl}

评论内容: ${data.self.comment}

评论者昵称: ${data.self.nick}

评论者邮箱: ${data.self.mail || '未提供'}

IP 地址: ${data.self.ip || '未知'}

评论时间: ${new Date(data.self.createdAt).toLocaleString()}

浏览器信息: ${data.self.ua || '未知'}
`;

        const title = `LengM - 新评论通知`;

        let success = false;

        // Server酱通知
        if (SC_KEY) {
            const form = new FormData();
            form.append('text', title);
            form.append('desp', contentTemplate);

            try {
                const response = await fetch(`https://sctapi.ftqq.com/${SC_KEY}.send`, {
                    method: 'POST',
                    headers: form.getHeaders(),
                    body: form,
                });

                const result = await response.json();
                if (response.ok && result.code === 0) {
                    console.log('Server酱通知成功:', result);
                    success = true;
                } else {
                    console.error('Server酱通知失败:', result);
                }
            } catch (error) {
                console.error('Error sending Server酱 notification:', error.message);
            }
        } else {
            console.error('SC_KEY not defined in environment variables.');
        }

        // PushPlus通知
        if (PUSH_PLUS_KEY) {
            try {
                const pushplusResponse = await fetch('http://www.pushplus.plus/send/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `token=${PUSH_PLUS_KEY}&title=${encodeURIComponent(title)}&content=${encodeURIComponent(contentTemplate)}&template=html`,
                });

                const pushplusResult = await pushplusResponse.json();
                if (pushplusResponse.ok && pushplusResult.code === 200) {
                    console.log('PushPlus通知成功:', pushplusResult);
                    success = true;
                } else {
                    console.error('PushPlus通知失败:', pushplusResult);
                }
            } catch (error) {
                console.error('Error sending PushPlus notification:', error.message);
            }
        } else {
            console.error('PUSH_PLUS_KEY not defined in environment variables.');
        }

        // 检查是否有任何通知成功
        if (!success) {
            console.error('两种通知方式均失败。');
            return false;
        }
    },
});

可以修改 contentTemplate 的值来自定义通知的内容。将文件更新到 Github 之后 Vercel 会自动部署，等待部署完成就可以正常推送了。

附录

参考文献

文章封面

松雀&觉姨

VSCode 配置 C、C++ 编程运行环境

Mon, 02 Jun 2025 23:03:45 +0800

前言

前段时间从VSCode换到了字节的Trae，发现超级好用。于是就把Clion和VSCode都卸载了，但是Trae没法安装VSCode的C/C++插件，所以就研究了一下怎么在Trae中使用MSVC+CMake+Clang-Format来写C/C++代码

MSVC

前往 Visual Studio 下载页面，不要下载 VS2022，往下翻，在 用于Visual Studio的工具 中有个 Visual Studio 2022 生成工具，点击右侧的下载

下载完成后安装，在开始菜单中找到 Visual Studio Installer，点击打开可以先在 安装位置 处修改 MSVC 的安装位置

接着在 单个组件 中勾选 Windows 11 SDK 和 MSVC v143 - VS 2022 C++ x64/x86 生成工具(最新)：

最后点击右下角的安装

Cmake

见 Windows11上配置C、C++环境

Clang-Format

由于Trae使用的是open-vsx的镜像作为市场，其中没有 C/C++ 这个插件

所以想要格式化代码，需要使用 Clang-Format 这个插件
在下载插件前，需要先下载 Clang-Format

~~藏的真深🫠~~

最后安装 Clang-Format 插件

新建项目

新建一个文件夹，在其中创建 CMakeLists.txt 和 main.cpp 文件

# CMakeLists.txt

cmake_minimum_required(VERSION 4.0) # 该项目所需的CMake最低版本
project(test)                      # 项目名称

set(CMAKE_CXX_STANDARD 26)         # 使用的C++标准

add_executable(test main.cpp)      # 生成可执行文件: "test.exe"

// main.cpp

#include <iostream>
using namespace std;

int main() {
    cout << "Hello, World!" << endl;
    return 0;
}

用 vscode 或者 Trae 打开这个文件夹，此时 CMake 插件 应该会自动弹出 选择工具包的对话框，选择第一个64位的即可

之后下面会的输出栏中会输出 CMake 的输出，如果中文部分出现乱码，需要在设置中搜索 output，然后找到 Cmake: Output Log Encoding，将其修改为 utf-8
之后每次修改 CMakeLists.txt 后，CMake 插件 都会自动重新生成项目，输出栏中也会输出 CMake 的输出

运行项目

打开 main.cpp，点击 左下角 的 在终端窗口中启动所选目标

后记

这个文章只是记录一下环境配置的过程，平常不怎么写 C/C++ 代码，之前也写过一个配置 gcc 的文章，但是那个 gcc 版本太低了。

附录

参考文献

vscode 内置cmake output窗口乱码

文章封面

セルマ

Hugo Stack主题配置

Thu, 15 May 2025 14:41:00 +0800

前言

在上一篇文章中我们成功搭建了一个使用Stack主题的博客，并将其部署在了Vercel上。但此时网站中只有刚刚新建的文章，非常简陋，甚至头像也没有。
而Stack主题官网的文档不仅是英文的，而且给出的内容非常有限。
所以这里单独开一篇来说一下Stack主题的配置。

对于 static 和 assets 这两个文件夹，Hugo 在构建时会直接将 static 文件夹下的文件复制到网站的根目录下，而 assets 文件夹下的文件会被编译后得到一个链接。

例如，我的网站图标是 static/favicon.webp，在最终上线后，可以直接访问 https://www.trrw.tech/favicon.webp 来打开这个图片。而我首页的头像图片则是 assets/img/avatar.jpg，他的链接是 https://www.trrw.tech/img/avatar_hu_b50a61df1acbb930.jpg

但是在配置中，这两个文件夹下的文件使用方式是一样的，上个两个文件的使用方式分别是：favicon.webp 和 img/avatar.jpg。

网站基础信息

网站标题

打开 config/_default/config.toml (在新版中这个 config.toml 也可以重命名成 hugo.toml )

# config/_default/config.toml

baseURL = 'https://www.trrw.tech/'
languageCode = 'zh-cn'
title = "Trrrrw's Blog"

baseURL：就填你现在打开网站后在主页时的网址就行，如果是自定义域名就填你的域名。
languageCode：语言代码，这里填中文。(具体的语言代码可以看这里)
title：网站标题，显示在左侧栏头像下方以及浏览器标签栏中。

网站图标

将你要作为网站图标的图片重命名成 favicon.png，然后将其放在 static 文件夹中，覆盖掉原先的图片。配置文件在 config/_default/params.toml 中的 favicon 项。

1
2
3

# config/_default/params.toml

favicon = "favicon.png"

左侧边栏

头像

以 assets/img/avatar.jpg 为例，其配置在 config/_default/params.toml 中：

# config/_default/params.toml

[sidebar.avatar]
enabled = true
local = true
src = "img/avatar.jpg"

enabled：是否启用头像
local：是否使用本地图片，为 false 时需 src 需要填写图片链接而非本地图片路径
src：图片链接

副标题

# config/_default/params.toml

[sidebar]
emoji = "❤️"
subtitle = "Spending a lifetime to taste the love and pain."

emoji：左侧栏头像右下角可以显示一个 emoji
subtitle：副标题

社交图标

# config/_default/menu.toml

[[social]]
identifier = "github"
name = "GitHub"
url = "https://github.com/Trrrrw"
weight = 1

[social.params]
icon = "brand-github"

identifier：应该是给Hugo区分不同图标用的，不同图标的 identifier 不能相同
name：鼠标悬停在图标上时显示的文字
url：跳转链接
weight：显示顺序，数字越小越靠前
icon：图标名称，可以在这个网站上查找 https://tabler.io/icons

如果网站上没有你想要的图标，可以将svg文件放在 assets/icons 文件夹中，之后在 icon 中填写文件名即可：

# config/_default/menu.toml

[social.params]
icon = "brand-x"    # 对应 assets/icons/brand-x.svg

导航菜单

设置导航菜单只需要在你想要显示在左侧栏的页面(page)的 Front Matter 中添加 menu 项即可：

<!-- content/page/archives/index.md -->

+++
# ... existing code ...

[menu.main]
weight = 2
[menu.main.params]
icon = "archives"
+++

weight：显示顺序，数字越小越靠前

而首页则是 content/_index.md：

<!-- content/_index.md -->

+++
[menu.main]
name = "主页"
weight = -1 # 将首页置顶
[menu.main.params]
icon = "home"
+++

页面 Page

一般一个 blog 的 page 会有 首页 home、归档 archives、链接 links、关于 about、搜索 search

首页、归档

首页一般只需要配置上一节中提到的 menu 项即可
归档页面创建这个文件即可：content/page/archives/index.md

链接

这一部分可以参考 「Stack主题友链等页面美化」
下面是Stack默认的links页面实现方式

<!-- content/page/links/index.md -->

+++
# 基本信息
title = "链接"
layout = 'links'
slug = 'links'
toc = false
readingTime = false
license = false

# 友链
[[links]]
title = "友链1名称"
description = "简介"
website = "https://www.trrw.tech/"
image = "https://www.trrw.tech/favicon.webp"

[[links]]
title = "友链2名称"
description = "简介"
website = "https://www.trrw.tech/"
image = "https://www.trrw.tech/favicon.webp"

# 菜单栏设置
[menu.main]
weight = 3
[menu.main.params]
icon = "link"
+++

<!-- 下面是正常的 Markdown 这部分会显示在友链页面的顶部 -->
在此页面留言，或者给我发邮件。

> 名称：Trrrrw's Blog
> 
> 简介：Spending a lifetime to taste the love and pain.
> 
> 地址：https://www.trrw.tech/
> 
> 头像：https://www.trrw.tech/favicon.webp

关于、搜索

关于页面：content/page/about/index.md，就和文章一样写就行
搜索页面：content/page/search/index.md，一般不需要特殊配置

页脚

版权声明

# config/_default/params.toml

[footer]
since = 2022    # 起始年份

此时页脚会自动生成 © 起始年份 - 当前年份网站标题

自定义文本

# config/_default/params.toml

[footer]
since = 2022    # 起始年份
customText = '自定义内容'

可用于添加ICP备案号或自定义内容

分类

分类文件夹是 content/categories
在这个文件夹下创建以分类名称命名的文件夹，然后在这个文件夹下创建一个 _index.md 文件，内容如下：

+++
title = "教程"
image = "cover.webp"
+++

title：分类名称
image：分类页封面，非必须

# config/_default/params.toml

[comments]
enabled = true
provider = "waline"

# ... existing code...

[comments.waline]
serverURL = "waline.trrw.tech"
lang = "zh-CN"
visitor = ""
avatar = "/img/Akkarin.jpg"
emoji = ["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"]
requiredMeta = ["name", "email", "url"]
placeholder = "欢迎留下宝贵的评论！请留下正确的邮箱以便有回复时进行邮箱提醒，请勿发布任何与本文章无关的内容。"

[comments.waline.locale]
admin = "站长"

comments
- enabled：是否启用评论
- provider：评论提供商
comments.waline
- serverURL：评论服务器地址
- lang：语言
- visitor：访问者头像（这一项和下面一项暂时没确定有什么具体效果）
- avatar：评论者头像，这个值会直接写在#waline > div的avatar属性中，应该是访客的默认头像
- emoji：表情服务
- requiredMeta：必填项
- placeholder：评论框占位文本
comments.waline.locale
- admin：管理员在自己网站评论时在昵称旁显示的文本

具体 Waline 的配置可以看 Waline 文档

网站加速

如果你是将网站部署到自己服务器上，Hugo有一些资源可能会加载的比较慢，可以把这部分文件下载到本地

custom-font

先从custom-font.css下载下来CSS文件，放到assets\css\custom-font.css
打开这个CSS，里面会有6个woff2文件链接，把这六个链接下载下来放到static\fonts文件夹中
然后修改CSS文件中的链接，将https://fonts.gstatic.com/s/lato/v24替换为/fonts

然后创建并修改layouts\partials\footer\components\custom-font.html

{{ $customFont := resources.Get "css/custom-font.css" | minify | fingerprint }}
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "{{ $customFont.RelPermalink }}";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>

vibrant.min.js

从vibrant.min.js下载vibrant.min.js文件，放到static\js\vibrant.min.js
创建并修改data\external.yaml

Vibrant:
    - src: /js/vibrant.min.js
      integrity: sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM=
      type: script

PhotoSwipe:
    - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe.min.js
      integrity: sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=
      type: script
      defer: true

    - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js
      integrity: sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=
      type: script
      defer: true

    - src: https://unpkg.com/photoswipe@4.1.3/dist/default-skin/default-skin.css
      type: style

    - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe.css
      type: style

KaTeX:
    - src: https://unpkg.com/katex@0.16.9/dist/katex.min.css
      integrity: sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV
      type: style

    - src: https://unpkg.com/katex@0.16.9/dist/katex.min.js
      integrity: sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8
      type: script
      defer: true

    - src: https://unpkg.com/katex@0.16.9/dist/contrib/auto-render.min.js
      integrity: sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05
      type: script
      defer: true

Cactus:
    - src: https://latest.cactus.chat/cactus.js
      integrity:
      type: script
    - src: https://latest.cactus.chat/style.css
      integrity:
      type: style

附录

参考文献

文章封面

天才たちのてぇてぇ

使用Hugo+Stack搭建博客

Fri, 14 Mar 2025 19:26:51 +0800

前言

这是一篇使用Hugo+Stack搭建博客的教程，主要是为了记录自己搭建博客的过程，方便以后使用。

安装 Hugo

Hugo是由Go编写的快速现代静态网站生成器，旨在让网站创建变得有趣。

在使用Hugo时常常需要使用到 Git、Go和Dart Sass。

不过第三个Dart Sass没看懂怎么安装，不过也没有什么影响。

安装 Git

打开上面的Git官网之后，点击 Download for Windows 。之后选择 Standalone Installer 下的 64-bit Git for Windows Setup.
你会得到一个 Git-x.xx.x-64-bit.exe ，之后打开文件一路默认即可。

安装 Go

打开上面的Go官网之后，点击 Download 。

同样打开之后一路确认即可。

安装 Hugo

我这里使用的是 Win11，所以直接使用官方使用的安装方式：

`1`	`winget install Hugo.Hugo.Extended`

如果没有 winget ，可以去GitHub下载 exe文件。
在 Assets 里找到 hugo_extended_x.xxx.x_windows-amd64.zip 的文件下载，之后解压到文件夹中。之后将文件夹添加到环境变量中。

验证安装

打开终端，输入一下命令，如果出现以下内容，说明安装成功。

git -v
#输出：git version 2.48.1.windows.1
go version
#输出：go version go1.24.1 windows/amd64
hugo version
#输出：hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended windows/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio

Hugo的版本中一定要带有+extended。

创建网站

如果您是Windows用户：

不要使用命令提示符

不要使用 Windows PowerShell

请在 PowerShell 或 Linux 终端（如WSL或Git Bash）中运行这些命令

PowerShell 和 Windows PowerShell 是不同的应用程序。

上面是Hugo官方文档给出的提示，我这里使用的是Microsoft Store中的PowerShell7。

运行以下命令，运行时将其中的site-folder替换为你想要的文件夹名称。

1
2
3

hugo new site site-folder
cd site-folder
git init

安装 Stack 主题

紧接着上面的命令，在site-folder路径下运行以下命令：

`1`	`hugo mod init github.com/你的GitHub用户名/你用于存放网站的仓库名`

然后打开 Stack主题的模板仓库，克隆这个仓库或者其他什么办法，将其中的config文件夹复制到你的site-folder中，然后默认生成的那个hugo.toml就可以删除了。

确定config文件夹中的_default文件夹下的config.toml文件存在之后，运行以下命令：

`1`	`hugo server`

之后会出现以下内容：

`1`	`Web Server is available at http://localhost:xxxx/ (bind address 127.0.0.1)`

然后在浏览器中打开这个http://localhost:xxxx/，就可以看到你的网站了。你可以在这里实时看到你对网站的修改。(有些操作不会实时刷新，还是需要重新运行hugo server才能看到)

但是这个端口每次启动都会变，如果想要端口不变的话可以在命令后面加上-p 端口号，如果想要局域网内的设备也可以访问的话可以在命令后面加上--bind 0.0.0.0。
1
hugo server --bind 0.0.0.0 -p 8080

至于配置主题，回头单独开一个教程吧。~~有一说一，官网的文档是有点简陋的~~

编写博客

文件结构

文章的文件夹是放在content/post文件夹下的，文件结构如下：

content
└── post
    └── my-first-post
        ├── index.md
        ├── image1.png
        └── image2.png

可以使用一下命令创建一个新的文章：

`1`	`hugo new post/my-first-post/index.md`

Markdown

打开使用上面命令生成的index.md文件，会发现最上方自动生成了一个使用+++分隔的内容，这个内容就是 Front Matter（前置参数）。

+++围起来的内容格式是TOML，---围起来的内容格式是YAML。
这里使用TOML为例。

+++
date = '' # 文章创建时间，这个会自动生成
draft = true # 文章是否为草稿，true为草稿，此时你在网页中是看不到这篇文章的，需要将其设为false或者删除这个参数
title = '' # 文章标题
description = '' # 文章简介
image = '' # 文章封面图片
comments = true # 文章是否允许评论，true为允许，false为不允许
license = '' # 页面的许可证。如果设置为false，许可证部分将被隐。
math = false # 启用/禁用 KaTeX 渲染
toc = false # 显示/隐藏页面的目录
style = '' # Additional CSS styles for taxonomy term badge that appears in article page.
keywords = [] # 文章的关键字，用于SEO
readingTime = true # 显示/隐藏阅读时间
+++

部署

GitHub

新建 GitHub 仓库

打开 https://github.com/new ，在 Repository name 里填写你在安装 Stack 主题中使用的仓库名，然后点击 Create repository 。

将文件上传到 GitHub

在此之前，先在项目根目录下新建一个 .gitignore 文件，并在文件中添加

public
resources
.vscode/
.hugo_build.lock
desktop.ini

打开终端，在site-folder路径下运行以下命令：

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/你的GitHub用户名/你用于存放网站的仓库名.git
git push -u origin main

之后每次想要更新网站时，只需要运行以下命令：

1
2
3

git add .
git commit -m "更新内容，可修改"
git push origin main

Vercel

配置 Vercel 项目

首先打开 https://vercel.com/，注册或登录。进入 Overview 界面，点击右上角的 Add New… 里的 Project 。在左侧的 Import Git Repository 中登录 GitHub，选择刚刚创建的仓库，然后点击 Import。

之后在 Framework Preset 中选择 Hugo，然后点击下方的 Build and Output Settings，按照下图填写，然后点击 Deploy，等待一段时间后，就可以进入项目页面了。

# Build Command
hugo --gc --minify
# Install Command
yum install -y golang

等待 Status 变为 Ready 后，就可以点击上面 Domains 下的链接打开你的网站了。

自定义域名

可以看到，默认的域名是 xxxx.vercel.app，这个域名不仅不美观，更重要的是，他在国内基本处于无法访问的状态。

点击项目名上方的 Settings，然后点击 Domains -> Add，在 Add Domain 中输入你的域名。

我这里使用的域名解析是 Cloudflare，在添加域名后会自动跳转到 Cloudflare 的页面，点击同意后会自动在 DNS 解析中添加对应的解析。
而自动添加的解析的目标值依旧是不方便访问的cname.vercel-dns.com，这里手动将其修改成cname-china.vercel-dns.com。

等待一段时间后就可以使用自己的域名访问啦！

附录

参考文献

文章封面

Roommates

归档

Thu, 13 Mar 2025 10:40:26 +0800

关于

Thu, 13 Mar 2025 10:18:26 +0800

When good old friends are going away
Will you wish them to remember your name?
― HOYO-MiX, Da Capo

Windows11上配置C、C++环境

Wed, 06 Sep 2023 21:53:01 +0800

MinGW

MinGW: A native Windows port of the GNU Compiler Collection (GCC), with freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All of MinGW’s software will execute on the 64bit Windows platforms.

下载

MinGW - Minimalist GNU for Windows

安装

安装时选择好安装位置(不能有中文或空格)，其他默认即可。
安装完成后打开MinGW，勾选mingw32-base，mingw32-gcc-g++，分别是C/C++编译器。
点击Installation -> Apply Changes，在弹出窗口中点击Apply。
将MinGW添加到系统环境变量
在终端中输入gcc -v查看是否安装成功。
进入MinGW安装位置C:\MinGW\bin，将mingw32-make.exe复制一个出来改成make.exe方便使用。

到这里你可以使用gcc -o main main.c来编译C程序。

CMake

下载

CMake下载地址，选择正确的平台，一般是x64。

安装

双击运行下载的.msi文件。
选择第二个将CMake添加到系统环境变量，桌面快捷方式根据个人习惯选择。
选择安装位置。
在终端中输入cmake --version查看是否安装成功。

系统环境变量修改后要重启终端才能生效

使用CMake编译

创建一个test文件夹。

`1`	`mkdir test&&cd test`

在文件夹中新建main.c和CMakeLists.txt文件，并在其中分别写入以下内容。

// main.c
#include <stdio.h>
int main()
{
    printf("Hello World!\n");
    return 0;
}

# CMakeLists.txt
cmake_minimum_required(VERSION 3.27)
project(test)

# 这里的"C:/MinGW/bin"路径是你MinGW的路径
set(CMAKE_CXX_COMPILER "C:/MinGW/bin/g++.exe")

set(CMAKE_C_COMPILER "C:/MinGW/bin/gcc.exe")

add_executable(test main.c)

在test文件夹下创建build文件夹，并用CMake编译。

1
2
3

mkdir build&&cd build
cmake .. -G "MinGW Makefiles"
make

错误

The C compiler is not able to compile a simple test program.

运行：

`1`	`cmake .. -G "MinGW Makefiles"`

输出：

PS D:\Trrrrw\文档\C\test\build> cmake .. -G "MinGW Makefiles"
-- The C compiler identification is GNU 6.3.0
-- The CXX compiler identification is GNU 6.3.0
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - failed
-- Check for working C compiler: D:/MinGW/bin/gcc.exe
-- Check for working C compiler: D:/MinGW/bin/gcc.exe - broken
CMake Error at D:/Trrrrw/应用/命令行工具/cmake/share/cmake-3.27/Modules/CMakeTestCCompiler.cmake:67 (message):
  The C compiler

    "D:/MinGW/bin/gcc.exe"

  is not able to compile a simple test program.

  It fails with the following output:

    Change Dir: 'D:/Trrrrw/文档/C/test/build/CMakeFiles/CMakeScratch/TryCompile-qihtzh'

    Run Build Command(s): D:/Trrrrw/应用/命令行工具/cmake/bin/cmake.exe -E env VERBOSE=1 D:/MinGW/bin/mingw32-make.exe -f Makefile cmTC_22fc3/fast
    D:/MinGW/bin/mingw32-make.exe  -f CMakeFiles\cmTC_22fc3.dir\build.make CMakeFiles/cmTC_22fc3.dir/build
    mingw32-make.exe[1]: Entering directory 'D:/Trrrrw/文档/C/test/build/CMakeFiles/CMakeScratch/TryCompile-qihtzh'
    系统找不到指定的路径。
    CMakeFiles\cmTC_22fc3.dir\build.make:76: recipe for target 'CMakeFiles/cmTC_22fc3.dir/testCCompiler.c.obj' failed
    mingw32-make.exe[1]: *** [CMakeFiles/cmTC_22fc3.dir/testCCompiler.c.obj] Error 1
    mingw32-make.exe[1]: Leaving directory 'D:/Trrrrw/文档/C/test/build/CMakeFiles/CMakeScratch/TryCompile-qihtzh'
    Makefile:126: recipe for target 'cmTC_22fc3/fast' failed
    mingw32-make.exe: *** [cmTC_22fc3/fast] Error 2





  CMake will not be able to correctly generate this project.
Call Stack (most recent call first):
  CMakeLists.txt:2 (project)


-- Configuring incomplete, errors occurred!

解决： 重新安装cmake，使用安装包安装，不要下载压缩包手动添加环境变量

CMake Error: Target DependInfo.cmake file not found

运行：

make

输出：

CMake Error: Target DependInfo.cmake file not found
make[2]: *** No rule to make target 'D:/Trrrrw//C/test/main.c', needed by 'CMakeFiles/test.dir/main.c.obj'.  Stop.
CMakeFiles/Makefile2:82: recipe for target 'CMakeFiles/test.dir/all' failed
make[1]: *** [CMakeFiles/test.dir/all] Error 2
Makefile:90: recipe for target 'all' failed
make: *** [all] Error 2

解决： 文件夹路径不能有中文

参考文章： MinGW下载和安装教程

Minecraft搭建本地服务器

Tue, 13 Dec 2022 22:31:54 +0800

Java

Java 17(1.17及以上版本) https://www.oracle.com/java/technologies/downloads/
Java 8(1.17以下版本) https://www.java.com/en/download/

原版

server.jar https://mcversions.net/ 在Stable Releases栏选择需要的版本点击Download，选择Download Server Jar

下载完成后将server.jar文件放在一个文件夹里，右键文件夹空白区域选择在终端中打开(Win10可能需要按住Shift点击右键)。在终端中运行以下命令：

`1`	`java -Xms1024M -Xmx1024M -jar server.jar nogui`

此时会在文件夹中生成一些文件，并显示提示：

`1`	`You need to agree to the EULA in order to run the server. Go to eula.txt for more info.`

回到文件夹打开eula.txt，将false改为true:

`1`	`eula=true`

此时再回到终端运行这条命令：

`1`	`java -Xms1024M -Xmx1024M -jar server.jar nogui`

Windows防火墙可能会有提示，允许即可。当终端显示下面这行时说明服务器开启成功：

`1`	`Done (30.927s)! For help, type "help"`

在终端中向上找，找到这一行：

`1`	`Starting Minecraft server on *:25565`

其中冒号后面的数字就是你服务器运行的端口(可能会不一样)，此时服务器运行在：

`1`	`127.0.0.1:25565`

现在你本地打开一个Minecraft客户端(不要关闭终端)，就是平时自己玩的那个。进游戏点击多人游戏，选择添加服务器，服务器名随意，服务器地址填上面那个地址。此时是进不去服务器的，还要打开文件夹中的server.properties文件，修改以下选项：

`1`	`online-mode=false`

这个选项开启之后会验证正版账号，也就是说开启之后只有正版才能进去，所以需要关闭。其他选项的意思参考Minecraft Wiki

此时在终端输入stop关闭服务器(之后关闭服务器都这么关，这样它会保存你的存档)，再运行启动服务器的命令：

`1`	`java -Xms1024M -Xmx1024M -jar server.jar nogui`

这时客户端就能进服务器了🎉，但此时服务端还只是运行在你自己的电脑上，只有你自己和局域网内的电脑可以连接，接下来就是将本地端口共享给其他人。

Fabric版

从原版安装

到Fabric官网下载最新安装器，点击中间的Download for Windows
双击打开下载的文件，选择服务端，选择正确的游戏版本，加载器版本默认最新即可，安装位置选择原版服务器路径，点击安装，安装完成后可以关闭安装界面。
此时服务器的启动指令变为：

`1`	`java -Xms1024M -Xmx1024M -jar fabric-server-launch.jar nogui`

直接安装

下载对应版本的jar文件，放到空文件夹中，并在该路径下在终端中运行：

`1`	`java -Xmx2G -jar 下载的文件名 nogui`

同样需要调整eula.txt和server.properties文件。

Forge版

在官网下载正确版本的jar文件
双击运行，选择Insall server并选择一个空文件夹，点击确定
安装完成后目录：

folder/
├── libraries
├── run.bat
├── run.sh
├── user_jvm_args.txt

双击运行run.bat即可，如果想要只弹出命令行窗口的话，可以用记事本打开run.bat，并在java开头那一行最后添加空格nogui

`1`	`java @user_jvm_args.txt @libraries/net/minecraftforge/forge/1.20.1-47.0.1/win_args.txt %* nogui`

内网穿透

各种内网穿透工具官网都有详细的使用说明。

OPENFRP 官网：www.openfrp.net
OPENFRP 使用方法：docs.openfrp.net

参考文章： Minecraft Wiki/教程/架设服务器

ORB SLAM3稠密建图

Sun, 16 Oct 2022 15:16:01 +0800

依赖

Eigen

eigen.tuxfamily.org

wget https://gitlab.com/libeigen/eigen/-/archive/3.3.4/eigen-3.3.4.zip
unzip eigen-3.3.4.zip && cd eigen-3.3.4
mkdir build && cd build
cmake ..
sudo make install
sudo cp -r /usr/local/include/eigen3/Eigen /usr/local/include

Pangolin

Pangolin-Github

git clone https://github.com/stevenlovegrove/Pangolin
cd Pangolin/scripts/
rm -rf vcpkg/
git clone https://github.com/microsoft/vcpkg
cd ..
./scripts/install_prerequisites.sh --dry-run recommended
mkdir build && cd build
cmake ..
cmake --build .
sudo make install

错误1：Could NOT find OpenGL

`1`	`sudo apt install libgl1-mesa-dev`

错误2：Could not find GLEW

`1`	`sudo apt install libglew-dev`

OpenCV

opencv.org

安装依赖

1
2
3

sudo apt install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev
sudo apt install libgtk2.0-dev
sudo apt install pkg-config

安装OpenCV

sudo apt update && sudo apt install g++ unzip wget cmake
wget -O opencv.zip https://github.com/opencv/opencv/archive/refs/tags/4.4.0.zip
unzip opencv.zip
cd opencv-4.4.0/
mkdir build && cd build
cmake ..
cmake --build .
sudo make install

Boost

`1`	`sudo apt install libboost-all-dev`

安装PCL

依赖将以下内容保存为install_pcl_dependences.sh ，使用在ubuntu 命令行终端输入sudo sh install_pcl_dependences.sh 即可进行安装，在下载安装依赖库过程中会提示是否安装，都输入y。（好像没什么用）

 sudo apt-get update
 sudo apt-get install git build-essential linux-libc-dev
 sudo apt-get install cmake cmake-gui
 sudo apt-get install libusb-1.0-0-dev libusb-dev libudev-dev
 sudo apt-get install mpi-default-dev openmpi-bin openmpi-common  
 sudo apt-get install libflann1.8 libflann-dev
 sudo apt-get install libeigen3-dev
 sudo apt-get install libboost-all-dev
 sudo apt-get install libvtk5.10-qt4 libvtk5.10 libvtk5-dev
 sudo apt-get install libqhull* libgtest-dev
 sudo apt-get install freeglut3-dev pkg-config
 sudo apt-get install libxmu-dev libxi-dev
 sudo apt-get install mono-complete
 sudo apt-get install qt-sdk openjdk-8-jdk openjdk-8-jre

下载源码

## 下载
wget -O pcl.tar.gz https://github.com/PointCloudLibrary/pcl/archive/refs/tags/pcl-1.12.0.tar.gz
## 解压
tar -zxvf pcl.tar.gz

安装

cd pcl-pcl-1.12.0
mkdir release
cd release
cmake -DCMAKE_BUILD_TYPE=None -DCMAKE_INSTALL_PREFIX=/usr \ -DBUILD_GPU=ON-DBUILD_apps=ON -DBUILD_examples=ON \ -DCMAKE_INSTALL_PREFIX=/usr .. 
make
sudo make install

这个是用apt安装，但是好像版本不对

`1`	`sudo apt install libpcl-dev`

安装SLAM

git clone -b dense_map https://github.com/electech6/ORB_SLAM3_detailed_comments
cd ORB_SLAM3_detailed_comments
chmod +x build.sh
./build.sh  ## 如果报错可以试试打开这个文件把里面的指令一句一句手动执行，`make -j`换成`make`

报错1：

1
2
3

fatal error: openssl/md5.h: c
 #include <openssl/md5.h>
          ^~~~~~~~~~~~~~~

`1`	`sudo apt install libssl-dev`

未完待续……

ORB SLAM3运行自己的数据集

Sat, 15 Oct 2022 15:45:57 +0800

准备

在ORB_SLAM3\Examples\Monocular下新建myvideo.yaml和myvideo.cpp，视频文件也放到这。
在myvideo.yaml中添加内容：

%YAML:1.0

#--------------------------------------------------------------------------------------------
# Camera Parameters. Adjust them!
#--------------------------------------------------------------------------------------------
Camera.type: "PinHole"

# Camera calibration and distortion parameters (OpenCV) 
Camera.fx: 614.3472290039062
Camera.fy: 613.3615112304688
Camera.cx: 314.36767578125
Camera.cy: 239.8182830810547

Camera.k1: 0.0
Camera.k2: 0.0
Camera.p1: 0.0
Camera.p2: 0.0
Camera.k3: 0.0

# Camera frames per second 
Camera.fps: 30.0

# Color order of the images (0: BGR, 1: RGB. It is ignored if images are grayscale)
Camera.RGB: 1

# Camera resolution
Camera.width: 1920
Camera.height: 1080

#--------------------------------------------------------------------------------------------
# ORB Parameters
#--------------------------------------------------------------------------------------------

# ORB Extractor: Number of features per image
ORBextractor.nFeatures: 1000

# ORB Extractor: Scale factor between levels in the scale pyramid 	
ORBextractor.scaleFactor: 1.2

# ORB Extractor: Number of levels in the scale pyramid	
ORBextractor.nLevels: 8

# ORB Extractor: Fast threshold
# Image is divided in a grid. At each cell FAST are extracted imposing a minimum response.
# Firstly we impose iniThFAST. If no corners are detected we impose a lower value minThFAST
# You can lower these values if your images have low contrast			
ORBextractor.iniThFAST: 20
ORBextractor.minThFAST: 7

#--------------------------------------------------------------------------------------------
# Viewer Parameters
#--------------------------------------------------------------------------------------------
Viewer.KeyFrameSize: 0.05
Viewer.KeyFrameLineWidth: 5
Viewer.GraphLineWidth: 0.9
Viewer.PointSize:2
Viewer.CameraSize: 0.08
Viewer.CameraLineWidth: 3
Viewer.ViewpointX: 0
Viewer.ViewpointY: -0.7
Viewer.ViewpointZ: -1.8
Viewer.ViewpointF: 500

在myvideo.cpp中添加内容：

//
// Created by xiang on 11/29/17.
//

// 该文件将打开给定的视频文件，并将图像传递给ORB-SLAM2进行定位

// 需要opencv
#include <opencv2/opencv.hpp>

// ORB-SLAM的系统接口
#include "System.h"

#include <string>
#include <chrono>   // for time stamp
#include <iostream>

using namespace std;

// 参数文件与字典文件
// 如果你系统上的路径不同，请修改它
// 第二个路径建议用相对路径
string parameterFile = "./myvideo.yaml";
string vocFile = "../../Vocabulary/ORBvoc.txt";

// 视频文件，修改的话需要和你的视频名字一起改
string videoFile = "./video.mp4";

int main(int argc, char **argv) {

    // 声明 ORB-SLAM3 系统
    ORB_SLAM3::System SLAM(vocFile, parameterFile, ORB_SLAM3::System::MONOCULAR, true);

    // 获取视频图像
    cv::VideoCapture cap(videoFile);    // change to 1 if you want to use USB camera.

    // 记录系统时间
    auto start = chrono::system_clock::now();

    while (1) {
        cv::Mat frame;
        cap >> frame;   // 读取相机数据
        if ( frame.data == nullptr )
            break;

        // rescale because image is too large
        cv::Mat frame_resized;
        cv::resize(frame, frame_resized, cv::Size(640,480));

        auto now = chrono::system_clock::now();
        auto timestamp = chrono::duration_cast<chrono::milliseconds>(now - start);
        SLAM.TrackMonocular(frame_resized, double(timestamp.count())/1000.0);
        cv::waitKey(30);
    }

    SLAM.Shutdown();
    return 0;
}

修改ORB_SLAM3的CMakeLists.txt，在最后添加：

1
2

add_executable(myvideo Examples/Monocular/myvideo.cpp)
target_link_libraries(myvideo ${PROJECT_NAME})

运行

运行ORB_SLAM3

1
2
3

cd ORB_SLAM3
chmod +x build.sh
./build.sh

不知道为什么myvideo文件生成在了ORB_SLAM3\Examples_old\Stereo-Inertial下，复制到ORB_SLAM3\Examples\Monocular下就行之后再运行它：

1
2

cp Examples_old/Stereo-Inertial/myvideo Examples/Monocular/myvideo
./myvideo

效果

参考文章：用自己的视频跑ORB_SLAM3（密码：eu2t）

在WSL2中运行ORB SLAM3

Thu, 06 Oct 2022 21:09:26 +0800

仓库链接 UZ-SLAMLab/ORB_SLAM3

系统

我前面弄了Apollo所以想再整个新系统来弄SLAM，也可以直接在原系统中进行。

在wsl2-distro-manager的release中下载最新版的压缩包。
打开就可以复制已有的WSL。

依赖

Pangolin

Pangolin-Github

git clone https://github.com/stevenlovegrove/Pangolin
cd Pangolin/scripts/
rm -rf vcpkg/
git clone https://github.com/microsoft/vcpkg
cd ..
./scripts/install_prerequisites.sh --dry-run recommended
mkdir build && cd build
cmake ..
cmake --build .
sudo make install

OpenCV

opencv.org

安装依赖

1
2
3

sudo apt install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev
sudo apt install libgtk2.0-dev
sudo apt install pkg-config

安装OpenCV

sudo apt update && sudo apt install g++ unzip wget cmake
wget -O opencv.zip https://github.com/opencv/opencv/archive/refs/tags/4.4.0.zip
unzip opencv.zip
cd opencv-4.4.0/
mkdir build && cd build
cmake ..
cmake --build .
sudo make install

安装好依赖的话在5.3中应该就不会报错

Eigen3

eigen.tuxfamily.org

wget https://gitlab.com/libeigen/eigen/-/archive/3.1.1/eigen-3.1.1.zip
unzip eigen-3.1.1.zip && cd eigen-3.1.1
mkdir build && cd build
cmake ..
sudo make install
sudo cp -r /usr/local/include/eigen3/Eigen /usr/local/include

不知道为什么这个不用cmake --build .

安装

Clone the repository:

`1`	`git clone https://github.com/UZ-SLAMLab/ORB_SLAM3.git ORB_SLAM3`

1
2
3

cd ORB_SLAM3
chmod +x build.sh
./build.sh

报错1

1
2

/home/trrrrw/orb-slam3/ORB_SLAM3/Thirdparty/DBoW2/DBoW2/BowVector.h:17:10: fatal error: boost/serialization/serialization.hpp: No such file or directory
 #include <boost/serialization/serialization.hpp>

`1`	`sudo apt install libboost-dev`

报错2

1
2

/home/trrrrw/orb-slam3/ORB_SLAM3/src/System.cc:26:10: fatal error: openssl/md5.h: No such file or directory
 #include <openssl/md5.h>

`1`	`sudo apt install libssl-dev`

报错3

`1`	`/usr/bin/ld: cannot find -lboost_serialization`

安装boost

`1`	`sudo apt install libboost-all-dev`

测试数据集

下载数据集 https://projects.asl.ethz.ch/datasets/doku.php?id=kmavvisualinertialdatasets#downloads 下载ASL格式放在最外面新建文件夹 Examples
解压出mav0文件夹

在ORB_SLAM3下新建文件夹dataset/MH01，将mav0文件夹放在这

mkdir dataset && cd dataset
mkdir MH01 && cd MH01
## 把mav0文件夹复制到MH01里就行
cp -r ../../../Examples/mav0/ ./

运行
1 2

cd ../../Examples ./Monocular/mono_euroc ../Vocabulary/ORBvoc.txt ./Monocular/EuRoC.yaml ../dataset/MH01 ./Monocular/EuRoC_TimeStamps/MH01.txt
这样应该是没有窗口的在 Examples/Monocular/mono_euroc.cc 第 83 行附近，将函数的最后一个参数更改为 true ORB_SLAM3::System SLAM(argv[1],argv[2],ORB_SLAM3::System::MONOCULAR, true); 默认情况下为 false，改为true 用WSL这样还是没有窗口🤷‍♂️

WSL2

安装xfce4
1

sudo apt install xfce4

重新编译会报错（如果2.2.1没安装依赖的话）

  what():  OpenCV(4.4.0) /home/trrrrw/orb-slam3/opencv-4.4.0/modules/highgui/src/window.cpp:634: error: (-2:Unspecified error) The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support. If you are on Ubuntu or Debian, install libgtk2.0-dev and pkg-config, then re-run cmake or configure script in function 'cvNamedWindow'

删除OpenCV后安装libgtk2.0-dev and pkg-config后重新编译安装

1
2

cd opencv-4.4.0/build
sudo make uninstall

安装依赖

1
2
3

sudo apt install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev
sudo apt install libgtk2.0-dev
sudo apt install pkg-config

编译安装

cd build
cmake ..
cmake --build .
sudo make install

再执行4.4 成功👍

基于Hexo搭建blog网站

Mon, 04 Jul 2022 22:24:42 +0800

Node.js

介绍

下载

官网

安装

CSDN

只需要完成第一步即可，第二步修改全局模块路径和缓存路径可以不做，npm包一般不会很大。

Git

下载

官网

使用

安装完成后右键菜单会有这个

常用命令

cd "路径"

打开路径
git clone 链接

克隆仓库，链接为仓库链接。克隆下来的位置是上面那个命令打开的路径。

新建GitHub仓库

https://github.com/new 填写仓库名blog，其他默认。

安装Hexo

`1`	`npm install -g hexo-cli`

如果之后打开项目后不能用hexo命令可以再重新安装hexo

新建站点

1
2
3

hexo init <folder>
cd <folder>
npm install

要把<folder>改为自己的文件夹名，<>也要去掉

新建完成后指定文件夹的目录：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml中的一些参数

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
keywords	网站的关键词。支持多个关键词。
author	您的名字
language	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

更多详细说明移步官方文档

⭐最主要的是url和root，如果不自定义域名的话，url为https://<username>.github.io/<repositories>/，root为/<repositories>/。如果设置不正确的话可能会导致网页没有css样式。

参数名后的冒号后面要有一个空格

安装主题

一般主题都会有使用教程，这里只展示了使用主题文件安装的过程。

从主题站找到自己喜欢的主题，点击标题进入对应GitHub仓库下载
将主题文件放到一个单独文件夹<ThemeFolder>，并将改文件夹放在themes文件夹里
在站点的_config.yml文件中theme的内容更改为<ThemeFolder>即可

一个主题可能会有以下的结构：

.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

_config.yml 主题的配置文件。和 Hexo 配置文件不是同一个文件，要注意区分。

如需更换主题，只需要将新主题的文件夹放到正确位置，再将站点的_config.yml文件中theme的内容更改为新的主题名即可

生成静态文件

`1`	`hexo g #hexo generate的缩写`

网页需要的文件都在public文件夹下，将该文件夹下文件上传到GitHub仓库即可。

启动服务

`1`	`hexo s #hexo server的缩写`

用这个可以先在本地预览你的网页
如果不能用的话先安装，--save是把npm包安装在这个项目中并记录在package.json中

`1`	`npm install hexo-server --save`

新建文章

`1`	`hexo new [layout] <title>`

同样[]和<>也要去掉

布局（Layout）	路径	描述
post	source/_posts	文章
page	source	页面
draft	source/_drafts	草稿

部署到GitHub

打开网站的_config.yml 在文件底部找到以下内容并补全：

deploy:
  type: git
  repo: https://github.com/Trrrrw/blog ## 你的仓库链接
  branch: main

然后在blog文件夹中打开终端输入命令npm install hexo-deployer-git --save安装部署插件。之后输入命令：

1
2
3

hexo clean  #清除已生成的静态文件
hexo g      #hexo generate 生成静态文件
hexo d      #hexo deploy 生成静态文件并部署到仓库

如果在部署的时候出现 Failed to connect to github.com port之类的错误，在终端中执行git config --global --unset http.proxy和git config --global --unset https.proxy应该就行了。完成之后要去GitHub仓库里找到Settings -> Pages -> Build and deployment -> Branch，设置成main分支，路径为/(root)。点save保存之后就能在https://username.github.io/repo/ 里看到你的网页。

自定义域名

购买域名

例：example.com

域名解析

在电脑上执行

`1`	`ping username.github.io`

得到

1
2

正在 Ping username.github.io [IP地址] 具有 32 字节的数据:
...

记住上面的IP地址

在购买的域名控制台找到域名列表-域名解析
添加解析

主机记录	记录类型	解析路线	记录值	TTL
@	AAAA	默认	IPV6地址	10 分钟
@	A	默认	IPV4地址	10 分钟
@	CNAME	默认	username.github.io	10 分钟
www	CNAME	默认	username.github.io	10 分钟

前两个行用有一个即可，但好像都没什么用。还会和第三行冲突。可以只有后面两行，第四行的www可以换成自己喜欢的、符合规范的前缀，可以设成blog来说明这个网站是一个blog网站。也可以只有第三行，这样就是一个裸域名比较好记忆。如果修改了的话下面两项设置要把www改成对应的前缀或者删除。

绑定GitHub Page

在GitHub仓库中点击Settings->Pages
在Custom domain下填写www.example.com
点Save保存
等待GitHub检查完DNS勾选下面的Enforce HTTPS

修改Hexo的_config.yml

在Hexo的_config.yml中修改url和root

1
2

url: https://www.example.com
root: /

再重新部署一次即可

参考文章：官方文档 Markdown教程

链接

Mon, 01 Jan 0001 00:00:00 +0000

在此页面留言，或者给我发邮件。

名称：Trrrrw’s Blog

简介：Spending a lifetime to taste the love and pain

地址：https://blog.trrw.cn/

头像：https://blog.trrw.cn/favicon.webp

搜索

Mon, 01 Jan 0001 00:00:00 +0000