<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>IT Crafter &#8211; IT Crafter</title>
	<atom:link href="https://blog.itcrafter.net/archives/author/marvin/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.itcrafter.net</link>
	<description></description>
	<lastBuildDate>Sun, 08 Mar 2026 13:36:51 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>
	<item>
		<title>Claude Code 接入硅基流动，一个中转搞定</title>
		<link>https://blog.itcrafter.net/archives/196</link>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Sun, 08 Mar 2026 01:16:19 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Claude Code]]></category>
		<category><![CDATA[Siliconflow]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=196</guid>

					<description><![CDATA[2,784 字，阅读时间 15 分钟。]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading" id="1-siliconflow-官方文档的坑">1. Siliconflow 官方文档的坑</h2>



<p>想用 Claude Code 接 Siliconflow 硅基流动的模型，以为照着&nbsp;<a href="https://docs.siliconflow.cn/cn/usercases/use-siliconcloud-in-ClaudeCode#claude-code">官网文档</a>&nbsp;配置就行：<br><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2026/03/69ac4755bf92a.png" alt="69ac4755bf92a.png"></p>



<p>结果，运行直接报 Not logged in:<br><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2026/03/69ac47b1dd1f3.png" alt="69ac47b1dd1f3.png"></p>



<p>有经验的朋友都知道，接入第三方模型是无须登录的，出现这个现象想必是踩坑了&#8230;</p>



<p>试着把 setting.json 中的 ANTHROPIC_API_KEY 字段名改为 ANTHROPIC_AUTH_TOKEN:<br><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2026/03/69ac48a85a21b.png" alt="69ac48a85a21b.png"></p>



<p>这回，直接报错。看来只是换了个坑：<br><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2026/03/69ac490a377ea.png" alt="69ac490a377ea.png"></p>



<p>这是 siliconflow server 返回的报错，因为 Siliconflow 的模型需要特殊的 thinking 配置，而 Claude Code 默认发过去的请求格式不匹配。</p>



<p>看来官方文档也不甚靠谱。</p>



<h2 class="wp-block-heading" id="2-中转方案claude-code-router">2. 中转方案：claude-code-router</h2>



<p>claude code 有个第三方的转发器: claude-code-router，似乎可以解决这个问题。（<a href="https://github.com/musistudio/claude-code-router">github 源码</a>）</p>



<p>数据链路大致是：</p>



<pre class="wp-block-code"><code>Claude Code → claude-code-router → Siliconflow
</code></pre>



<p>后面的实践表明，这款 router 可以解决 siliconflow 的接入问题。</p>



<h2 class="wp-block-heading" id="3-较佳实践docker-部署">3. 较佳实践：docker 部署</h2>



<p>能用 docker 部署的服务，我都不会再直接安装到服务器上了。正好 claude-code-router 作者在 dockerhub 上发布了<a href="https://hub.docker.com/r/musistudio/claude-code-router">镜像</a>。</p>



<h3 class="wp-block-heading" id="31-准备工作">3.1. 准备工作</h3>



<p>确保你已经具备：</p>



<ul class="wp-block-list">
<li>Docker 和 Docker Compose</li>



<li>Siliconflow 的 API Key</li>



<li>大概 5 分钟时间</li>
</ul>



<h3 class="wp-block-heading" id="32-配置文件">3.2. 配置文件</h3>



<p>分别需要准备 docker compose 的配置文件，和 claude-code-router 本身的配置文件。</p>



<p><code>docker-compose.yml</code>&nbsp;示例：</p>



<pre class="wp-block-code"><code>version: '3.8'

services:
  claude-code-router:
    image: musistudio/claude-code-router:latest
    ports:
      - "3456:3456"
    restart: unless-stopped
    volumes:
      - /your_config_path:/root/.claude-code-router
</code></pre>



<p>claude-code-router 配置文件&nbsp;<code>config.json</code>&nbsp;示例：（重要配置）</p>



<pre class="wp-block-code"><code># 放置路径: /your_config_path/config.json
# 使用时请删除所有 # 注释内容
{
    "PROXY_URL": "http://ip:port",  # 可选，支持配置 proxy
    "LOG": true,
    "APIKEY":"$CCR_KEY",  # claude-code 接入 claude-code-router 时配置的 ANTHROPIC_AUTH_TOKEN
    "HOST":"0.0.0.0", # docker 部署中，此处必须设为 0.0.0.0
    "LOG_LEVEL": "trace",
    "API_TIMEOUT_MS": 600000,
    "NON_INTERACTIVE_MODE": false,
    "Providers": &#91;
      {
        "name": "siliconflow",
        "api_base_url": "https://api.siliconflow.cn/v1/chat/completions",
        "api_key": "$SILICONFLOW_API_KEY",
        "models": &#91;
          "Pro/MiniMaxAI/MiniMax-M2.5",
          "Pro/zai-org/GLM-5",
	        "zai-org/GLM-4.5-Air",
	        "Qwen/Qwen2.5-72B-Instruct-128K",
          "Qwen/Qwen3-VL-235B-A22B-Thinking"
        ],
        "transformer": {
          "use": &#91;
	    &#91;
	      "max_tokens",
	      {
		"max_tokens": 16384
	      }
      	    ]	      
	  ]
        }
      }
    ],
    "Router": {
      "default": "siliconflow,Pro/MiniMaxAI/MiniMax-M2.5",
      "background": "siliconflow,Qwen/Qwen2.5-72B-Instruct-128K",
      "think": "siliconflow,Pro/zai-org/GLM-5",
      "longContext": "siliconflow,Pro/MiniMaxAI/MiniMax-M2.5",
      "longContextThreshold": 60000,
      "webSearch": "siliconflow,zai-org/GLM-4.5-Air",
      "image": "siliconflow,Qwen/Qwen3-VL-235B-A22B-Thinking"
    }

}

</code></pre>



<h3 class="wp-block-heading" id="4-启动服务">4. 启动服务</h3>



<pre class="wp-block-code"><code>docker-compose up -d
</code></pre>



<p>通过 docker 日志确认容器启动成功：</p>



<pre class="wp-block-code"><code>docker logs -f claude-code-router
</code></pre>



<p>成功加载 config 配置：<br><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2026/03/69ac510e06c0a.png" alt="69ac510e06c0a.png"></p>



<h3 class="wp-block-heading" id="5-配置-claude-code">5. 配置 Claude Code</h3>



<p>设置环境变量：</p>



<pre class="wp-block-code"><code>export ANTHROPIC_BASE_URL="http://localhost:3456"
export ANTHROPIC_AUTH_TOKEN="CCR config 中配置的 CCR_KEY"
</code></pre>



<p>或者直接在 Claude Code 的 ~/.claude/settings.json 里改：</p>



<pre class="wp-block-code"><code>{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "CCR config 中配置的 CCR_KEY",
    "ANTHROPIC_BASE_URL": "http://localhost:3456",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "siliconflow,zai-org/GLM-4.5-Air",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "siliconflow,Pro/zai-org/GLM-5",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "siliconflow,Pro/MiniMaxAI/MiniMax-M2.5",
    "ANTHROPIC_MODEL": "siliconflow,Pro/MiniMaxAI/MiniMax-M2.5",
    "ANTHROPIC_REASONING_MODEL": "siliconflow,Pro/zai-org/GLM-5",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  }
}
</code></pre>



<h3 class="wp-block-heading" id="6-测试一下">6. 测试一下</h3>



<p>启动 claude code，随便对话一下，返回正常就说明成功了。</p>



<h2 class="wp-block-heading" id="7-总结">7. 总结</h2>



<p>颇费周折，终于成功在 claude code 中接入了 siliconflow 硅基流动的模型。我觉得官方得好好刷新下指引文档。</p>



<h2 class="wp-block-heading" id="参考链接">参考链接</h2>



<ul class="wp-block-list">
<li><a href="https://github.com/musistudio/claude-code-router">claude-code-router 项目地址</a></li>



<li><a href="https://hub.docker.com/r/musistudio/claude-code-router">claude-code-router docker 镜像</a></li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ffmpeg 快速拼接视频文件</title>
		<link>https://blog.itcrafter.net/archives/193</link>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Sat, 02 Aug 2025 15:08:44 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=193</guid>

					<description><![CDATA[1. ffmpeg 的直接拼接功能 ffmpeg 命令行工具支持直接拼接视频文件和音频文件。因为无须重新编码， ... <a title="ffmpeg 快速拼接视频文件" class="read-more" href="https://blog.itcrafter.net/archives/193" aria-label="Read more about ffmpeg 快速拼接视频文件">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">1. ffmpeg 的直接拼接功能</h3>



<p>ffmpeg 命令行工具支持直接拼接视频文件和音频文件。因为无须重新编码，10s 左右即可拼接时长 1.5H 左右的视频文件，速度可谓相当快。</p>



<p>按照官网提供的最佳实践，先将需要拼接的文件名以一定格式写在文本文件中，比如：</p>



<pre class="wp-block-code"><code># file.txt
file '/path/to/file1.mp4'
file '/path/to/file2.mp4'</code></pre>



<p>然后，通过以下 ffmpeg 命令实施拼接：</p>



<pre class="wp-block-code"><code>ffmpeg -f concat -i mylist.txt -c copy output.mp4</code></pre>



<p>但是，当拼接 .mp4 文件时，很可能会碰到类似如下的报错：</p>



<pre class="wp-block-code"><code>&#91;mp4 @ 0x5597289620c0] Non-monotonous DTS in output stream 0:0; previous: 262, current: 262; changing to 263. This may result in incorrect timestamps in the output file.
&#91;concat @ 0x559728914240] h264_mp4toannexb filter failed to receive output packet
file.txt: Invalid argument</code></pre>



<h3 class="wp-block-heading">2. H.264 编码格式转换为 MPEG-2 再作拼接</h3>



<p>按官网的建议，如果希望无损地直接拼接 H.264 视频文件，须先将其转换为中间格式，MPEG-2（一般后缀为 .ts）。</p>



<p>操作方式：</p>



<pre class="wp-block-code"><code>ffmpeg -i /path/to/file1.mp4 -c copy intermediate1.ts
ffmpeg -i /path/to/file2.mp4 -c copy intermediate2.ts
ffmpeg -i "concat:intermediate1.ts|intermediate2.ts" -c copy output.mp4</code></pre>



<p>实测成功，过程无报错且速度极快。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading">参考资料：</h4>



<ul class="wp-block-list">
<li>官网文档：https://trac.ffmpeg.org/wiki/Concatenate</li>
</ul>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Gitlab 500 Error: Redis 故障</title>
		<link>https://blog.itcrafter.net/archives/185</link>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Sun, 15 Sep 2024 12:05:18 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[error 500]]></category>
		<category><![CDATA[gitlab]]></category>
		<category><![CDATA[redis]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=185</guid>

					<description><![CDATA[故障&#8230; 前几天网络出梗，导致 Gitlab 服务器上挂载的 LUN 数据盘意外断连，数据损坏。 稍 ... <a title="Gitlab 500 Error: Redis 故障" class="read-more" href="https://blog.itcrafter.net/archives/185" aria-label="Read more about Gitlab 500 Error: Redis 故障">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">故障&#8230;</h3>



<p>前几天网络出梗，导致 Gitlab 服务器上挂载的 LUN 数据盘意外断连，数据损坏。</p>



<p>稍费周折把 LUN 恢复并重新挂载之后，Gitlab 依旧无法正常工作，报 500 Error。</p>



<figure class="wp-block-image"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/09/66e45761eed5c.png" alt="gitlab_500_error"/></figure>



<p>想必是 LUN 断开时正在写入关键数据，尽管数据盘挂载了回来，但可能某些服务因为关键数据损坏而导致整个 Gitlab 跪了&#8230;</p>



<h3 class="wp-block-heading">排查&#8230;</h3>



<p>查下 Gitlab 各个服务的状态：</p>



<pre class="wp-block-preformatted">gitlab-ctl status</pre>



<p>发现 gitlab-kas 和 redis 服务是 down 状态：</p>



<pre class="wp-block-preformatted">un: gitaly: (pid 317) 151836s; run: log: (pid 307) 151836s<br>down: gitlab-kas: (pid 400) <br>run: gitlab-workhorse: (pid 315) 151836s; run: log: (pid 306) 151836s<br>run: logrotate: (pid 37297) 634s; run: log: (pid 313) 151836s<br>run: nginx: (pid 389) 151835s; run: log: (pid 388) 151835s<br>run: postgresql: (pid 319) 151836s; run: log: (pid 310) 151836s<br>run: puma: (pid 318) 151836s; run: log: (pid 309) 151836s<br>down: redis: (pid 314) <br>run: sidekiq: (pid 308) 151836s; run: log: (pid 303) 151836s<br>run: sshd: (pid 36) 151852s; run: log: (pid 35) 151852s<br>​</pre>



<p>gitlab-kas (Kubernetes Agent Server)：是用于集成 Kubernetes 的服务组件，但这对于 Gitlab 来说只是个可选组件；</p>



<p>redis：这倒是个关键的后台服务，用作 Gitlab 的缓存层，并负责处理后台作业队列以及存储用户会话信息。</p>



<p>而且，gitlab-kas 大概率会依赖 redis 的缓存和消息队列能力。所以，先看看 redis 出了什么问题：</p>



<pre class="wp-block-preformatted">tail -f /var/log/gitlab/redis/current   <em># 查看 gitlab redis 运行日志</em></pre>



<p>确实看出一些端倪：</p>



<pre class="wp-block-preformatted">2024-09-13_04:03:46.62940 25242:M 13 Sep 2024 04:03:46.629 * Loading RDB produced by version 7.0.15<br>2024-09-13_04:03:46.62941 25242:M 13 Sep 2024 04:03:46.629 * RDB age 97363 seconds<br>2024-09-13_04:03:46.62944 25242:M 13 Sep 2024 04:03:46.629 * RDB memory usage when created 6.00 Mb<br>2024-09-13_04:03:46.64184 25242:M 13 Sep 2024 04:03:46.641 <em># Internal error in RDB reading offset 0, function at rdb.c:529 -&gt; Unknown RDB string encoding type 25</em><br>2024-09-13_04:03:46.65352 [offset 0] Checking RDB file dump.rdb<br>2024-09-13_04:03:46.65353 [offset 27] AUX FIELD redis-ver = '7.0.15'<br>2024-09-13_04:03:46.65354 [offset 41] AUX FIELD redis-bits = '64'<br>2024-09-13_04:03:46.65355 [offset 53] AUX FIELD ctime = '1726102863'<br>2024-09-13_04:03:46.65356 [offset 68] AUX FIELD used-mem = '6292872'<br>2024-09-13_04:03:46.65357 [offset 80] AUX FIELD aof-base = '0'<br>2024-09-13_04:03:46.65357 [offset 82] Selecting DB ID 0<br>2024-09-13_04:03:46.65363 --- RDB ERROR DETECTED ---<br>2024-09-13_04:03:46.65365 [offset 719559] Internal error in RDB reading offset 0, function at rdb.c:529 -&gt; Unknown RDB string encoding type 25<br>2024-09-13_04:03:46.65365 [additional info] While doing: read-object-value<br>2024-09-13_04:03:46.65366 [additional info] Reading key 'cron_job:namespaces_process_outdated_namespace_descendants_cron_worker:enqueued'<br>2024-09-13_04:03:46.65367 [additional info] Reading type 5 (zset-v2)<br>2024-09-13_04:03:46.65367 [info] 3555 keys read<br>2024-09-13_04:03:46.65368 [info] 3439 expires<br>2024-09-13_04:03:46.65369 [info] 3405 already expired<br>2024-09-13_04:03:46.65369 25242:M 13 Sep 2024 04:03:46.653 <em># Terminating server after rdb file reading failure.</em><br>​</pre>



<p>从日志上看，是 dump.rdb 文件出了问题&#8230;</p>



<p>这个文件的具体路径是： <code>/var/opt/gitlab/redis/dump.rdb</code>，是个挂载到 LUN 上的路径&#8230;</p>



<p>Redis 作为内存数据库，会定期将数据库状态持久化到磁盘上，类似于保存快照，而载体正是这个 <code>dump.rdb</code> 文件。在 Redis 服务启动时，如果检测到存在 <code>dump.rdb</code> 文件，会自动加载文件中的数据。</p>



<p>估计是这次 LUN 的意外断连恰好发生在 rdb 文件的写入过程，导致数据损坏。</p>



<h3 class="wp-block-heading">解法</h3>



<p>要恢复损坏的 <code>dump.rdb</code>，性价比显然不太高。当下最优解法，应该是直接把这个文件删掉了。（已知代价是丢失会话信息，感觉还好）。</p>



<p>删掉 <code>dump.rdb</code>后，重启整个 Gitlab：</p>



<pre class="wp-block-preformatted">gitlab-ctl stop<br>gitlab-ctl start</pre>



<p>好，一切恢复！（至少重要的内容没感觉丢失&#8230;）</p>



<h3 class="wp-block-heading">小结一下</h3>



<p>类似 Gitlab 这种对数据持久化比较敏感的服务，把存储挂到 LUN 上确实多了一层风险，还不如在本地存储上多加一点投资。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>如何检查 Windows 有无遭受 RDP 入侵？</title>
		<link>https://blog.itcrafter.net/archives/177</link>
					<comments>https://blog.itcrafter.net/archives/177#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Sat, 29 Jun 2024 09:54:25 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[远程桌面]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=177</guid>

					<description><![CDATA[如何检查 Windows 有无遭受 RDP 入侵？ 1. Windows 远程桌面的入侵隐患 虽然 Micro ... <a title="如何检查 Windows 有无遭受 RDP 入侵？" class="read-more" href="https://blog.itcrafter.net/archives/177" aria-label="Read more about 如何检查 Windows 有无遭受 RDP 入侵？">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<p>如何检查 Windows 有无遭受 RDP 入侵？</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading">1. Windows 远程桌面的入侵隐患</h3>



<p>虽然 Microsoft 的 RDP （Remote Desktop Protocol）是专有的远程桌面协议，但不少开源项目已经通过逆向工程或者公开文档实现了与 RDP 兼容的功能。这使得通过 RDP 入侵 Windows 桌面成为一种可能。假如你习惯从公司或其他地方以 RDP 远程登录家里的 Windows 电脑，意味着你家的电脑已经面临着公网广泛存在的 RDP 入侵攻击…</p>



<p>防御攻击是一个大话题，而这里只告诉你：怎样检查自己的电脑有没受到可疑的 RDP 接入攻击。</p>



<p></p>



<h3 class="wp-block-heading">2. Windows 事件查看器</h3>



<p>Windows 其实为运行于其上的应用程序提供了全面的审计机制，当中自然也包括 RDP Service。审计入口是一个大多数用户不太关注的系统工具 &#8212; <strong>事件查看器</strong>。</p>



<p>对于 Win11，打开事件查看器的方法有：</p>



<ul class="wp-block-list">
<li>在任务栏 Win 图标上点击右键，在弹出菜单中打开：</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/06/667fcdf0391fc.png" alt="image-20240629170337247" style="width:123px;height:auto"/></figure>
</div>


<ul class="wp-block-list">
<li>或者，按下 Win+R 组合键，然后输入 eventvwr，按回车即可打开<strong>事件查看器</strong>。</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/06/667fce3a8ff9e.png" alt="image-20240629170458968" style="width:364px;height:auto"/></figure>
</div>


<p></p>



<h3 class="wp-block-heading">3. 打开 RDP 事件记录</h3>



<p>Windows 事件查看器提供了 RDP 接入的详细审计日志。在事件查看器左侧的导航树中，依次点开：</p>



<pre class="wp-block-preformatted">应用程序和服务日志 -&gt; Microsoft -&gt; Windows -&gt; RemoteDesktopServices-RdpCoreTS</pre>



<p>再点击展开的 Operational，即可在事件查看器中列出与 RDP 接入相关的详尽日志。（貌似精确到回调函数的调用）</p>



<p></p>



<h3 class="wp-block-heading">4. 检查接入事件</h3>



<p>怎样判断有无可疑的 RDP 接入信息呢？可以关注下 ID 131 的事件，通过事件筛选器可以将 ID 131 事件筛选出来：</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/06/667fd0b589b94.png" alt="image-20240629171531710"/></figure>
</div>


<p>ID 131 是指建立连接的事件，详情信息中列出了尝试远程登录你电脑的 RDP client 所在的 IP 和端口：</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/06/667fd2014c318.png" alt="image-20240629172105514"/></figure>
</div>


<p>检查一下 IP 的归属地，或许能让你看出公网环境的险恶…</p>



<p>Done.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/177/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Nginx 用自定义端口反向代理网站服务</title>
		<link>https://blog.itcrafter.net/archives/148</link>
					<comments>https://blog.itcrafter.net/archives/148#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Wed, 06 Mar 2024 17:37:26 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Nginx]]></category>
		<category><![CDATA[反向代理]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=148</guid>

					<description><![CDATA[在一台服务器上用 Nginx 反向代理多个网站服务是一种常见实践，常见做法是利用服务器上不同的端口来代理不同的 ... <a title="Nginx 用自定义端口反向代理网站服务" class="read-more" href="https://blog.itcrafter.net/archives/148" aria-label="Read more about Nginx 用自定义端口反向代理网站服务">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>在一台服务器上用 Nginx 反向代理多个网站服务是一种常见实践，常见做法是利用服务器上不同的端口来代理不同的网站服务。</p>



<p>但对于一些带有页面重定向的网站服务而言，在页面重定向/页面跳转时会丢失端口信息（比如 Gitlab 登录页面的跳转），进而影响网站服务的正常使用。</p>



<h3 class="wp-block-heading">问题描述</h3>



<p>举个简单例子，比如以下的 URL 反向代理了一套 Gitlab 服务：https://gitlab.mydomain.com:8877</p>



<p>在浏览器地址栏输入以上 URL 后，随即被重定向到：https://gitlab.mydomain.com/users/sign_in</p>



<p>也就是跳转到 https 的默认端口 443，自然无法正常访问到原先在 8877 端口反向代理的 Gitlab 页面：</p>



<figure class="wp-block-image"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/03/65e8a4077897f.png" alt="image-20240307011240614"/></figure>



<h2 class="wp-block-heading">如何解决</h2>



<p>首先，定位到 Nginx 的配置文件，一般位于 <code>/etc/nginx/nginx.conf</code> 。</p>



<p>然后在配置文件中找到反向代理的配置段，一般是以 <code>location /</code> 标记的内容块。在 <code>proxy_set_header Host</code> 字段中添加 <code>:$server_port</code> 内容，即可在页面重定向时带上自定义端口信息。</p>



<figure class="wp-block-image"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/03/65e8a71b506a3.png" alt="image-20240307012548193"/></figure>



<p>然后，重启 Nginx，即可顺利跳转到 Gitlab 的登录页面：</p>



<figure class="wp-block-image"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/03/65e8a7a5dc675.png" alt="image-20240307012807022"/></figure>



<p>OK.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/148/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Ubuntu 22.04 配置 XRDP 远程桌面</title>
		<link>https://blog.itcrafter.net/archives/122</link>
					<comments>https://blog.itcrafter.net/archives/122#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Mon, 05 Feb 2024 16:46:33 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[UBUNTU]]></category>
		<category><![CDATA[XRDP]]></category>
		<category><![CDATA[远程桌面]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=122</guid>

					<description><![CDATA[很多人部署 Ubuntu OS 都只是用作服务器，如果偶尔也有 GUI 需求，但又不想专门为此添置显示器，那么 ... <a title="Ubuntu 22.04 配置 XRDP 远程桌面" class="read-more" href="https://blog.itcrafter.net/archives/122" aria-label="Read more about Ubuntu 22.04 配置 XRDP 远程桌面">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>很多人部署 Ubuntu OS 都只是用作服务器，如果偶尔也有 GUI 需求，但又不想专门为此添置显示器，那么趁手的远程桌面工具就是不二之选了。</p>



<p>Ubuntu 的远程桌面方案，大致有如下几种：</p>



<ul class="wp-block-list">
<li><strong>Gnome 自带的远程功能</strong>：系统设置中自带的远程桌面功能，优点是简单易用。但因为属于用户服务，所以必须登录系统后才能远程接入，而且一旦触发锁屏还会断开桌面会话，比较鸡肋。</li>



<li><strong>VNC 协议</strong>：跨平台的远程接入协议，但性能比较差，体现在传输图像时延迟较高而帧率较低。</li>



<li><strong>XRDP 软件</strong>：基于 RDP 远程桌面协议的免费开源程序。安装 XRDP 后，可以通过 Windows 的远程桌面客户端（mstsc.exe）接入 Ubuntu，又或者在 Linux 中使用 Remmina 等客户端接入。而且 RDP 协议在传输图像时性能更高，延迟更低。</li>
</ul>



<p>所以对于无显示器的 Ubuntu OS，推荐使用 XRDP 作为远程接入的服务端。</p>



<p>下面是以 Ubuntu 22.04 为例的 XRDP 配置步骤（shell 命令行操作）：</p>



<h4 class="wp-block-heading">1. 更新软件列表：</h4>



<pre class="wp-block-code"><code><code>$ sudo apt update</code></code></pre>



<h4 class="wp-block-heading">2. 安装 XRDP</h4>



<pre class="wp-block-code"><code><code>$ sudo apt install xrdp</code></code></pre>



<h4 class="wp-block-heading">3. 设置防火墙端口通行</h4>



<p>XRDP 的默认端口是 3389，与 Windows 上的端口一样，需要设置防护墙放行：</p>



<pre class="wp-block-code"><code><code>$ sudo ufw allow 3389</code></code></pre>



<h2 class="wp-block-heading">4. 设置开机自启动</h2>



<p>一般来说，XRDP 在安装完成之后会自动启动。如果没有，可以配置一下：</p>



<pre class="wp-block-code"><code><code>$ sudo systemctl enable xrdp     # 设置开机自启动
$ sudo systemctl start xrdp     # 手动启动 XRDP</code></code></pre>



<h2 class="wp-block-heading">5. 完成，可远程接入</h2>



<p>在 Windows 上运行 mstsc.ext，输入上述安装了 XRDP 的计算机 IP，即可接入。</p>



<p>点击“连接”后，登录界面如下图所示：</p>



<figure class="wp-block-image"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/02/65c10d12ee95e.png" alt="image-20240206003003328"/></figure>



<p>输入 Ubuntu OS 的用户名和密码，便可登录桌面。</p>



<h2 class="wp-block-heading">注意</h2>



<ol class="wp-block-list">
<li>Ubuntu Desktop 版本默认的桌面环境是 GNOME；</li>



<li>Ubuntu Server 版本默认不安装桌面环境，所以远程接入后只显示一个 Terminal 窗口，如下：</li>
</ol>



<figure class="wp-block-image"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2024/02/65c10dd8a9dd4.png" alt="image-20240206003328169"/></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/122/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>在 Windows 中通过 WebDAV 映射网络驱动器</title>
		<link>https://blog.itcrafter.net/archives/113</link>
					<comments>https://blog.itcrafter.net/archives/113#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Sun, 26 Nov 2023 16:19:40 +0000</pubDate>
				<category><![CDATA[Tips]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=113</guid>

					<description><![CDATA[WebDAV 是一款基于 HTTP 的文件共享协议，支持通过广域网共享远程文件夹。而 Windows 的资源管 ... <a title="在 Windows 中通过 WebDAV 映射网络驱动器" class="read-more" href="https://blog.itcrafter.net/archives/113" aria-label="Read more about 在 Windows 中通过 WebDAV 映射网络驱动器">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>WebDAV 是一款基于 HTTP 的文件共享协议，支持通过广域网共享远程文件夹。而 Windows 的资源管理器也支持通过 WebDAV 映射网络驱动器。</p>



<p>下面介绍将 WebDAV 共享文件夹映射为网络驱动器的具体步骤。</p>



<h3 class="wp-block-heading">1. 准备好 WebDAV 文件服务器</h3>



<p>部署 WebDAV 服务端有许多方法，但首先要具备：</p>



<ol class="wp-block-list">
<li>一台有公网 IP 的计算机，作为文件服务器。一般的云服务厂商都可满足需求。而如果家庭宽带支持公网 IP，把闲置计算机拿来当服务器也挺划算（再部署个 DDNS 就 OK）；</li>



<li>域名。哪怕有固定 IP，也还是建议申请个域名，可以避免一部分安全风险。</li>
</ol>



<p>软件方面，Nginx、Apache 和 Microsoft IIS 等常用的 Web Server 软件都具备 WebDAV 服务端能力。一些 NAS 厂商也会提供专门的 WebDAV 服务端程序，比如 Synology 的 WebDAV Server。</p>



<p>WebDAV 文件服务器就绪之后，按照部署的情况，应该会得到形如以下格式的访问 URI：</p>



<pre class="wp-block-code"><code>http(s)://yourdomain.com:&#91;port]/&#91;path]</code></pre>



<p>其中，</p>



<ul class="wp-block-list">
<li>port：是 WebDAV 服务在 HTTP 或 HTTPS 上开放的端口；</li>



<li>path：是共享文件夹在文件服务器上的相应路径。</li>
</ul>



<h3 class="wp-block-heading">2. 在 Windows 中将 WebDAV 共享文件夹映射为驱动器</h3>



<p>以 Win11 为例，在资源管理器的“<strong>此电脑</strong>”界面上点击：</p>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/11/65635cdad0c1e.png" alt="image-20231126225725710" style="aspect-ratio:0.5087040618955513;width:197px;height:auto"/></figure>
</div>


<p>选好目标的驱动器标号后，在“<strong>文件夹</strong>”路径中输入上一步中的 URI，比如 <code>https://yourdomain.com:8443/folder</code></p>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/11/65635dc4cde2b.png" alt="image-20231126230126809" style="aspect-ratio:1.4195298372513563;width:487px;height:auto"/></figure>
</div>


<p>点击“<strong>完成</strong>”，在弹出的登录界面中，输入 WebDAV 服务端具备访问该共享文件夹的用户名和密码：</p>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/11/65635efd646ab.png" alt="image-20231126230639188" style="aspect-ratio:1.2925170068027212;width:398px;height:auto"/></figure>
</div>


<p>即完成 WebDAV 网络驱动器的映射，接下来就能像访问本地磁盘一样访问这个共享文件夹。</p>



<h3 class="wp-block-heading">3. 解决 WebDAV 文件拷贝限制 50 MB 的问题</h3>



<p>在 Windows 中，无论从 WebDAV 网络驱动器拷出还是拷入，当单个文件超过 50 MB 时都会遇到以下的 <strong>0x800700DF</strong> 报错：</p>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/11/6563613cc9c26.png" alt="image-20231126231614727" style="aspect-ratio:1.4675324675324675;width:474px;height:auto"/></figure>
</div>


<p>原因是 Windows 默认将 WebDAV 传输文件尺寸限制为 50 MB，需要修改注册表来放宽限制。</p>



<p>按下组合键“<strong>Win + R</strong>”，然后输入“<strong>regedit</strong>”打开注册表编辑器。</p>



<p>找到以下路径：HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters</p>



<p>将字段“<strong>FileSizeLimitInBytes</strong>”的值修改为 0xffffffff：</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/11/656362879e5b7.png" alt="image-20231126232145544"/></figure>
</div>


<p>也就是将单个文件的传输限制设置到 Windows 所支持的最大 4 GB。</p>



<p>最后一步，在<strong>任务管理器</strong>中重启“WebClient”服务：</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/11/656363d7e4c5f.png" alt="image-20231126232721737"/></figure>
</div>


<p>OK，至此即完成 WebDAV 网络驱动器的整个映射操作。</p>



<p>Enjoy it~!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/113/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>下载与安装 Qt 6.5</title>
		<link>https://blog.itcrafter.net/archives/110</link>
					<comments>https://blog.itcrafter.net/archives/110#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Sun, 26 Nov 2023 16:00:35 +0000</pubDate>
				<category><![CDATA[Qt]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=110</guid>

					<description><![CDATA[Qt 提供了两款图形界面工具来进行安装和配置： 除了图形化的 Qt Online Installer 和 Ma ... <a title="下载与安装 Qt 6.5" class="read-more" href="https://blog.itcrafter.net/archives/110" aria-label="Read more about 下载与安装 Qt 6.5">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>Qt 提供了两款图形界面工具来进行安装和配置：</p>



<ul class="wp-block-list">
<li>Qt Online Installer：用于进行在线的全新安装；</li>



<li>Maintenance Tool：包含在 Qt 安装包内，用于添加/删除组件。</li>
</ul>



<p>除了图形化的 Qt Online Installer 和 Maintenance Tool 工具以外，Qt 还提供了命令行工具，即无需用户交互即可完成安装与卸载。</p>



<p>以下主要介绍 Qt Online Installer 的安装步骤以及 Maintenance Tool 的配置方法。</p>



<h3 class="wp-block-heading">准备工作</h3>



<p>注册并登录 <a href="https://login.qt.io/">Qt Account</a>。</p>



<p>众所周知，Qt 是一款<strong>商业软件</strong>，但依然可以通过 OpenSource license 来免费学习 &amp; 使用 Qt。点击下图中的<a href="https://www.qt.io/download-open-source">链接</a>获取开源版 Qt：</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/6537db9338c9d.png" alt=""/></figure>



<p>值得注意的是，开源版 Qt 要求使用者遵循以下三款开源 licenses（之一）：</p>



<ul class="wp-block-list">
<li>LGPL v3</li>



<li>GPL v2</li>



<li>GPL v3</li>
</ul>



<p>开源版 Qt 其实还提供了源码编译的选项，能最大限度降低兼容性问题。但为简单起见，建议初次接触 Qt 的开发者直接采用 Qt Online Installer 或者 Maintenance Tool 来安装Qt。</p>



<h3 class="wp-block-heading">通过 Qt Online Installer 安装 Qt</h3>



<p>点击开源版说明页面的下载图标，或直接访问<a href="https://www.qt.io/download-qt-installer-oss?hsCtaTracking=99d9dd4f-5681-48d2-b096-470725510d34%7C074ddad0-fdef-4e53-8aa8-5e8a876d6ab4">下载页面</a>，即可下载 Qt Online Installer：</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/6537e2220641a.png" alt=""/></figure>



<p>然后选择所需的平台，目前提供了 macOS，Windows 和 Linux 三款主流平台的安装工具：</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/65391d224605b.png" alt=""/></figure>



<p>双击下载完成的 Qt Online Installer，进入安装流程。</p>



<p>按照界面提示依次登录账户，确认开源义务，确认安装目录和安装方式。如果选择默认的自定义安装方式，须自行选择所需的组件。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/653923fce364e.png" alt=""/></figure>



<p>无须纠结，后续可以通过 Maintenance Tool 添加/删除组件。另外，官网给出了不同应用场景下的安装选项建议：</p>



<figure class="wp-block-table aligncenter"><table><thead><tr><th>应用场景</th><th>安装选项</th></tr></thead><tbody><tr><td>桌面开发</td><td><em>desktop development</em> 选项。如须使用非默认的编译工具链，则选择 <em>Custom Installation</em>，然后选择所需的编译工具链。</td></tr><tr><td>移动设备</td><td><em>mobile development</em> 选项。如须针对特定平台进行开发，则选择 <em>Custom Installation</em>，然后选择对应的移动设备平台，比如 Qt for Android 或 Qt for iOS。</td></tr><tr><td>嵌入式设备</td><td><em>Custom Installation</em> 选项，然后从 Boot to Qt 中选择所需的 Qt modules 和编译工具链，视具体设备而定。</td></tr><tr><td>Android 车机</td><td><em>Custom Installation</em> 选项，然后选中 Qt for Android Automotive。</td></tr><tr><td>自动化领域</td><td><em>Custom Installation</em> 选项，然后从 Qt for Automation/Qt M2M Protocols 中选择所需的 Qt modules 和编译工具链，视具体设备而定。</td></tr><tr><td>MCUs</td><td><em>Custom Installation</em> 选项，选中 Qt for MCUs</td></tr></tbody></table></figure>



<p>以桌面开发 + Android 开发的 Qt 6.5.3 LTS 版本为例，再加上 Qt Design Studio 和 Qt Creator，空间占用需要 ~32 GB，有点猛 <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f641.png" alt="🙁" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/653923e44855e.png" alt=""/></figure>



<p>安装包的大小是 6.82 GB，水管不够大，得等个把小时&#8230;</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/6539255778817.png" alt=""/></figure>



<p>安装完成后，默认会打开 Qt Design Studio README 文件和 Qt Creator。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/653939e1359e8.png" alt=""/></figure>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/65393a20a300b.png" alt=""/></figure>



<p>大功告成。</p>



<h3 class="wp-block-heading">通过 Maintenance Tool 配置 Qt</h3>



<p>成功安装 Qt 之后，即可在安装路径下找到 Maintenance Tool 工具。与 Qt Online Installer 的界面和操作方式类似，通过 Maintenance Tool 也可以更新/添加/删除 Qt 组件。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/10/65393a8f84913.png" alt=""/></figure>



<p>Enjoy it~!</p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<p>参考链接：</p>



<ol class="wp-block-list">
<li><a href="https://doc.qt.io/qt-6.5/get-and-install-qt.html">Get and Install Qt</a></li>
</ol>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/110/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPress Block 编辑器基本操作</title>
		<link>https://blog.itcrafter.net/archives/5</link>
					<comments>https://blog.itcrafter.net/archives/5#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Wed, 06 Sep 2023 15:43:45 +0000</pubDate>
				<category><![CDATA[translation]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=5</guid>

					<description><![CDATA[对于 WordPress Block Editor（WordPress Block 编辑器）而言，block（ ... <a title="WordPress Block 编辑器基本操作" class="read-more" href="https://blog.itcrafter.net/archives/5" aria-label="Read more about WordPress Block 编辑器基本操作">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>对于 <strong>WordPress Block Editor</strong>（WordPress Block 编辑器）而言，<strong>block</strong>（区块）是所有内容的载体。WordPress 中的<strong>文章 (Post)</strong> 和<strong>页面 (Page)</strong> 均由各种 block 所组成。</p>



<p>WordPress Block 编辑器提供了各种类型的 <strong>block</strong>，让用户能够轻易在<strong>文章</strong>和<strong>页面</strong>中添加各种多媒体内容。用户通过简单的 block 布局调整即可打造出漂亮的页面。</p>



<p>WordPress Block 编辑器支持段落、图片、标题、图片墙等等多种 block 类型，几乎涵盖了全部常见的内容元素。而 WordPress 插件还能提供更多类型的 block。</p>



<h2 class="wp-block-heading">Block 解构</h2>



<p>举个简单的例子 &#8211; <strong>Heading block</strong>，如下图所示：</p>



<figure class="wp-block-image size-large is-resized has-custom-border is-style-default"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f35284aef78.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:555px;height:421px"/></figure>



<p>block 大致上包含三个部分：<strong>工具栏</strong>、<strong>内容</strong>和<strong>侧边栏</strong>。每个 block 都可以独立编辑或移动，不会影响<strong>文章</strong>/<strong>页面</strong>上的其它 block。</p>



<p>对于不同的 block，其工具栏的选项也有所不同。</p>



<p>block 的侧边栏面板主要用于格式配置，这些配置会影响 block 的布局和观感。</p>



<h2 class="wp-block-heading">如何添加 Block</h2>



<p>至少有 2 种添加 block 的方法：</p>



<ul class="wp-block-list">
<li>点击左上角的 &#8216;<strong>+</strong>&#8216; 号，如下图所示：</li>
</ul>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f356f5a9382.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:289px;height:52px"/></figure>



<ul class="wp-block-list">
<li>或者在正文区域，点击光标所在行最右侧的 &#8216;<strong>+</strong>&#8216; 号：</li>
</ul>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3577e312f9.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:362px;height:111px"/></figure>



<p>这两种添加方式都支持 search 功能，可快速找到所需添加的 block 类型。</p>



<h2 class="wp-block-heading">如何配置 Block</h2>



<p>每种类型的 block 都具备特定的工具集，用于设置其布局和外观。</p>



<h3 class="wp-block-heading">Block 工具栏</h3>



<p>选中一个 Block 即可激活相应的 <strong>block 工具栏</strong>。</p>



<p><strong>Block 工具栏</strong>包含了所选 block 的格式选项。如上文提及，不同类型的 block 所支持的格式选项有所不同。</p>



<p>以下是常用的选项介绍：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3e86d193cc.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:439px;height:181px"/></figure>



<h4 class="wp-block-heading">Transform 选项</h4>



<p>一般来说，Block 工具栏上的第一个按钮即是 Transform 选项。</p>



<p>该选项可将当前选中的 block 转换为其它 block 类型。</p>



<p>比如，在添加了 Paragraph block （段落区块）之后，可通过 Transform 选项将其转换为 Quote block（引用区块）、Heading block、List block（列表区块）或 Pullquote block（引用摘要区块）等等。</p>



<p>点击 Transform 选项即可在下拉菜单中选择所需的转换类型。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3ebcc86889.png" alt="" style="width:295px;height:319px"/></figure>



<p>（下拉菜单仅列出 block 本身所支持的转换类型）</p>



<p>执行 transform 操作时，<strong>原先的 block style （比如字体大小、字体颜色、背景颜色等等）会保留到新的 block 类型中</strong>。</p>



<p>除了 block style 之外，block 侧边栏的 Advanced 选项中的 Additional CSS class(es) 也会保留到新的 block 类型中。</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3efa6e469a.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:292px;height:334px"/></figure>



<h4 class="wp-block-heading">Drag 选项</h4>



<p>按住 drag 按钮并移动鼠标，即可将 block 移动到页面的其它位置。</p>



<h4 class="wp-block-heading">Move up/down 选项</h4>



<p>每点击一下这个箭头按钮，即可将 block 上移/下移一个位置。</p>



<h4 class="wp-block-heading">More Options 选项</h4>



<p>点击 More Options 按钮即弹出下拉菜单，将显示出更多选项可供配置。</p>



<h5 class="wp-block-heading">注意：</h5>



<p>如果在右上角设置中勾选了 [View &#8211; Top toolbar] ：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fa1bbbce6.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:372px;height:220px"/></figure>



<p>block 工具栏即固定到编辑器的顶部，如下图所示：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fad3317df.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:618px;height:46px"/></figure>



<h3 class="wp-block-heading">Block 设置</h3>



<p>选中一个 block 时，编辑器右侧的侧边栏上会显示更多的设置选项。</p>



<p>侧边栏既提供针对 block 的设置项，也提供针对<strong>文章</strong>/<strong>页面</strong>的设置项，可通过下图所示的选项卡进行切换：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fc00b3d30.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:268px;height:224px"/></figure>



<p>点击编辑器右上角的侧边栏按钮，可以切换显示/隐藏侧边栏。</p>



<p><strong>Post</strong> 设置页面提供了添加 tag、categories 等等设置项。这些设置往往会影响到整个<strong>文章</strong>页面。</p>



<p>而 Block 设置页面中的选项仅适用于当前选中的 block，每种 block 类型都有其各自适用的选项。</p>



<ul class="wp-block-list">
<li>诸如字体大小、字体颜色、背景颜色、边框、缩进等等，均在侧边栏的 block 设置页面中进行配置。</li>



<li>对于 图片、引用、社交图标等等 block，侧边栏还提供了 Styles 面板用于调整显示样式。把鼠标移到 style 配置项上即显示相应的简短说明。</li>



<li>每个配置面板均支持<strong>重置</strong>：</li>
</ul>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fefacaf59.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:243px;height:283px"/></figure>



<h2 class="wp-block-heading">如何锁定/解锁 Block</h2>



<p>锁定功能可以防止 block 被删除或被移动位置。通过 Block 工具栏的 Lock 选项进行配置：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f401e2f1a2b.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:531px;height:439px"/></figure>



<p>Lock 选项提供了两个配置：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f4027415120.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:405px;height:337px"/></figure>



<ul class="wp-block-list">
<li>Disable movement：禁止 block 移动位置；</li>



<li>Prevent removal：禁止删除这个 block；</li>
</ul>



<p>锁定之后，相应的 Block 工具栏会显示“上锁”的图标：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f402f2c9008.png" alt="image-20230903115218584" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:475px;height:46px"/></figure>



<p>重复上述步骤，在 More Options 下拉菜单里选择 <strong>Unlock</strong> 即可配置解锁。</p>



<h2 class="wp-block-heading">如何删除 Block</h2>



<p>选中需要删除的 block，在 More Options 下拉菜单中点击 <strong>Delete</strong> 或 <strong>Remove&#8230;</strong> 即可删除 block。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f40445a7284.png" alt="image-20230903115757438" style="width:303px;height:513px"/></figure>



<h2 class="wp-block-heading">怎样找到所需的 Block 类型或 Block Pattern</h2>



<p>WordPress Block editor 所提供的 Block 类型几乎支持网站上的所有页面元素。点击编辑器左上角的加号即可浏览这些 block 类型。</p>



<p>下拉菜单按照类别列出了可选的 Block 类型，或者可以直接在搜素栏里输入 Block 名称来快速搜寻。</p>



<p>一些主题还提供了 Block Pattern 可供直接使用。所谓 Block Pattern，即是将多种 Block 类型组合起来使用。</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f405b93df8a.png" alt="image-20230903120409007" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:374px;height:757px"/></figure>



<h2 class="wp-block-heading">Block 使用 tips </h2>



<h3 class="wp-block-heading">选中多个 block</h3>



<p>以下方式可以同时选中多个 block：</p>



<ul class="wp-block-list">
<li>Shift + 鼠标拖拽</li>



<li>Shift + 鼠标点击</li>



<li>Shift + 键盘方向键</li>
</ul>



<p>同时选中多个 block 之后，可以合并进行配置或者 Transform 等操作</p>



<h3 class="wp-block-heading">创建<strong>文章</strong>/<strong>页面</strong>链接</h3>



<p>编辑器支持创建链接指向已有的<strong>文章</strong>/<strong>页面</strong>，只须在 block 内容中输入 &#8216;[[&#8216; ，即可从弹出的菜单中选择可供链接的<strong>文章</strong>/<strong>页面</strong>。</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f407f16c79d.png" alt="image-20230903121337201" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:235px;height:159px"/></figure>



<p></p>



<p></p>



<p></p>



<p></p>



<p></p>


]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/5/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
