tech on Nan0inPsyLog

git && github指令速学速记

Mon, 25 Aug 2025 14:58:00 +0000

基础须知

什么是版本管理和版本管理系统

git是一个VCS（Version Control System），用于管理修改了的code, 支持不同的对于一个项目的版本管理，使其更容易与他人合作并实时记录一系列操作。当然文件文档也可以。有了git, 就可以进行版本回溯、diff等操作，了解到一个项目的构建历史。当然也可以实现合并不同的分支、或者创建在不同的分支操作等等

安装

windows直接去github release下载，会有一系列操作告知的

linux在cli中根据不同的发行版进行拉取安装即可

分支 commit 等基础命令

GIT仓库保存目录下文件的快照，并希望提交记录尽可能轻量

条件允许的情况下，它会将当前版本与仓库中的上一个版本进行对比，并把所有的差异打包到一起作为一个提交记录。

git会保存提交的历史记录

这也是为什么大多数提交记录的上面都有 parent 节点的原因

在本地commit存储和读取

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


git add . #将文件添加进跟踪列表
git add -u #只添加已跟踪文件的修改和删除
git add -A #一次性添加所有修改 = git add . && git add -u
git add <file name> #添加单个文件


git commit --allow-empty #允许未经过改变的提交（为了git log的跟踪）到本地git进行存储
git commit # 会基于parent进行一次节点的commit
git commit -m "some explanations"

git rm <file name> #删除文件，但是本地暂存

Git Branch

“我想基于这个提交以及它所有的 parent 提交进行新的工作。”

Git的分支非常轻量，并且早建分支！多用分支！，分支会简单指向某个提交记录。

即使创建再多的分支也不会造成储存或内存上的开销，

branch和commit结合起来，便可以协同工作。

信息的管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


git branch #列出分支
git checkout -b <name> #新分支并跳转过去
git branch -r <name> #查看远程分支
git checkout other_branch #切换分支，在主分支下实现不同分支拉取转换，这样才能使commit对应不同分支

git switch -c <新分支名> <想切换 拉取的分支> #在2.23版本引入，会开始逐渐取代checkout
git switch - #撤销操作

git log #查看目前位置我们每次的记录

git diff #查看区别
git status #也是查看区别
git tag #查看所有可以跳转的版本分支等

信息的合并和rebase

我要把这两个 parent 节点本身及它们所有的祖先都包含到一个分支

一般来说新建一个分支，在其上开发某个新功能，开发完成后再合并回主线。

图一

图二

git merge bugFix后,main包含了所有对代码库的修改，之后我们也可以再次移动bugFix分支, 将其merge到main上，此时所有的分支都会颜色相同，包含所有的代码修改

gir rebase为第二种办法，会取出一系列提交记录后复制到另外部分，图二便是在bugFix后rebase的结果，注意原本的提交记录会继续保留

1
2
3
4
5
6
7
8
9


git checkout -b bugFix
git commit
git checkout main
git commit #这样就是两个分支了
git chekout bugFix
git rebase main #现在bugFix的功能分支也基于main来并行工作了


git rebase <upstream> <branch>

GIT特性

HEAD

HEAD是对当前分支的符号引用，总是指向分支上最近一次提交记录。通常指向分支名，提交的时候修改分支状态，我们也可以通过HEAD以可见的样子看到状态。简单来说就是指向当前节点的

通常用来表示当前工作区基于哪个版本进行开发，也可以理解为当前开发所在分支的最后一次提交

1

cat .git/HEAD # 查看head

分离的 HEAD

分离的 HEAD 就是让其指向了某个具体的提交记录而不是分支名。在命令执行之前的状态如下所示：

HEAD -> main -> C1

HEAD 指向 main， main 指向 C1。而如果我们check out C1了，则HEAD->C1

注意这里checkout 的地方是commit的标签，用于修改指向commit

记住！head的分离是基于commit的，而切换分支是不会分离的

那么分离头指针操作，适合的场景都有哪些呢？
如果我们想基于某次提交做一些新的尝试，而且不确定这些代码要不要合入正式分支的时候，可以使用这种方式。在这上面的修改不会影响其他分支，也不用创建新的分支

相对引用

git log用来查看提交对应的哈希

哈希值在真实的 Git 世界中也会更长（译者注：基于 SHA-1，共 40 位）git通常根据前几位就可以识别了

相对引用则非常给力，我们从一个易于记忆的地方开始计算

1
2
3
4


^ #向上移动一个提交记录
~<num> #向上移动多个提交记录
main^ #即main的父节点 两个^^则是第二个父节点
main~<num> #多次后退，~不指定数字的时候跟^作用类似

我们也可以用HEAD作为参照物

1
2


git checkout xx
git checkout HEAD^ git checkout HEAD^ ...

这样就可以不停向上了

你会想，会不会^后面也可以跟数字呢？可以的兄弟，可以的

1

HEAD^<num>^<num>

实际上如果我们在HEAD上有多个分支，那么^后面跟的数字就是决定去哪一个分支，而不是步数

强制修改分支位置

1

git branch -f main HEAD^3 #将分支强制指向HEAD的第三级parent提交

撤销变更

git reset 把分支记录回退几个提交记录实现撤销变更，原来指向的提交记录会变的像没有提交一样

reset对远程分支无效

git revert 则是用于远程分支的撤销
- 其会产生一次commit专门用来记录撤销

注意谨慎使用git reset –hard而彻底删除工作区和暂存区的修改，执行前务必确认没有需要保留的未提交内容。这时候就可以

git reflog 备份操作记录
- 误删也可以找到历史哈希值恢复：git reset –hard <哈希>

快捷的整理提交记录

git cherry-pick <commit1> <commit2> 可以方便快捷的把提交复制到HEAD下，形成新的提交分支链，我们可以用其来整理main分支

1
2


git checkout <目标分支>
git cherry-pic <commit hash1><commit hash2>/<branch>

要在心里牢记 cherry-pick 可以将提交树上任何地方的提交记录取过来追加到 HEAD 上

由此可以有操作

1
2
3
4


git checkout <分支>
git commit --amend #进行一定修改
git checkout <分支> #切换回去
git cherry-pick <需要的>

来进行少量提交和整理

交互式rebase

使用带--interactive的rebase命令，简写为-1

git rebase -i <commit>

其会打开一个UI界面列出被复制到目标分支的备选提交记录以及一系列的哈希、提交说明，可以确定顺序、选择的commit等

这个ui编辑器可以选为vim neovim nano等等

tag

给commit设定一个永远指向其的锚点tag

1
2
3
4
5
6
7


git tag #查看所有标签
git tag <tag> <commit hash>
git tag -d <tag> #删除本地标签

git push origin <tag> or --tags #推送标签/推送所有标签到远程
git checkout <tag> #此时头指针会分离，无法commit
git describe <ref> #ref可以是任何能被 Git 识别成提交记录的引用

describe输出<tag>_<numcommits>_g<hash>

tag是离ref 最近的标签
numcommits是表示ref和tag相差多少提交记录

如下

远程仓库

当我们从远程clone的时候，例如在main分支，实际上是origin/<分支>即origin，这是远程分支的规范命名

<remote name>/<branch name>，通常就是oringin

进行设置

根据不同的系统进行安装后，我们使用git config进行设置

1
2
3
4


git config --global user.name "your name" # your name
git config --global user.email "your email" # your email
git config --global core.editor vim # your favourite editor
git config --global color.ui true

进行基础设置

当我们在别的项目中进行初始化，则需要

git init，实现将一个已存在本地的项目变为一个git仓库或是初始化一个空仓库，也是我们经常使用的一个指令（没有初始化的仓库有很多指令是用不了的）

配置公钥ssh key

现在常用ed25519和rsa。目录在~/.ssh

1
2


ssh-keygen -t ed25519 -C "your_email@example.com" #生成ssh key
cat ~/.ssh/id_ed25519.pub #出现的公钥复制到github

然后到github添加ssh key后就可以将远程切换成ssh格式

1
2


git remote set-url origin git@github.com:nan0in/NJUPA_nan0in.git
ssh -T git@github.com #测试

然后就可以愉快的Push了

与远程进行交互、进行提交

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


git remote #查看远程仓库名字
git remote -v #查看当前远程仓库地址
git remote add origin https://github.com/example/repo.git # 添加远程仓库
git remote set-url origin https://new-url.git # 修改远程仓库链接，通常在拉下来其他仓库后后进行修改

git push <远程仓库名称> <分支名称> #提交到远程 一半是
git pull <远程仓库名称> <分支名称> #拉取远程最新仓库 

git fetch #直接从远程仓库更新数据并更新本地的远程分支指针
git fetch oringin #拉取origin所有分支
git fetch origin main #拉取main

注意！fetch不会更新本地的main分支，可以理解为只是对远程的数据进行了下载

可以通过下面方式合并到main，git pull则自动实现了fetch和merge的操作

1
2


git fetch
git merge o/main

pull requests?(PR)

远程服务器拒绝直接推送(push)提交到main, 因为策略配置要求 pull requests 来提交更新.

发生偏离了怎么办？

如果远程的分支和本地原本拉下来的分支出现了偏差，我们需要在push前进行rebase或者merge创建好新的合并分支。或者如上文进行git pull同步

1
2
3


git fetch
git rebase o/main #or git merge o/main
git push

这样便可以将我们的工作移动到最新的提交记录下

也可以直接

1
2


git pull --rebase #直接git pull也可以
git push

通常和远程工作的时候我们就会通过上面的方式同步到远程main下然后推送，这样远程的main始终是集成的开发分支

但是rebase的话不会保留原来的分支树，这时候就可以使用merge开始建立准备push到main的链后还保留原来的树

1
2
3


git merge branch1
git merge branch2
git push

注意事项

提交

注意规范，

commit的时候注意自己“干了什么”
一个提交只做一件事（如 “修复登录按钮样式”“新增用户列表接口”），避免一次提交包含多个不相关的修改。这样后续回滚或查看历史时更精准。
❌ 不好：git commit -m “修改了一堆东西"
✅ 推荐：git commit -m “fix: 修复移动端登录按钮点击无响应问题"
提交信息要规范
用简洁明了的语言描述 “做了什么”，最好遵循约定式提交（Conventional Commits）：
- feat: 新增xxx功能（新功能）
- fix: 修复xxxbug（bug 修复）
- docs: 更新接口文档（文档修改）
- refactor: 重构用户模块代码（代码重构，不影响功能）
  避免模糊描述（如 “改了点东西”“更新”）。
提交前检查修改内容
提交前用 git status 确认要提交的文件，用 git diff 检查具体修改内容，避免误提交敏感信息（如密码、密钥）或无关文件（如日志、临时文件）。

分支

名称尽量有意义：

feature/user-login（新功能：用户登录）
bugfix/payment-error（bug 修复：支付错误）
hotfix/security-vulnerability（紧急修复：安全漏洞）
避免 dev1、test （除非你在本地测试自己的仓库）等模糊名称。

主分支保持稳定：

main/master 分支应始终保持可部署状态，开发新功能时从主分支创建新分支，完成后通过 PR/MR 合并，

.gitingore

一开始以为是正则，结果不是，流汗了

直接写名字就可以

*. 名称通配符
 递归匹配，例如src//*.test.txt匹配任意目录下的test
/ 放开头仅忽略根目录下文件
!取消定义的忽略规则

一般会把dotfiles 环境变量 log cache等写入

一些特性

对跟踪的文件无效——即git add 或git commit过的文件，修改ignore也改不了
- git rm --cached <file name> #从commit暂存区移除保留本地文件
优先级是相对当前目录的，当然根目录就是整个仓库生效

参考链接

git-github,roadmap

www.youtube.com/watch?v=2ReR1YJrNOM

learngitbranching.js.org/?demo=&locale=zh_CN

t0fv404

dn11接入和癔语

Sun, 13 Jul 2025 22:30:00 +0000

按照愿景，每个自治域都会分配到 172.16.x.0/24 这样的一个网段，因此，DN11 目前设计上最多接纳 255 个主要节点接入。而在接入前注意向管理人进行申请才可进行接入，我们的接入是将自己的子网进行并入，因此也要注意设备保护和配置防火墙，以防老毕登

工具

Wireguard（wg-quick-op )用于建立隧道
Bird3用于进行AS的路由（aur库）

arch linux下编译

提供的release无法使用（结构问题），手动编译一下。如果是debian系列linux应该没有问题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


git clone https://github.com/dn-11/wg-quick-op.git
cd wg-quick-op
cat go.mod
go mod download
go build -o wg-quick-op

# 调整go版本
❯ sudo pacman -S curl git mercurial make binutils bison gcc base-devel --needed
bash < <(curl -sSL https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)
gvm install go1.21.7
gvm use go1.21.7 --default
# 防止兼容性问题

设置peer文件，配置Wireguard

我们需要根据对方所给文件进行peer文件的一个写，格式在BGP组网，用于建立双方的peer隧道，然后我们在/etc/wireguard/下创建peer文件，运行wg-quick-op up your_interface_name，wg会自动帮你创建好虚拟网口并执行PostUp，并根据分配到的地址和配置文件中写好的端口给到ip, 最后与peer端握手连接。之后进行ping <对方的内网ip>校验

ifconfig进行网口查看
wg show查看握手情况

配置bird，进行BGP

配置/etc/bird.conf然后birdc c进行连接测试
BGP组网链接同上，注意配置的时候% 后面的接口名称和peer文件要一致, 之后birdc s p进行查看即可,established 就是配成功接入dn11了;IDLE一般就是配置出问题了，注意排查

你也可以birdc show protocol all 接口查看更为详细的情况

需要注意的是wg-quick-op是基于wg-quick在go开发的，而许多服务器机子上使用的仍然是wg-quick服务，因此在peer失效的时候有时候使用wg-quick down <interface>再重新启动

服务器上搭建

使用的是Debian 12.0 64bit

在策略组添加udp策略打开51820端口，然后在服务器中开放

sudo ncat -lu 51820

连接成功

bird2 3官方文档

后续的癔语

如果你的 AS 里有不少子网，这一切还只是折腾 BGP 的开始，在后面还有 BGP Large Community ，BGP confederation ，RR 等内容。

实际上刚好做南大PA做累了，近来有时间还要加大pwn的练习量为之后做准备。
可以通过traceroute进行一个数据包路由的大调查

像一个短的发往中心的包会直接通过柏喵的路径。而我们还有一种更方便的方法就是通过birdc然后show route查看路由

而这也会告诉我们在一个网段的数据包是通过哪个接口发送，并到达哪个AS网关。而放大来看的话网络也就是

AS——>不同圈子的自治域
ISP ——>网络提供商和管理员然后我们的数据从路由器出发，在到达每个ISP的边界后发往不同的ISP边界进行接受和转移，而根据数据包发送的 target host 最后到达指定AS中

Git&&obsidian短代码推送hugo博客

Fri, 04 Apr 2025 00:17:00 +0000

前情提要

由于非常猪鼻的我之前一直是 vscode写博客加winSCP手动传输数据到服务器，博客推送和撰写效率十分低下，文章少还好说，现在一套流程走下来麻烦的我想扇自己一巴掌，所以搞了一套更好更方便的自动化流程来爱护我的hugo博客和身心健康，并且学习了一下obsidian的文章笔记撰写使用，下面给大家介绍一下方法

搭配脚本实现git自动化推送

服务器端

ssh密钥配置

Windows端
通常保存在C:\Users\用户名\.ssh中，没有的话自行创建 ssh-keygen -t rsa -b 4096并提取出id_rsa.pub文件中的公钥然后我们到服务器端然后测试一下 ssh -T 用户名@xxx.xxx.xxx.xxx，如果出现Welcome to GitLab, 用户名!或其他类似的成功信息，则说明连接成功

Linux端
操作类似，
先查看是否存在公钥ls ~/.ssh/，没有的话使用ssh-keygen -t rsa -b 4096生成公钥，其余于上述类似

创建和配置git用户

创建git用户 sudo useradd -m git
配置git用户
- vim /etc/passwd 在其中找到git用户，修改/bin/bash为/usr/bin/git-shell(即你git-shell的位置)
- sudo passwd git 设置git用户密码，如有需要

创建git仓库

创建仓库文件夹

1
2


mkdir /home/repo
cd /home/repo

初始化一个裸仓库

1
2


# nan0in27_site.git为仓库名称，尽量按你博客来修改比较好
git init --bare nan0in27_site.git

创建git钩子

1
2


cd nan0in27_site.git/hooks
vim post-update

我输入的内容如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


#!/bin/bash
# 设置源仓库和目标目录
REPO_DIR="/home/repo/nan0in27_site.git"
PUBLIC_DIR="/home/public"

# 记录日志
echo "Post-update hook triggered at $(date)" >> /home/repo/post-update.log

# 拉取最新的远程内容
git -C $REPO_DIR fetch

# 将 Git 仓库中的内容拉取到目标目录
GIT_WORK_TREE=$PUBLIC_DIR git checkout -f

# 记录日志
echo "Files copied to $PUBLIC_DIR" >> /home/repo/post-update.log

权限和文件修改

给post-update等文件添加执行权限

1
2
3


chmod +x post-update
sudo chmod 644 /home/repo/post-update.log
sudo chmod -R 755 /home/public # 这个根据你的实际情况修改，这个是我的博客根目录

拥有者修改

1
2


chown -R git:git nan0in27_site.git
chown -R git:git /home/public

用户端

类似github的操作，在我们想要放仓库的地方打开git bash，然后输入

1

git clone git@服务器IP地址:/home/repo/nan0in27_site.git

脚本实现推送自动化

我在根目录下创建了一个deploy.sh文件，内容如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


#!/bin/bash

# 设置博客生成目录和目标仓库路径
HUGO_PUBLIC_DIR="/d/blog/nan0in_blog/nan0in27/public"
REPO_DIR="/d/blog/nan0in_blog/nan0in27/nan0in27_site"

# 生成 Hugo 静态文件
cd /d/blog/nan0in_blog/nan0in27 # 确保你在 Hugo 项目目录
hugo

# 复制 public 目录中的文件到 nan0in27_site 仓库
echo "Copying files from Hugo public directory to nan0in27_site..."
cp -r $HUGO_PUBLIC_DIR/* $REPO_DIR/

# 进入 nan0in27_site 仓库
cd $REPO_DIR

# 确保你在正确的 Git 仓库目录下
if [ -d ".git" ]; then
 # 添加所有更改的文件到 Git
 git add .

 # 提交更改
 git commit -m "Update site content"

 # 推送到远程仓库
 git push origin master
else
 echo "Error: Not a Git repository. Please check your repository configuration."
 exit 1
fi

然后我们就可以愉快的在git bash里使用./deploy.sh实现博客推送自动化了

在arch linux则做略微修改即可，先添加个权限git config --global --add safe.directory you_position/nan0in27_site见 archlinux_deploy.sh:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


#!/bin/zsh

#设置目录 目标仓库
HUGO_PUBLIC_DIR="/mnt/formal/blog/nan0in_blog/nan0in27/public"
REPO_DIR="/mnt/formal/blog/nan0in_blog/nan0in27/nan0in27_site"

cd /mnt/formal/blog/nan0in_blog/nan0in27/
hugo

# 复制 public 目录中的文件到nan0in27_site
# echo "successfully copy the files from Hugo public directory to nan0in27_site🐕"
cp -r $HUGO_PUBLIC_DIR/* $REPO_DIR/

cd $REPO_DIR

if [ -d ".git" ]; then
 git add .

 git commit -m "Update blog content"

 git push origin master

else
 echo "Error:maybe it's not a Git repository...Check your repository"
 exit 1
fi

Obsidian便利自动化博客撰写

暂时懒得写，之后会传

使用了以上插件

在启用了dataview的情况下在主界面创建速查表格：

1
2
3
4
5
6
7
8
9


Table without id
 title as 文章标题,
 categories as 分类,
 tags as 标签,
 date as 创作时间,
 file.link as 链接
from "content/post"
where file.name != this.file.name
sort file.mtime desc

关于模板

我在博客根目录下创建一个@Extras文件夹，并把模板文件夹放入其中来进行模板调用，在设置添加Insert template的快捷键后指定好文件夹如折叠块模板，在模板文件夹下创建shortcodes.md 内容

1
2
3


{\{< details >}}
$CURSOR$
{\{< /details >}}

之后只要在想要折叠的部分调用出来即可

反斜杠记得去除，防止直接调用折叠效果用来转义的

short codes

NOTICE(已弃用)

即Githubc markdown形式的shortcodes
原方法来自koala-一些短代码 notice部分

我们在obsidian下创建@Extras，然后存放我们的模板shortcodes

之后就可以通过ctrl+D调出模板进行使用了

你好。

chat

原方法来自koala-一些短代码 chat部分创建chat模板

内容如上（记得去掉转义符号）

John Doe 2023-09-12 14:30

这是左边的消息内容。

2023-09-12 14:45 Alice

这是右边的消息内容，测试长长长长长长长长长长长长长长长长长长长长长长长长度。

Hugo Stack 主題加入 Admonition 提示框樣式

参考ty_wu 的博客进行修改

網站

node

摘要

abstract

范例

example

问题

question

引用

quote

提示

tip

警告

warning

失败

failure

讯息

info

成功

success

bug

修复目录折叠和Admonition方法重复

发现点击展开Admonition块后只要一滚动就会直接折叠回去，原因出自目录折叠中的方法与Admonition载入的方法发生了冲突目录折叠效果（此为obsidian跳转)
原本的initTocHide会将所有带open类的元素全部在焦点转移的时候折叠回去，而Admonition的打开效果就是命名为了open，因此修改initTocHide

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


<script>
 function initTocHide() {
 // 判断是否存在文章目录
 let toc = document.querySelector(".widget--toc");
 if (!toc) {
 return;
 }
 // 监听滚动
 window.addEventListener('scroll', function() {
 // 修复点：只清除 toc 容器内部的 open 类，而不是 document 全局的
 // 原代码：let openUl = document.querySelectorAll(".open");
 let openUl = toc.querySelectorAll(".open");

 if (openUl.length > 0) {
 openUl.forEach((ul) => {
 ul.classList.remove("open")
 })
 }

 // 获取active-class
 let currentLi = toc.querySelector(".active-class");
 if (!currentLi) {
 return
 }
 // 展示子ul
 if (currentLi.children.length > 1) {
 currentLi.children[1].classList.add("open")
 }
 // 展示父ul
 let ul = currentLi.parentElement;
 do {
 ul.classList.add("open");
 ul = ul.parentElement.parentElement
 } while (ul !== undefined && (ul.localName === 'ul' || ul.localName === 'ol'))
 });
 }
 initTocHide()
</script>

各种修软件工具error

Thu, 03 Apr 2025 01:01:00 +0000

misc

volatility3

plugins 出现kernel error

运行volatility3的时候出现了这种匪夷所思的错误

1
2


Unsatisfied requirement plugins.Info.kernel.layer_name:
Unsatisfied requirement plugins.Info.kernel.symbol_table_name:

首先确定你的plugins和symbols都齐全，注意压缩包放在对应文件夹下就可
然后根据这篇文章可以重新开一个cache文件夹，确定有读写权限，运行时输入python vol.py -vvv --cache-path .\your_new_directory\ -f .\file.mem windows.info.Info来重置即可

Arch

dingtalk无法使用fcitx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


gcc -D_GNU_SOURCE -DHAVE_CONFIG_H -Wall -Wno-pointer-sign -I. -I.. -I../gelfx -DSBINDIR='"/usr/local/sbin"' -Wall -Wno-pointer-sign -march=x86-64 -mtune=generic -O2 -pipe -fno-plt -fexceptions -Wp,-D_FORTIFY_SOURCE=3 -Wformat -Werror=format-security -fstack-clash-protection -fcf-protection -fno-omit-frame-pointer -mno-omit-leaf-frame-pointer -g -ffile-prefix-map=/home/liut/.cache/paru/clone/execstack/src=/usr/src/debug/execstack -flto=auto -MT execstack.o -MD -MP -MF .deps/execstack.Tpo -c -o execstack.o execstack.c
execstack.c:18:10: 致命错误：config.h：没有那个文件或目录
 18 | #include <config.h>
 | ^~~~~~~~~~
编译中断。
make: *** [Makefile:554：execstack.o] 错误 1
==> 错误： 在 build() 中发生一个错误。
 正在放弃...
错误： 未能构建 'execstack-20130503-9':
错误： 无法构建 dingtalk-bin-7.6.45.5041701-1，未满足以下依赖关系：execstack
错误： 未能构建的软件包：execstack-20130503-9 dingtalk-bin-7.6.45.5041701-1

匪夷所思的安装错误，改为extra-x86_64-build运行后有一个干净的x86_64 chroot环境以供我们手动安装

1

sudo pacman -U dingtalk-bin-*.pkg.tar.zst

中文输入法无法使用(fcitx5+wayland)
在dingtalk.sh中修改（全局fcitx5不支持导致的）修改/home/nan0in27/.cache/yay/dingtalk-bin下的dingtalk.sh:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


#!/bin/bash -e
# try wayland and fallback to xcb in case that it may support xcb some day.

#######################3
# 设置输入法模块（fcitx 或 ibus）
case "${XMODIFIERS}" in
"@im=ibus")
 : ${QT_IM_MODULE:=ibus}
 ;;
*)
 : ${QT_IM_MODULE:=fcitx}
 ;;
esac
export QT_IM_MODULE
##########################3

export QT_QPA_PLATFORM="wayland;xcb"
export QT_AUTO_SCREEN_SCALE_FACTOR=1

cd /opt/dingtalk/release
./com.alibabainc.dingtalk

然后创建软链接

1
2
3


mkdir -p ~/.local/bin
ln -sf ~/.cache/yay/dingtalk-bin/dingtalk.sh ~/.local/bin/dingtalk
which dingtalk

这样就没问题了,shell和krunner都会运行dingtalk.sh，可以输入中文

nvidia_drm模块无法加载而启动不了nvidia驱动

在一次滚动更新中我发现nvidia启动不了! 但是如果我在终端启动一下nvidia_drm就可以正常使用了，但是我不知道原因，所以临时启一个服务作为解决方案：

1

sudo vim /etc/systemed/system/nvidia-drm-modeset.service

然后写入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


[Unit]
 Description=Load NVIDIA DRM with modeset
Before=display-manager.service # 确保在 SDDM 之前运行
Requires=systemd-modules-load.service
After=multi-user.target
[Service]
Type=oneshot
ExecStart=/usr/bin/modprobe nvidia_drm modeset=1
RemainAfterExit=yes
[Install]
WantedBy=multi-user.target

设置服务启用：

1
2


sudo systemctl enable nvidia-drm-modeset.service # 开机自启
sudo systemctl start nvidia-drm-modeset.service # 立即运行

这只是个临时解决方案！！

neovide奇怪的底部栏丢失

在一次打开neovide的时候我突然发现我的底部栏没了？这导致我的搜索也变得很诡异

但是如果窗口化又可以正常显示，高度过高就会直接消失，我怀疑是浮动面板的问题，网上也没搜到类似情况，所以翻了下文档，有一个禁用窗口模糊的效果（实则就是改变了窗口自动修改比例的效果，在init.lua里加上后面这行以后就可以了vim.g.neovide_floating_blur = false -- 禁用浮动窗口模糊
题外话：neovide的字体设置最好要比你终端原本设置的大一点或者一样显示效果才会不容易有问题出现

后续发现如果替换过字体的话也要重新修改一下字体大小来进行底部栏重新加载

Hugo灯箱实现图片放

Sat, 15 Feb 2025 17:17:00 +0000

之前博客的优化文章太长了，之后都分开来写了

显示效果

右上角依次为：放大图片、图片播放（如有多张）、批量查看图片和关闭

实现方法

1. 修改`config.toml`或者`hugo.yaml`

我使用的是stack主题，配置文件为hugo.yaml，在params中添加

1
2


[params]
 fancybox: true

2. 创建并修改`render-image.html`

路径为/layouts/_default/_markup/render-image.html 内容为

1
2
3
4
5
6
7


{{if .Page.Site.Params.fancybox }}
<div class="post-img-view">
<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</a>
</div>
{{ end }}

3. 导入和添加内容

在footer.html中添加

1
2
3
4
5


{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{ end }}

来启用灯箱即可

patchelf的正确使用姿势🤗

Tue, 04 Feb 2025 00:00:00 +0000

言

做任何pwn题之前都应该先替换libc和ld从而减少本地和远程不一样的情况——来自老登的指责，借此学习了一下patchelf

安装软件

glibc-all-in-one

1
2
3


git clone https://github.com/matrix1001/glibc-all-in-one.git
cd glibc-all-in-one
chmod a+x build download extract

进入后运行

1

sudo python update_list

之后cat list可以看到ubuntu包名了

./download 2.35-0ubuntu3.1_amd64等进行安装

例 moectf-Got it

复现完exp后发现本地

但是远程可以打通于是根据上面的情况，我们需要patchelf一下以保证环境相同

patch

找到ld（解释器）文件和libc.so.6（链接库）文件的目录后我们在pwn题目文件目录下执行命令

1
2
3
4
5
6
7
8


patchelf --set-interpreter 你的文件目录/ld-linux-x86-64.so.2 ./pwn
patchelf --add-needed 你的文件目录/libc.so.6 ./pwn
#后来发现最好的命令、
patchelf --set-rpath 你的文件目录/2.23-0ubuntu3_amd64(即你的patchelf ubuntu版本) ./pwn
#根据自己状况设置环境

#还可以替换libc方便调试
patchelf --replace-needed libc.so.6 你的目录glibc-all-in-one/libs/2.23-0ubuntu11.3_amd64/libc-2.23.so pwn

最后运行exp

已经可以打通了！

WSL配置网络

Sun, 19 Jan 2025 12:22:00 +0000

1. 开放windows对WSL2防火墙

WSL2本质上基本是个虚拟机，因此要想让windows的防火墙开放WSL2的端口，需要在windows的防火墙中添加一个入站规则，本地端口为WSL2的端口，远程端口为“任意”，然后点击“允许连接”即可。管理员powershell打开，输入

1

New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow

2. 自己学会使用魔法

不能多说, 但是这都不会你就等着wsl爆然后痛苦得了

3. 设置端口

调为全局代理模式，然后查看端口

然后我们在WSL中进行如下配置

1

alias setss='export https_proxy="http://${hostip}:7897";export http_proxy="http://${hostip}:7897";export all_proxy="socks5://${hostip}:7897";'

根据自己的端口进行相应的i修改

4.WSL2配置

使用脚本进行配置编辑

1
2
3


#这里用一个hostip保存自己的IP
#当然如果你已经牢记了自己的IP，那你可以直接写IP
export hostip=$(cat /etc/resolv.conf |grep -oP '(?<=nameserver\ ).*')

然后粘贴

1
2
3


export hostip=$(cat /etc/resolv.conf |grep -oP '(?<=nameserver\ ).*')
alias setss='export https_proxy="http://${hostip}:7897";export http_proxy="http://${hostip}:7897";export all_proxy="socks5://${hostip}:7897";'
alias unsetss='unset all_proxy'

因为脚本之影响当前终端，所以我们需要将脚本保存到环境变量中，可以是bashrc，如果你使用的是zsh，那么你需要将脚本保存到.zshrc中。

软件设置

如果有TNU模式，打开TNU模式就可以使用了(更耗流量一些)

ENJOY

hugo博客建站记录(持续更新)

Thu, 26 Dec 2024 00:00:00 +0000

hugo搭建+腾讯云轻量应用服务器托管博客

hugo安装

在chocolatey官网下载chocolatey管理包命令行中安装hugo： choco install hugo -confirm
安装hugo-extended（扩展版本）： choco install hugo-extended -confirm hugo version检查：hugo v0.139.0-dacef0df92a9a20072b4eaa42003e1a63ace8f41+extended windows/amd64 BuildDate=2024-11-18T16:17:45Z VendorInfo=gohugoio

部署到github上

关于这一块小白们都可以参加网上的流程，很多都比较详细，我就不赘述了，简单讲两句 github创建自己的用户名.GitHub.io仓库并clone到本地的blog文件夹中命令行中输入 hugo new site nan0in27创建文件夹 cd nan0in27 cd themes 从官网下载主题stack 然后开始配置

选做

删除content中的rich content(因为有外网视频会导致预览过慢）
下载完后将stack中examplesite文件夹中的content和hugo.yaml复制到根目录，删除原来的hugo.taml（本质上就是一个东西）
语言编码（国际化）.md文件：Chinese-test文件夹中有index.zh-cn.md(中文部分）英文编号：xx.en.md
命令行中输入hugo new content post/firstBlog/index.md创建新博客
config设置：

进入hugo.yaml文档进行设置：（这里只列出一些注意点）

go语言的年月日表达非常奇葩（吐槽），到官方stack的文档中去查看操作
在运行example网站时发现头像，进入文档后修改：

1
2
3
4


avatar:
 enabled: true
 local: true
 src: img/avatar.png

然后我们发现img在assets文件夹中，我们仿照着在根目录assets中创建img文件夹放入我们的头像图片，读取时会直接覆盖掉theme原文件中的空白头像

关于评论：

评论的disqus我个人觉得不太符合我的使用习惯，于是改成了utterances：

utterances

1 介绍 utterances 🔮 是利用Github仓库的 Issue 来实现，完全免费 2 使用方法 (1) 前往【utterances app】，安装app，选择要安装的仓库，建议直接安装在博客静态页面的仓库，其他仓库也可以 (2) 在hugo的配置文件 hugo.yaml 中找到 comments->provider参数，填入utterances (3) 找到comments->utterances参数，修改 repo ，填上对应的仓库就好{你的github名}/{仓库名} 建议把评论邮箱通知给关掉，否则评论一次就发一次邮件，头疼 😓 一些设置方式来自https://www.xalaok.top/post/stack-modify/文章名：Hugo-theme-Stack 魔改美化：

Waline评论

官方文档
参考博客【建站技术】为你的 Hugo 博客加入评论功能 (Waline)
你的vercal部署网址/ui进行评论管理，初始要账户注册，为管理员【索引】定制自己的 Waline 评论系统 | 半方池水半方田

创建 LeanCloud 数据库

首先登录 LeanCloud ，并创建应用。
之后进入应用的 设置 - 应用凭证，并记录 AppID、AppKey、MasterKey 供后续使用。

将Waline导向你的国内域名以实现加速

首先你得有一个已经申请了的国内域名和相关服务，我的就是nan0in27.cn，在腾讯云上通过添加二级域名并且CNAME解析指向原本的vercel服务就可以修改原本vercel的waline地址了

在你的vercel服务中导向二级域名即可 Qmsg酱实现QQ通知

主题配置

基础配置

零碎玩意+菜单栏圆角+滚动条+加载进度条+双栏+卡片缩放动画+布局+右侧导航栏动画+首页欢迎条幅然后就是巴拉巴拉修改一些小部分的文档记得跟着stack的官方文档来，我在加链接图标的时候发现官方提供的tabler icons才是最好用的在github创建用户名.GitHub.io 然后按着指令将我们的public文件夹git上去，blog就部署好了

接下来要实现自动部署(github page仅限)
参考这位佬的文章
或者看他的视频

友链、归档多列显示

修改assets/scss/custom.scss文件(不存在则自行创建)，引入以下css样式代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


@media (min-width: 1024px) {
 .article-list--compact {
 display: grid;
 // 目前是两列，如需三列，则后面再加一个1fr，以此类推
 grid-template-columns: 1fr 1fr;
 background: none;
 box-shadow: none;
 gap: 1rem;

 article {
 background: var(--card-background);
 border: none;
 box-shadow: var(--shadow-l2);
 margin-bottom: 8px;
 margin-right: 8px;
 border-radius: 16px;
 }
 }
}

然后做完初始的准备觉得差不多就hugo server生成你网页的public文件夹即可

引入动态粒子背景(particles.js)

官方github文档

配置页面 , 切记将

detect_on调整为window
下载配置文件，以及 particles.js 所需要的js文件
- 这里我们需要两个文件，一个是particlesjs-config.json文件，一个是particles.min.js文件
  
  通过这两个下载

将两个文件移动到你的assets/background下(没有就创建), 然后在layouts/partials/footer/custom.html中引入如下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<div id="particles-js"></div>

<!-- 使用 Hugo 资源获取功能 -->
<script src="{{ (resources.Get "background/particles.min.js").Permalink }}"></script>
<script>
 particlesJS.load('particles-js', '{{ (resources.Get "background/particlesjs-config_1.json").Permalink }}', function() {
 console.log('particles.js loaded - callback');
 });
</script>

<style>
 #particles-js {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: -1;
 }
</style>

刷新hugo缓存后重新运行hugo server就可以看到了在这里提供我的配置文件

归档页添加标签云

主页的标签云太碍眼就去掉了，然后添加到了归档界面中在layouts/_default/archives.html(没有就创建一个)的</header>中添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "tags" -}}
{{- $terms := $taxonomy.Pages -}}
{{ if $terms }}
<section class="widget tagCloud">
<h2 class="section-title">{{ $taxonomy.Title }}</h2>

 <div class="tagCloud-tags">
 {{ if ne (len $.Site.Taxonomies.tags) 0 }}
 {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
 {{ $tagCount := len $taxonomy.Pages }}
 <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" class="tagCloud-tags">
 {{ $name }}<span class="tagCloud-count">{{ $tagCount }}</span>
 </a>
 {{ end }}
 {{ end }}
 </div>
<section>
{{ end }}

在归档列表里面显示文章副标题/简介

在assets/scss/partials/article.scss中找到.article-list--compact，并修改

1
2
3
4
5
6
7
8
9


// 显示文章副标题
 .article-subtitle {
 margin-top: -5px;
 font-size: 1.5rem;

 @include respond(md) {
 font-size: 1.6rem;
 }
 }

最后在layouts/partials/article-list/compact.html 添加在article-title后

1
2
3
4
5
6


<!-- 显示文章副标题 -->
{{ with .Params.description }}
<div class="article-subtitle">
 {{ . }}
</div>
{{ end }}

修改字体

首先我们在自己的主博客文件夹的layouts/partials/head下创建一个 custom.html用来进行渲染，然后我们需要一个有字体的scss文件进行渲染，这里取nan0in27\themes\hugo-theme-stack\assets\scss中的variables.scss，这个就是渲染字体的地方
custom.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<style>
 :root {
 --article-font-family: "Noto Serif SC", var(--base-font-family);
 }
</style>
<script> // 正文自重300，标题字重700
 (function () {
 const customFont = document.createElement('link');
 customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";

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

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

variables.scss调整--zh-font-family和--base-font-family的顺序

1
2


--zh-font-family: "Noto Serif SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
--base-font-family: "Noto Serif SC", var(--sys-font-family), var(--zh-font-family), sans-serif;

还可参考链接进行修改

本地字体

创建/assets/font文件夹，将字体.ttf格式放入

提示

不建议使用.ttf字体，占据空间过大，建议使用.woff并在nginx服务开启时提前启动下载

然后再/layouts/partials/footer/custom.html中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<style>
 @font-face {
 font-family: '字体名';
 src: url({{ (resources.Get "font/字体文件名").Permalink }}) format('truetype');
 }

 :root {
 --base-font-family: '字体名';
 --code-font-family: '字体名';
 }
</style>

即可修改字体，code对应代码块base对应其他文字

背景颜色修改及其他颜色调整

背景颜色在assetes/scss/variables.scss下，修改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


&[data-scheme="dark"] {
 --body-background: #222831; //修改这里即可
 --accent-color: #ecf0f1;
 --accent-color-darker: #bdc3c7;
 --accent-color-text: #000;
 --body-text-color: rgba(255, 255, 255, 0.7);
 --scrollbar-thumb: hsl(0, 0%, 40%);
 --scrollbar-track: var(--body-background);
 }
 &[data-scheme="dark"] {
 --card-background: #393E46; //这里也要相应的修改
 --card-background-selected: rgba(255, 255, 255, 0.16);
 --card-text-color-main: rgba(255, 255, 255, 0.9);
 --card-text-color-secondary: rgba(255, 255, 255, 0.7);
 --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
 --card-separator-color: rgba(255, 255, 255, 0.12);
 }

然后相对应的改一下代码块，在assetes/scss/custom.scss中在适当位置插入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64


.highlight {
 max-width: 102% !important;
 background-color: var(--pre-background-color);
 padding: var(--card-padding);
 position: relative;
 border-radius: 20px;
 margin-left: -7px !important;
 margin-right: -12px;
 box-shadow: var(--shadow-l1) !important;
 border: 1px solid rgba(110, 68, 255, 0.2); // 新增：主色调边框
 overflow: hidden; // 确保圆角裁剪内容

 // 发光效果（可选）
 &::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(90deg,
 rgba(110, 68, 255, 0.4) 0%,
 rgba(255, 255, 255, 0.1) 50%,
 rgba(110, 68, 255, 0.4) 100%);
 }

 &:hover {
 .copyCodeButton {
 opacity: 1;
 }
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
 0 0 0 1px rgba(110, 68, 255, 0.3) !important; // 悬停增强阴影
 }

 // keep Codeblocks LTR
 [dir="rtl"] & {
 direction: ltr;
 }

 pre {
 margin: initial;
 padding: 0;
 margin: 0;
 width: auto;
 background: transparent !important;
 overflow-x: auto;

 code {
 display: block;
 padding: 0.5em 0;
 font-family: var(--code-font-family);
 font-size: 0.9em;
 line-height: 1.6;
 color: var(--pre-text-color);

 // 代码行号样式（如果有行号）
 .ln {
 margin-right: 1em;
 color: rgba(255, 255, 255, 0.3);
 user-select: none;
 }
 }
 }
}

为你的博客导入加载动画

参考这篇文章这里给出网站和模板
my gadget 在layouts/partials/head/custom.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<div class="loading">
 <!-- html内容 -->
</div>

<style>
 .loading {
 position: fixed;
 display: flex;
 justify-content: center;
 align-items: center;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 99;
 background-color: #f5f5fa;
 }

 /* css内容 */
</style>

<script>
 function initLoading() {
 let loading = document.querySelector(".loading");
 document.addEventListener('DOMContentLoaded', function() {
 // 本地页面加载速度快，可自行使用setTimeout()来进行延迟，体验加载动画效果
 loading.style.display = "none";
 });
 }

 initLoading();
</script>

可调样式和参数（在css元素里）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46



{
 /* 整体修改元素大小(大于1放大, 小于1缩小) */
 zoom: 1.0;

 /* 开始动画播放 */
 animation-play-state: running;

 /* 暂停动画播放 */
 animation-play-state: paused;

 /* 元素居中(flex布局) */
 display: flex;
 justify-content: center;
 align-items: center;

 /* 元素隐藏 */
 display: none;

 /* 定义动画 */
 @keyframes 动画名 {
 0% {}
 进度% {}
 100% {}
 }

 /* 执行动画 */
 animation: 动画名 时间;
}

/**
 * CSS动画常用参数
 */
{
 /* 不透明度 */
 opacity: 1;

 /* 放大缩小 */
 transform: scale(1);

 /* 旋转 */
 transform: rotate(360deg);

 /* 平移(水平, 垂直) */
 transform: translate(-100%, 0);
}

为你的博客导入小组件

在主页面导入了一个gif，先存到static/pics文件夹下，然后在/layouts/partials/widget下创建一个lain.gif，写入

1

<img src="/pics/lain.gif" alt="Lain GIF" loop autoplay style="width:80%; max-width:300px;"> %% 自行调整 %%

最后在hugo.yaml中

1
2
3
4


widgets:
 homepage:
 - type: search
 - type: lain_gif

导入即可

为你的博客添加博客文章浏览数和字数

参考博客文章浏览数

至于文章字数
在/layouts/partials/article/components/details.html中的article-time类中添加

1
2
3
4
5
6


 <div>
 | {{ partial "helper/icon" "pencil" }}
 <time class="article-time--counts">
 {{ .WordCount }} 字
 </time>
 </div>

最后总的html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


<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>

 <footer class="article-time">
 <div>
 {{ partial "helper/icon" "date" }}
 <time class="article-time--published">
 {{- .Date.Format (or .Site.Params.dateFormat.published "2006-01-02") -}}
 </time>
 </div>

 <div>
 | {{ partial "helper/icon" "pencil" }}
 <time class="article-time--counts">
 {{ .WordCount }} 字
 </time>
 </div>

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

 <div id="viewCount">
 | {{ partial "helper/icon" "eye" }}
 <time class="article-time--reader">
 <span id="vercount_value_page_pv">loading...</span> 次
 </time>
 </div>
 </footer>

 {{ 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>

nginx部署到服务器

最重量级的一步，出了不知多少错，国内网站没备案记得要去备案！！！大概会画一个月左右流程

关于服务器等前置准备

本人于2024双十一购买了腾讯云的轻量应用服务器，2核2G4M带宽和40G系统盘作为个人博客来说够用了。然后购买了一个自己的域名(com很贵别想了)，一定想想好，备案了后续后悔就很麻烦了。

讯息

2026.2.22 现在使用github学生包附赠福利的digitalocean服务器(200额度可以买到2核2G+1 Intel CPU使用一年半左右的服务器)

安装nginx

sudo apt install nginx 设置开机启动nginx sudo systemctl enable nginx 启动nginx sudo systemctl start nginx 查看状态 sudo systemctl status nginx 然后你就可以在浏览器中输入你的服务器公网ip地址，看到nginx的欢迎页面了。

打开DNS解析(如果事先备案的话)

首先要记得在控制台打开你的dns解析(备案的时候关了之后就忘了开了哎哟)

配置https所需ssl证书

在腾讯云下载ssl证书，然后上传到服务器上的nginx文件夹中。注意上传*_bundle.crt*和.key两个文件即可，winscp直接拖过去，如下图

防火墙设置

打开你滴80和443端口

也可以参考这篇文章在linux服务器端输入指令：

1
2
3


sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

并且确保你的端口没有被占用

1
2


sudo netstat -tulpn | grep :80
sudo netstat -tulpn | grep :443 #没有返回任何消息就没占用

传输文件

在home下创立public文件夹，然后终端里调到博客目录下，但是不要进入public文件夹，因为public后面的/表示public文件夹里面的内容

WINSCP是一款很好用的软件，你可以直接把文件拖过去(爽)

配置nginx的nginx.conf文件‼️‼️

定位到/etc/nginx目录下，然后输入sudo vim nginx.conf/开始配置文件这里要比较耐心，不懂的地方多搜多找答案(如果我可以解决你也可以来私我)，附上我的配置文件(仅供参考，多余的信息删去了)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93


user root;

worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;

include /etc/nginx/modules-enabled/*.conf;

events {
 worker_connections 768;
}

http {
 log_format main '$remote_addr - $remote_user [$time_local] "$request" '
 '$status $body_bytes_sent "$http_referer" '
 '"$http_user_agent" "$http_x_forwarded_for"';

 access_log /var/log/nginx/access.log main;

 sendfile on;
 tcp_nopush on;
 tcp_nodelay on;
 keepalive_timeout 65;
 types_hash_max_size 2048;

 include /etc/nginx/mime.types;
 default_type application/octet-stream;
 include /etc/nginx/conf.d/*.conf;

 # 配置 http
 server {
 # 要配置的第二个地方，80访问端口
 listen 80 default_server;
 listen [::]:80 default_server;

 # 要配置的第三个地方，域名
 server_name www.nan0in27.cn nan0in27.cn;
 return 301 https://$host$request_uri;

 }

 # 配置 https
 server {
 # 要配置的第七个地方
 listen 443 ssl;
 http2 on;
 server_name nan0in27.cn www.nan0in27.cn;
 root /home/blog/public;

 # 要配置的第八个地方
 ssl_certificate /etc/nginx/nan0in27.cn_bundle.crt;
 ssl_certificate_key /etc/nginx/nan0in27.cn.key;
 # 要配置的第九个地方，可以按照我的写法
 ssl_session_timeout 10m;
 ssl_protocols TLSv1.2 TLSv1.3;
 ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
 ssl_prefer_server_ciphers off;

 gzip on;
 gzip_vary on;
 gzip_types text/plain text/css application/javascript application/json image/svg+xml application/x-font-ttf font/opentype font/woff2;
 gzip_min_length 1024;
 gzip_comp_level 5;

 location ~* \.(jpg|jpeg|png|gif|ico|webp|svg|css|js|woff2|ttf)$ {
 root /home/blog/public;
 expires 30d;
 add_header Cache-Control "public, no-transform";

 add_header 'Access-Control-Allow-Origin' '*' always;
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
 add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

 }
 # 要配置的第十个地方
 location / {
 root /home/blog/public;
 index index.html index.htm;

 # 添加 CORS 响应头
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
 }

 error_page 404 /404.html;
 location = /404.html {
 root /home/blog/public;
 }

 include /etc/nginx/default.d/*.conf;
 }
}

端口 80 用于配置 http 服务，端口 443 用于配置 https 服务哦对了，可以安装含有剪贴板集成的vim-gtk，这样方便你进行输入，在终端输入 sudo apt-get install vim-gtk3 然后查看 `vim –version | grep clipboard 如果clipboard前面有+，那你就成功了

提示

由于配置了CDN，回源全部导向到nan0in27.cn

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103


user root;

worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;

include /etc/nginx/modules-enabled/*.conf;

events {
 worker_connections 768;
}

http {
 log_format main '$remote_addr - $remote_user [$time_local] "$request" '
 '$status $body_bytes_sent "$http_referer" '
 '"$http_user_agent" "$http_x_forwarded_for"';

 access_log /var/log/nginx/access.log main;

 sendfile on;
 tcp_nopush on;
 tcp_nodelay on;
 keepalive_timeout 65;
 types_hash_max_size 2048;

 include /etc/nginx/mime.types;
 default_type application/octet-stream;
 include /etc/nginx/conf.d/*.conf;

 # 配置 http
 server {
 # 要配置的第二个地方，80访问端口
 listen 80 default_server;
 listen [::]:80 default_server;

 # 要配置的第三个地方，域名
 server_name www.nan0in27.cn nan0in27.cn;
 return 301 https://nan0in27.cn$request_uri;

 }

 server {
 listen 443 ssl;
 http2 on;
 server_name www.nan0in27.cn;

 ssl_certificate /etc/nginx/nan0in27.cn_bundle.crt;
 ssl_certificate_key /etc/nginx/nan0in27.cn.key;
 return 301 https://nan0in27.cn$request_uri;
 }

 # 配置 https
 server {
 # 要配置的第七个地方
 listen 443 ssl;
 http2 on;
 server_name nan0in27.cn;
 root /home/blog/public;

 # 要配置的第八个地方
 ssl_certificate /etc/nginx/nan0in27.cn_bundle.crt;
 ssl_certificate_key /etc/nginx/nan0in27.cn.key;
 # 要配置的第九个地方，可以按照我的写法
 ssl_session_timeout 10m;
 ssl_protocols TLSv1.2 TLSv1.3;
 ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
 ssl_prefer_server_ciphers off;

 gzip on;
 gzip_vary on;
 gzip_types text/plain text/css application/javascript application/json image/svg+xml application/x-font-ttf font/opentype font/woff2;
 gzip_min_length 1024;
 gzip_comp_level 5;

 location ~* \.(jpg|jpeg|png|gif|ico|webp|svg|css|js|woff2|ttf)$ {
 root /home/blog/public;
 expires 30d;
 add_header Cache-Control "public, no-transform";

 add_header 'Access-Control-Allow-Origin' '*' always;
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
 add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

 }
 # 要配置的第十个地方
 location / {
 root /home/blog/public;
 index index.html index.htm;

 # 添加 CORS 响应头
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
 }

 error_page 404 /404.html;
 location = /404.html {
 root /home/blog/public;
 }

 include /etc/nginx/default.d/*.conf;
 }
}

最后的运行

重新加载配置文件:

1

sudo nginx -s reload

检查 nginx 服务的运行情况

1

sudo systemctl status nginx

有问题一定要去看access.log和error.log分析错误！！这样才能提高解决效率重启 nginx 服务

1

sudo systemctl restart nginx

这时候你再去看状态就能看到一系列process的情况了通过域名访问网站，如果出现博客首页，说明配置成功了，如果域名还没有备案成功，用ip地址访问也可以跳转到博客首页

后续

文章本地写好，public文件上传即可，如果我做自动部署了也会同步更新文章的。

部署到digitalocean后的CDN和回源配置

腾讯云的cdn配置对于个人博客来说足以，价格也很便宜，并且也恰好是部署在新加坡的服务器，具体配置如下

如果nginx.conf里设置了跳转，连带的开启cdn的301跳转，并打开回源的协议跟随，否则会出现Forward Loop Detect，循环跳转而访问死但是用了cdn每次还要去资源刷新，有点麻烦…

使用Umami统计个人网站访问数据

个人隐私管理很重要，没人想被视奸👁️。作为一个个人网站，是时候学会个人关注好各种数据来保护自己了。全程匿名化，守护隐私至上

为什么选择Umami

Umami 是一个开源的、以隐私为中心的 Google Analytics 替代方案。Umami 提供强大的网络分析解决方案，不会侵犯用户隐私。此外，当自行托管 Umami 时，可以完全控制自己的数据。

Umami基于Node.js开发，支持Mysql数据库，除服务器外它甚至可以部署在 Serverless 中。自部署的好处在于某些商业服务滥用用户数据，当数据保存在自己手中时可以确保不会分享给第三方（如果你查阅 Umami 的数据库，你甚至可以发现它连用户 IP 都没有收集）。

一键部署

数据库

通过链接打开Umami的应用模板 APP SECRET随便填
进入数据库在主页通过数据库进入数据库详情页面, 连接进入终端

输入create database umami;新建数据库然后到应用管理界面后进入详情页面并查看日志，发现已经可以运行了。
接入Umami

在这里打开公网web界面，默认用户名为admin，密码为umami

进入后创建website，

将tracking code复制到网站的head中即可

Docker+PostgreSQL数据库部署(上面那个要钱)

拉取镜像

docker pull docker.umami.is/umami-software/umami:postgresql-latest

启动数据库

以下是范例

1
2
3
4
5
6


docker run -d --name umami-db \
 -e POSTGRES_USER=umami \
 -e POSTGRES_PASSWORD=umami_password \
 -e POSTGRES_DB=umami \
 -v umami-db-data:/var/lib/postgresql/data \
 postgres:latest

-d：后台运行容器。
–name umami-db：给数据库容器命名为 umami-db。
-e：设置环境变量，包括数据库用户名、密码和数据库名。
-v：创建一个卷来存储数据库数据。

启动umami容器

1
2
3
4
5


docker run -d --name umami \
 -e DATABASE_URL=postgres://umami:umami_password@umami-db:5432/umami \
 -p 3000:3000 \
 --link umami-db \
 docker.umami.is/umami-software/umami:postgresql-latest

要记得在本地开放防火墙3000端口

最后docker ps检查一下容器是否正常运行就可以了

Vercel 自部署 Umami 网站统计服务

懒得写了, 看koala 或者Q 的文章都可以

额外功能添加

引入平滑返回顶部按钮

已弃用方案

在icons网站寻找适合的按钮样式(我选的是 arrow-big-up-line) 将其下载放入static/icons文件夹中(其实放在assets/icons中也可以, 这样需要用resources.Get引入) 然后我们在baseof.html的body部分中引入back-to-top按钮

1
2
3
4


<!-- 返回顶部按钮 -->
<button id="back-to-top" class="back-to-top">
 <img src="/icons/back-to-top.svg" alt="Back to Top" />
</button>

调整和美化

然后在static中创建css文件夹(原因如上)并创建style.css文件，在其中添加以下代码进行美化和调整

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


/* 返回顶部按钮样式 */
.back-to-top {
 position: fixed;
 bottom: 50px;
 right: 420px; /* 距离右侧420px */
 background-color: transparent; /* 背景透明 */
 color: white;
 border: 2px solid #4C3384; /* 边框颜色 */
 padding: 12px 20px;
 font-size: 24px; /* 字体大小 */
 border-radius: 50%;
 cursor: pointer;
 display: none; /* 初始隐藏 */
 z-index: 9999; /* 确保按钮位于顶部 */
 transition: all 0.3s ease; /* 添加过渡动画 */
}

/* 鼠标悬停时 */
.back-to-top:hover {
 background-color: rgba(238, 237, 231, 0.6); /* 设置背景色和透明度 */
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 增加阴影 */
}

/* 鼠标点击时的效果 */
.back-to-top:active {
 transform: scale(0.95); /* 按钮缩小一点，增加点击感 */
}

/* 小屏幕下调整按钮尺寸 */
@media screen and (max-width: 767px) {
 .back-to-top {
 padding: 8px;
 font-size: 20px; /* 字体更小 */
 bottom: 10px;
 right: 10px;
 }
}

平滑功能实现

最后在baseof.html的body部分中引入style.css文件并增加平滑回到顶部功能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<script>
// 获取按钮元素
 const backToTopButton = document.getElementById('back-to-top');

 // 当用户滚动页面时显示/隐藏返回顶部按钮
 window.onscroll = function () {
 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 backToTopButton.style.display = 'block';
 } else {
 backToTopButton.style.display = 'none';
 }
 };

 // 点击按钮滚动到顶部
 backToTopButton.addEventListener('click', function () {
 window.scrollTo({ top: 0, behavior: 'smooth' });
 });
</script>

现采用方案

先准备好一个svg的图案
下载图案

然后将以下代码复制到layouts/partials/footer/custom.html文件中(没有就自行创建)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


<style>
 #backTopBtn {
 display: none;
 position: fixed;
 bottom: 30px;
 z-index: 99;
 cursor: pointer;
 width: 30px;
 height: 30px;
 background-image: url({{ (resources.Get "icons/backTop.svg").Permalink }});
 }
</style>

<script>
 /**
 * 滚动回顶部初始化
 */
 function initScrollTop() {
 let rightSideBar = document.querySelector(".right-sidebar");
 if (!rightSideBar) {
 return;
 }
 // 添加返回顶部按钮到右侧边栏
 let btn = document.createElement("div");
 btn.id = "backTopBtn";
 btn.onclick = backToTop
 rightSideBar.appendChild(btn)
 // 滚动监听
 window.onscroll = function() {
 // 当网页向下滑动 20px 出现"返回顶部" 按钮
 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 btn.style.display = "block";
 } else {
 btn.style.display = "none";
 }
 };
 }

 /**
 * 返回顶部
 */
 function backToTop(){
 window.scrollTo({ top: 0, behavior: "smooth" })
 }

 initScrollTop();
</script>

实现了向下移动一定距离就可以出现回到顶部按钮

引入网站计数统计

官网
在baseof.html的<head>中添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


 <!-- 不蒜子统计脚本 -->
<script defer src="https://cn.vercount.one/js"></script>

<style>
 /* 调整位置和配色 */
 #vercount_value_page_pv {
 font-size: 16px;
 color: #f5f5f5; /* 设置数值为浅灰色 */
 background-color: transparent; /* 紫色背景 */
 padding: 10px;
 border-radius: 5px;
 position: fixed; /* 固定在页面上 */
 top: 10px; /* 距离顶部10px */
 left: 10px; /* 距离左侧10px */
 z-index: 9999; /* 保证它在页面最上层 */
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 为容器添加阴影 */
 font-weight: bold;
 }

 #page-access-info {
 font-size: 14px;
 color: #fff;
 background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
 padding: 5px 10px;
 position: fixed;
 top: 50px; /* 适当调整与页面上方的距离 */
 left: 10px;
 z-index: 9998; /* 确保它在数字的下面 */
 border-radius: 5px;
 }

 #page-access-info span {
 font-weight: bold;
 }
</style>

然后在<body>部分添加

1
2
3
4


<!-- 页面访问量提示信息 -->
<div id="page-access-info">
 ⬆️该页面访问量<span id="vercount_value_page_pv">Loading...</span>
</div>

可以实现跟我一样的效果
添加最后更新时间:
可参考shitao5

live2D引入(moc3model)

基本上按照letere的blog 进行引入，但是我没有使用cdn配置(github加载太慢了)

本地模型加载

在static文件夹下创建Resources文件夹, 放入项目 resources中的文件并修改custom.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68


<script>
 // 将路径传递到 JavaScript
 const cssPath = {{ (resources.Get "waifu/waifu.css").Permalink}}
 const waifuTipsPath = {{ (resources.Get "waifu/waifu-tips.json").Permalink}}
 const cdnPath = 'https://cdn.jsdelivr.net/gh/letere-gzj/live2d-widget-v3@main';
 const live2dpath={{.Site.Home.Permalink}} //自动检测并引入static文件夹中的文件
 const config = {
 // 资源路径
 path: {
 homePath: '/',
 modelPath: live2dpath,//修改处
 cssPath: cssPath, //修改处
 tipsJsonPath: waifuTipsPath, //修改处
 tipsJsPath: cdnPath + "/waifu-tips.js",
 live2dCorePath: cdnPath + "/Core/live2dcubismcore.js",
 live2dSdkPath: cdnPath + "/live2d-sdk.js"
 },
 // 工具栏
 tools: ["hitokoto", "asteroids", "express", "switch-model", "switch-texture", "info", "quit"],
 // 模型拖拽
 drag: {
 enable: true,
 direction: ["x", ]
 },
 // 模型切换(order: 顺序切换，random: 随机切换)
 switchType: "random"
 }

 // 加载资源并初始化
 if (screen.width >= 768) {
 Promise.all([
 loadExternalResource(cssPath, "css"),
 loadExternalResource(config.path.live2dCorePath, "js"),
 loadExternalResource(config.path.live2dSdkPath, "js"),
 loadExternalResource(config.path.tipsJsPath, "js")
 ]).then(() => {
 initWidget({
 homePath: config.path.homePath,
 waifuPath: waifuTipsPath, //修改处
 cdnPath: config.path.modelPath,
 tools: config.tools,
 dragEnable: config.drag.enable,
 dragDirection: config.drag.direction,
 switchType: config.switchType
 });
 });
 }

 // 异步加载资源
 function loadExternalResource(url, type) {
 return new Promise((resolve, reject) => {
 let tag;
 if (type === "css") {
 tag = document.createElement("link");
 tag.rel = "stylesheet";
 tag.href = url;
 } else if (type === "js") {
 tag = document.createElement("script");
 tag.src = url;
 }
 if (tag) {
 tag.onload = () => resolve(url);
 tag.onerror = () => reject(url);
 document.head.appendChild(tag);
 }
 });
 }
</script>

博客已稳定运行的显示

显示效果可以在我博客的地步看到
在layouts/partials/footer/custom.html添加代码, 记得修改s1为建站时间，代码参考这里

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!-- Add blog running time -->
<script>
 let s1 = '2024-11-28'; //website start date
 s1 = new Date(s1.replace(/-/g, "/"));
 let s2 = new Date();
 let timeDifference = s2.getTime() - s1.getTime();

 let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
 let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));

 let result = days + "天" + hours + "小时" + minutes + "分钟";
 document.getElementById('runningdays').innerHTML = result;
</script>

在layouts/partials/footer/footer.html里添加以下代码：

1
2
3
4
5
6


<!-- Add blog running time -->
 <section class="running-time">
 本博客已稳定运行
 <span id="runningdays" class="running-days"></span>
 </section>
 <section class="copyright">

在assets/scss/partials/footer.scss进行风格样式调整, 我将计时部分进行了加粗

1
2
3
4
5
6
7
8
9


.running-time {
 color: var(--card-text-color-secondary);
 font-weight: normal;

 .running-days {
 font-weight:bold;
 color: var(--emphasize-text-color);
 }
}

总字数统计：“发表了x篇文章，共计x字”

显示效果如文章最底下显示
在layouts/partials/footer/footer.html里增加以下代码，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


 <!-- Add total page and word count time -->
 <section class="totalcount">
 {{$scratch := newScratch}}
 {{ range (where .Site.Pages "Kind" "page" )}}
 {{$scratch.Add "total" .WordCount}}
 {{ end }}
 {{ $totalWords := $scratch.Get "total" }}
 {{ $tenThousands := div $totalWords 10000 }}
 {{ $remainingThousands := mod (div $totalWords 1000) 10 }}
 <!-- 字数统计 -->
 <!-- Add total page and word count time -->
 <section class="totalcount">
 {{$scratch := newScratch}}
 {{ range (where .Site.Pages "Kind" "page" )}}
 {{$scratch.Add "total" .WordCount}}
 {{ end }}
 发表了{{ len (where .Site.RegularPages "Section" "post") }}篇文章 ·
 总计{{ $tenThousands }}万{{ $remainingThousands }}千字
 </section>

在assets/scss/partials/footer.scss里修改风格：

1
2
3
4
5


.totalcount {
 color: var(--card-text-color-secondary);
 font-weight: normal;
 margin-bottom: 5px;
 }

注意！hugo要用extended版本才可以渲染scss, 我重装后因为装了普通版本一直没渲染出来颜色和样式，看了好几次日志才发现

页码跳转效果

修改/layouts/partials/pagination.html文件（没有就添加）

点击展开

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


{{ if gt .Paginator.TotalPages 1 }}
{{ if gt .Paginator.TotalPages 1 }}
 <nav class="pagination">
 {{ $.Scratch.Set "hasPrevDropdown" false }}
 {{ $.Scratch.Set "hasNextDropdown" false }}

 {{ range .Paginator.Pagers }}
 {{ if eq . $.Paginator }} <!-- 当前页 -->
 <span class="page-link current">
 {{- .PageNumber -}}
 </span>
 {{ else if or (eq . $.Paginator.First) (eq . $.Paginator.Prev) }} <!-- 首页、上一页 -->
 <a class="page-link" href="{{ .URL }}">
 {{- .PageNumber -}}
 </a>
 {{ else if or (eq . $.Paginator.Next) (eq . $.Paginator.Last) }} <!-- 下一页、尾页 -->
 <a class="page-link" href="{{ .URL }}">
 {{- .PageNumber -}}
 </a>
 {{ else }} <!-- 其他页码 -->
 {{ if and (not ($.Scratch.Get "hasPrevDropdown")) (lt .PageNumber $.Paginator.PageNumber) }}
 {{ $.Scratch.Set "hasPrevDropdown" true }}
 <div class="page-dropdown-wrapper">
 <select class="page-dropdown" onchange="location = this.value;">
 <option value="#">选择页码</option>
 {{ range $i, $pager := $.Paginator.Pagers }}
 {{ if and (lt $pager.PageNumber $.Paginator.PageNumber) (not (or (eq $pager $.Paginator.First) (eq $pager $.Paginator.Prev))) }}
 <option value="{{ $pager.URL }}">{{ $pager.PageNumber }}</option>
 {{ end }}
 {{ end }}
 </select>
 </div>
 {{ else if and (not ($.Scratch.Get "hasNextDropdown")) (gt .PageNumber $.Paginator.PageNumber) }}
 {{ $.Scratch.Set "hasNextDropdown" true }}
 <div class="page-dropdown-wrapper">
 <select class="page-dropdown" onchange="location = this.value;">
 <option value="#">选择页码</option>
 {{ range $i, $pager := $.Paginator.Pagers }}
 {{ if and (gt $pager.PageNumber $.Paginator.PageNumber) (not (or (eq $pager $.Paginator.Next) (eq $pager $.Paginator.Last))) }}
 <option value="{{ $pager.URL }}">{{ $pager.PageNumber }}</option>
 {{ end }}
 {{ end }}
 </select>
 </div>
 {{ end }}
 {{ end }}
 {{ end }}
 </nav>
{{ end }}

修改assets/scss/partials/pagination.scss文件

点击展开

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71


.pagination {
 display: flex;
 background-color: var(--card-background);
 box-shadow: var(--shadow-l1);
 border-radius: var(--card-border-radius);
 overflow: hidden;
 flex-wrap: wrap;

 .page-link {
 padding: 16px 32px;
 display: inline-flex;

 &.current {
 font-weight: bold;
 background-color: var(--card-background-selected);
 color: var(--card-text-color-main);
 }

 color: var(--card-text-color-secondary);
 }
}


/* 默认深色模式 */
.pagination {
 display: flex;
 justify-content: left;
 align-items: center;
 gap: 15px;
}
/* 下拉菜单容器 */
.page-dropdown-wrapper {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 5px; /* 调整...和下拉菜单之间的间距 */
}

/* ...样式 */
.page-dropdown-dots {
 color: var(--card-text-color-secondary); /* 使用主题文字颜色 */
 font-size: 14px;
 cursor: pointer;
}

/* 下拉菜单样式 */
.page-dropdown {
 background-color: var(--card-background);
 color: var(--card-text-color-secondary);
 border: 1px solid var(--card-border-color);
 border-radius: var(--card-border-radius);
 padding: 5px 25px 5px 10px; /* 调整内边距 */
 font-size: 14px;
 cursor: pointer;
 appearance: none; /* 移除默认下拉箭头 */
 -webkit-appearance: none; /* 兼容Safari */
 -moz-appearance: none; /* 兼容Firefox */
 outline: none; /* 移除聚焦时的默认轮廓 */
}

/* 下拉菜单的箭头图标 */
.page-dropdown-wrapper::after {
 content: "▼";
 position: absolute;
 top: 50%;
 right: 10px;
 transform: translateY(-50%);
 pointer-events: none; /* 防止箭头图标干扰点击 */
 color: var(--card-text-color-secondary);
 font-size: 12px;
}

最终显示效果

折叠块效果

基于stack_overflow 实现在/layouts/shortcodes/details.html下添加

1
2
3
4
5


<h{{ .Get 0 }} id="{{ anchorize (.Get 1) }}">{{ (.Get 1) | markdownify }}</h{{ .Get 0 }}>
<details>
    <summary>点击展开</summary>
    {{ .Inner | markdownify }}
</details>

这样这个shortcode就可以在文章中使用了
在< details >和 < /details > (两个都要裹在{{}}内部才可以)中间插入想要折叠的部分就可以了，具体效果上面就有

采取折叠块方式实现

准备一张
下载图片
将以下代码复制进layouts/partials/footer/custom.html(文件不存在就自行创建)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80


<style>
 .highlight {
 /* 你可以根据需要调整这个高度 */
 max-height: 400px;
 overflow: hidden;
 }

 .code-show {
 max-height: none !important;
 }

 .code-more-box {
 width: 100%;
 padding-top: 78px;
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1;
 }

 .code-more-btn {
 display: block;
 margin: auto;
 width: 44px;
 height: 22px;
 background: #f0f0f5;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 padding-top: 6px;
 cursor: pointer;
 }

 .code-more-img {
 cursor: pointer !important;
 display: block;
 margin: auto;
 width: 22px;
 height: 16px;
 }
</style>

<script>
 function initCodeMoreBox() {
 let codeBlocks = document.querySelectorAll(".highlight");
 if (!codeBlocks) {
 return;
 }
 codeBlocks.forEach(codeBlock => {
 // 校验是否overflow
 if (codeBlock.scrollHeight <= codeBlock.clientHeight) {
 return;
 }
 // 元素初始化
 // codeMoreBox
 let codeMoreBox = document.createElement('div');
 codeMoreBox.classList.add('code-more-box');
 // codeMoreBtn
 let codeMoreBtn = document.createElement('span');
 codeMoreBtn.classList.add('code-more-btn');
 codeMoreBtn.addEventListener('click', () => {
 codeBlock.classList.add('code-show');
 codeMoreBox.style.display = 'none';
 // 触发resize事件，重新计算目录位置
 window.dispatchEvent(new Event('resize'))
 })
 // img
 let img = document.createElement('img');
 img.classList.add('code-more-img');
 img.src = {{ (resources.Get "icons/codeMore.png").Permalink }}
 // 元素添加
 codeMoreBtn.appendChild(img);
 codeMoreBox.appendChild(codeMoreBtn);
 codeBlock.appendChild(codeMoreBox)
 })
 }

 initCodeMoreBox();
</script>

效果呢就像这样

目录折叠效果

添加代码到layouts/partials/footer/custom.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


<style>
 #TableOfContents > ul, ol {
 ul, ol {
 display: none;
 }
 .open {
 display: block;
 }
 }
</style>

<script>
 function initTocHide() {
 // 判断是否存在文章目录
 let toc = document.querySelector(".widget--toc");
 if (!toc) {
 return;
 }
 // 监听滚动
 window.addEventListener('scroll', function() {
 //清除class值
 let openUl = document.querySelectorAll(".open");
 if (openUl.length > 0) {
 openUl.forEach((ul) => {
 ul.classList.remove("open")
 })
 }
 // 获取active-class
 let currentLi = document.querySelector(".active-class");
 if (!currentLi) {
 return
 }
 // 展示子ul
 if (currentLi.children.length > 1) {
 currentLi.children[1].classList.add("open")
 }
 // 展示父ul
 let ul = currentLi.parentElement;
 do {
 ul.classList.add("open");
 ul = ul.parentElement.parentElement
 } while (ul !== undefined && (ul.localName === 'ul' || ul.localName === 'ol'))
 });
 }
 initTocHide()
</script>

这样就会在没滑到的情况下不展开

添加notice chat timeline样式块

即Github markdown形式的shortcodes
左右的聊天气泡
上下一条线的时间线显示原方法来自koala-一些短代码 notice部分
layouts/shortcodes下创建chat.html放入样式代码，通过调用shortcodes进行使用

谢谢！
ありがとう！～
bye~
一部分额外的功能可见git&obsidian

Gdb_mannual

Wed, 27 Nov 2024 00:17:00 +0000

GDB调试基础

1. 启动GDB

1

gdb <可执行文件>

如上图所示，gdb启动后，默认进入gdb的命令行模式，并打开了一个二进制文件，通过run指令进行了运行。输入start指令，进入gdb的调试模式。

STACK 含义：栈（Stack）描述：栈是程序运行时用于存储局部变量、函数调用信息和返回地址的内存区域。每当函数被调用时，栈会存储当前函数的局部变量、参数和返回地址等信息。栈通常是向下增长的（即栈顶地址减小）。用途：在调试时，STACK 区域显示的是当前栈的内容，包括函数调用栈、局部变量等。
HEAP 含义：堆（Heap）描述：堆是程序动态分配内存的地方（比如通过 malloc、calloc 等动态内存分配函数）。堆的内存是由程序员显式管理的，可以进行手动分配和释放。堆的分配方式通常是向上增长的。用途：HEAP 区域会显示当前程序使用的动态分配的内存，包括由 malloc、free 等操作分配的内存块。在调试时，这有助于你检查内存泄漏或溢出等问题。
CODE 含义：代码段（Code Segment）描述：代码段是存放程序指令（机器代码）的区域。这部分内存是只读的，程序的执行代码存储在这里。一般来说，代码段是只读的，以防止程序在运行时修改其自身的指令。用途：CODE 区域显示程序的机器指令，可以通过它来检查正在执行的代码，反汇编操作通常会展示这个区域。
DATA 含义：数据段（Data Segment）描述：数据段是用来存放程序的全局变量和静态变量的地方。这些变量在程序执行期间保持固定的内存位置。数据段通常包括初始化的数据（如全局变量的初始值）和未初始化的数据（例如 BSS 段）。用途：DATA 区域显示程序的全局变量和静态变量的内存布局，帮助调试全局状态和数据。
WX 含义：可写且可执行（Writable and Executable）描述：标记为 WX 的内存区域是既可写又可执行的。这种内存区域通常是存在漏洞的地方，例如程序可能会被攻击者通过写入一些恶意代码并随后执行它，导致代码注入攻击。用途：如果程序中有 WX 区域，它可能会被用来检查是否存在不当的内存访问，尤其是在涉及堆栈溢出、代码注入等漏洞时。
RODATA 含义：只读数据段（Read-Only Data Segment）描述：只读数据段通常存储程序中常量数据（如字符串常量）。这些数据在程序运行过程中不会被修改，因此通常放在只读内存区域。用途：RODATA 区域显示的是程序的只读数据，例如 const 字符串、常量数组等。总结这些内存区域分别代表了程序运行时不同类型的内存空间： STACK：局部变量、函数调用栈 HEAP：动态分配的内存 CODE：程序的执行代码 DATA：全局变量和静态变量 WX：既可写又可执行的内存区域（通常存在漏洞时） RODATA：只读数据（例如常量）

各部分分支

寄存器部分

反编译部分，显示汇编指令

栈空间分配

栈调用查看

常用gdb指令

基本指令

help //查看帮助
q //退出gdb

运行指令

n //单步步过，可以理解为下一步，遇到调用不跟进，相当于step over，源码层面的一步
ni //常用，同n，汇编层面的一步
s //单步步入，可以理解为下一步，遇到调用跟进函数中，源码层面的一步
si //常用，同s，汇编层面的一步
fini //运行到当前函数结束
r //run， 巨常用 重新开始执行
c //执行到断点

断点指令

下普通断点指令b(break)

b *(0x123456) //常用，给0x123456地址处的指令下断点
b *$rebase(0x123456) //$rebase 在调试开PIE的程序的时候可以直接加上程序的随机地址, 打开随机化PIE保护时常用
b fun_name //常用，给函数fun_name下断点，目标文件要保留符号才行
b file_name:fun_name
b file_name:15 //给file_name的15行下断点，要有源码才行
b 15
b +0x10 //在程序当前停住的位置下0x10的位置下断点，同样可以-0x10，就是前0x10
break fun if $rdi==5 //条件断点，rdi值为5的时候才断

删除和禁用断点

d b 断点编号 //删除断点 == delete 断点编号 //删除指定断点
i b //查看断点信息
disable 断点编号 //禁用指定断点
enable 断点编号 //启用指定断点
clear //清楚所有断点

捕获断点catch

catch syscall //syscall调用是断住

打印指令p(print)

p fun_name //打印fun_name的地址，需要保留符号
p 0x10-0x08 //计算0x10-0x08的结果
p &a //查看变量a的地址
p *(0x123456) //查看0x123456地址的值，注意和x指令的区别，x指令查看地址的值不用星号
p $rdi //显示rdi寄存器的值，注意和x的区别，这只是显示rdi的值，而不是rdi指向的值
p *($rdi) //显示rdi指向的值

x /nfu 0x123456 //常用，x指令的格式是：x空格/nfu，nfu代表三个参数
参数： N 查看数量，代表显示几个单元（而不是显示几个字节，后面的u表示一个单元多少个字节），放在’/‘后面 F 代表查看所用的格式) U 规定一块内容有几字节——b（1字节）、h（2字节）、w（4字节）、g（8字节），放在’f’后面 F: 进制

x 按十六进制格式显示变量。
d 按十进制格式显示变量。
u 按十六进制格式显示无符号整型。
o 按八进制格式显示变量。
t 按二进制格式显示变量。
a 按十六进制格式显示变量。
c 按字符格式显示变量。
f 按浮点数格式显示变量。
s 按字符串显示。
b 按字符显示。
i 显示汇编指令。
$pc, 指定到当前指令，如下

例子

x /10xg 0x123456 //常用，从0x123456开始每个单元八个字节，十六进制显示是个单元的数据
x /10xd $rdi //从rdi指向的地址向后打印10个单元，每个单元4字节的十进制数
x /10i 0x123456 //常用，从0x123456处向后显示十条汇编指令
i r //查看寄存器的值
telescope/tele （可加参数）//从某个地址开始展开信息 ❤

杂项

stack //查看栈
retaddr //打印包含返回地址的栈地址❤
canary //直接看canary的值(没用过)
plt //查看plt表
got //查看got表
checksec //检查程序保护
vmmap //查看内存空间和权限 ❤

堆操作指令(pwndbg独有)

arena //显示arena详情信息
- arenas //显示所有arena基本信息
- arenainfo //好看的显示信息
bins
常用，查看所有种类的堆块的链表信息
- fastbins //查看fastbin的链表信息
- unsortedbin //查看unsortedbin的链表信息
- smallbins //查看smallbin的链表信息
- largebins //查看largebin的链表信息
- tcache //查看tcache的详情信息
- tcachebins //查看tcachebins的链表信息
heap //显示堆信息
- heapbase //查看堆起始地址
- heapinfo/heapinfoall //显示堆信息， 但是不如bins好用
- parseheap //解析堆信息 ❤
tracemalloc //好用，会提示所有操作堆的地方 ❤

以一道NewStar CTF2024 题名`gdb`为例

下载附件后进入发现main函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


__int64 __fastcall main(int a1, char **a2, char **a3)
{
 unsigned __int64 v3; // rax
 size_t v4; // rax
 int fd; // [rsp+0h] [rbp-440h]
 char s[9]; // [rsp+7h] [rbp-439h] BYREF
 __int64 v8[4]; // [rsp+10h] [rbp-430h] BYREF
 char buf[1032]; // [rsp+30h] [rbp-410h] BYREF
 unsigned __int64 v10; // [rsp+438h] [rbp-8h]

 v10 = __readfsqword(0x28u);
 setvbuf(stdin, 0LL, 2, 0LL);
 setvbuf(stdout, 0LL, 2, 0LL);
 strcpy(s, "0d000721");
 qmemcpy(v8, "mysecretkey1234567890abcdefghijk", sizeof(v8));
 printf("Original: %s\n", s);
 v3 = strlen(s);
 sub_12E5((__int64)s, v3, (__int64)v8);
 printf("Input your encrypted data: ");
 read(0, buf, 0x200uLL);
 v4 = strlen(s);
 if ( !memcmp(s, buf, v4) )
 {
 printf("Congratulations!");
 fd = open("/flag", 0);
 memset(buf, 0, 0x100uLL);
 read(fd, buf, 0x100uLL);
 write(1, buf, 0x100uLL);
 }
 return 0LL;
}

SUB_12E5为加密函数，加密看不懂（出题人故意的）动调查看

找到偏移地址b *$rebase(0x181A) 运行到调用处停下，

RDI存储加密内容，RSI存储加密密钥(len)，所以我们复制加密内容地址，然后ni单步运行后再输入tel 0x7fffffffd7d7

此时已经转换成加密后的样子了
发送b'\x5d\x1d\x43\x55\x53\x45\x57\x45即可

IDA常用操作(个人向）

Wed, 27 Nov 2024 00:00:00 +0000

常用操作

边用边记，多打打就会记住了！只记录了部分(之后也不会更新了，懒)

; 为当前指令添加注释
/ 在伪代码中添加注释
g 跳转到任意地址, 直接输入地址
Esc 返回到跳转前的位置
n 定义或修改名称，常用来修改函数和变量的名字
A 按照ASCII显示数据
D 分别按字节、字、双字来显示数据
F5 反编译汇编代码，得到C伪代码 👍
Shift+F12 搜索程序中的字符串 👍
Alt+t 搜索程序中的指令
Ctrl+x 查看变量和函数的引用 👍
Y 修改变量/函数类型
F2 快速下断点
空格快速在顺序视图和流程图模式中切换

个人其他习惯操作

附件提取码:LAIN
ISCN2023华中赛区分区赛AWD的PWN题复现(逆向分析)

前置操作

直接进入到exports可以快速寻找到程序入口点main部分

打开options，打开stack pointer和auto comments,`opcode给10

这样左侧就会将字节码显示出来了

tech on Nan0inPsyLog

git && github指令速学速记

基础须知

什么是版本管理和版本管理系统

安装

分支 commit 等基础命令

在本地commit存储和读取

Git Branch

信息的管理

信息的合并和rebase

GIT特性

HEAD

分离的 HEAD

相对引用

强制修改分支位置

撤销变更

快捷的整理提交记录

交互式rebase

tag

远程仓库

进行设置

配置公钥ssh key

与远程进行交互、进行提交

pull requests?(PR)

发生偏离了怎么办？

注意事项

提交

分支

.gitingore

一些特性

参考链接

dn11接入和癔语

工具

arch linux下编译

设置peer文件，配置Wireguard

配置bird，进行BGP

服务器上搭建

后续的癔语

Git&&obsidian短代码推送hugo博客

前情提要

搭配脚本实现git自动化推送

服务器端

ssh密钥配置

创建和配置git用户

创建git仓库

权限和文件修改

用户端

脚本实现推送自动化

Obsidian便利自动化博客撰写

关于模板

short codes

NOTICE(已弃用)

chat

Hugo Stack 主題加入 Admonition 提示框樣式

修复目录折叠和Admonition方法重复

各种修软件工具error

misc

volatility3

plugins 出现kernel error

Arch

dingtalk无法使用fcitx

nvidia_drm模块无法加载而启动不了nvidia驱动

neovide奇怪的底部栏丢失

Hugo灯箱实现图片放

显示效果

实现方法

1. 修改config.toml或者hugo.yaml

2. 创建并修改render-image.html

3. 导入和添加内容

patchelf的正确使用姿势🤗

言

安装软件

glibc-all-in-one

例 moectf-Got it

patch

WSL配置网络

1. 开放windows对WSL2防火墙

2. 自己学会使用魔法

3. 设置端口

4.WSL2配置

1. 修改`config.toml`或者`hugo.yaml`

2. 创建并修改`render-image.html`