https://domal.cc/thinking/ 静坐自省，偶得心得 Hugo -- gohugo.io https://domal.cc/thinking/hugo%E5%90%8E%E7%AB%AF%E8%AE%BE%E6%83%B3---2/ Mon, 07 Sep 2026 22:17:00 +0800 https://domal.cc/thinking/hugo%E5%90%8E%E7%AB%AF%E8%AE%BE%E6%83%B3---2/ <p>又开始折腾了。在完成了 Windows 桌面客户端之后，我又有了新想法。</p>
<p>需求很纯粹：<strong>手机编辑内容 → 一键发布上线。</strong> 想法听着简单，但第一步就被卡住了——手机上无法直接运行 <code>hugo.exe</code>，而移植 Hugo 源码更是难上加难（这点我曾用 DeepSeek 求证过）。于是 DeepSeek 给了我两条现成的方案，先记录如下。</p>
<h2 id="方案-agithub-仓库--github-actions-自动构建发布推荐最省心">方案 A：GitHub 仓库 + GitHub Actions 自动构建发布（推荐，最省心）</h2>
<h3 id="原理">原理</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">手机（写/改 Markdown）→ push 到 GitHub 仓库
</span></span><span class="line"><span class="cl"> → GitHub Actions 检测到 push
</span></span><span class="line"><span class="cl"> → 自动跑 hugo 构建 public/
</span></span><span class="line"><span class="cl"> → 自动用 SSH/SFTP 上传到宝塔站点目录
</span></span></code></pre></div><h3 id="手机端需要什么">手机端需要什么</h3>
<ul>
<li>手机编辑器：<strong>GitHub 网页编辑</strong>、手机版 GitHub App，或任何<strong>支持 GitHub 同步的 Markdown 编辑器</strong>（如 Obsidian 手机版 + Git 插件）；</li>
<li>手机改完文件 → 提交 → push，发布全流程即告完成。</li>
</ul>
<h3 id="需要做的一次性配置">需要做的一次性配置</h3>
<ol>
<li>把博客源码推到一个 GitHub（私有）仓库；</li>
<li>在仓库里放一个 Actions 工作流文件（<code>.github/workflows/deploy.yml</code>），内容大致是：检出代码 → 安装 hugo → 执行 <code>hugo --minify</code> → 用 <code>scp/sftp</code> 上传到宝塔；</li>
<li>在 GitHub Secrets 中存放服务器 IP / 账号 / 私钥（<strong>无需把密码写进代码</strong>）。</li>
</ol>
<h3 id="优点">优点</h3>
<ul>
<li><strong>手机零开发</strong>：不动手写任何 App，用现成的 GitHub App / 网页编辑器即可；</li>
<li><strong>发布全自动</strong>：<code>push</code> 即发布，贴合"手机端写完即发"的需求；</li>
<li><strong>有版本历史</strong>：可回滚、可备份，心里踏实。</li>
</ul>
<h3 id="缺点">缺点</h3>
<ul>
<li>需要手机能访问 GitHub（国内网络可能要代理）；</li>
<li>用户需略懂 Git 概念（不过 GitHub 手机 App 的"提交"按钮已经足够简单）。</li>
</ul>
<blockquote>
<p>这本质上是把之前讨论过的「GitHub 中转 + 服务器构建」路线自动化了，前端发布动作完全不在手机端执行。</p> https://domal.cc/thinking/%E8%8D%92%E5%B2%9B%E6%95%91%E8%B5%8E%E5%BD%92%E8%88%AA%E4%B9%8B%E6%97%85/ Mon, 17 Aug 2026 23:28:00 +0800 https://domal.cc/thinking/%E8%8D%92%E5%B2%9B%E6%95%91%E8%B5%8E%E5%BD%92%E8%88%AA%E4%B9%8B%E6%97%85/ <h1 id="完整游戏剧情架构设计方案">完整游戏剧情&架构设计方案</h1>
<blockquote>
<p>类型：第三人称开放世界剧情向生存ARPG<br>
核心组合：男主 + 小女孩（固定主角组）<br>
单双人统一：单人模式下小女孩AI控制，双人模式下玩家B控制小女孩<br>
剧情目标：寻找失散的恋人 + 寻找小女孩的父母 + 离开孤岛
恋人定位：全程NPC（仅线索与回忆存在，实体未出现）</p>
</blockquote>
<hr>
<h2 id="一游戏核心总览">一、游戏核心总览</h2>
<h3 id="1-游戏定位">1. 游戏定位</h3>
<p>一款<strong>单人/双人均可</strong>的第三人称开放世界剧情向生存ARPG。融合情感羁绊、团队生存博弈、硬核动作狩猎与多分支剧情。单双人模式共享完全一致的主线剧情、目标与结局，仅在操作与互动方式上有差异化设计。</p>
<h3 id="2-核心主题">2. 核心主题</h3>
<p>绝境从不毁灭人心——真正的救赎，是在孤独中守护一份承诺，在绝望里点亮一盏希望。<br>
“哥哥，我们一起找到他们。”</p>
<h3 id="3-核心特色">3. 核心特色</h3>
<ul>
<li>
<p><strong>固定主角组</strong>：男主（25岁，Ethan 伊森） + 小女孩（约10岁，Mia 米娅），贯穿始终的羁绊核心</p>
</li>
<li>
<p><strong>双线寻人目标</strong>：寻找失踪的恋人（25岁，Joy 乔伊） + 寻找Mia的父母</p>
</li>
<li>
<p><strong>统一单双人剧情</strong>：单人AI小女孩，双人玩家B控制小女孩</p>
</li>
<li>
<p><strong>硬核生存规则</strong>：昼夜高危机制、强制归巢、动态天气、猛兽AI</p>
</li>
<li>
<p><strong>高自由开放世界</strong>：无缝地图，探索、建造、战斗、剧情一体化</p>
</li>
<li>
<p><strong>情感沉浸系统</strong>：记忆相机、希望值、恋人线索链、Mia成长曲线</p>
</li>
</ul>
<hr>
<h2 id="二世界观与背景">二、世界观与背景</h2>
<p>蔚蓝远洋，年轻情侣【男主】与【恋人】结束城市奔波，搭乘远洋轮渡开启蜜月旅行。同船有一位约10岁的米娅，她是海洋生物学家的女儿，随父母出海考察。<br>
甲板上，Mia的相机不慎掉落，Ethan飞身趁机抓住，避免了掉入海中的情况；三人因此结识，Mia亲切地喊“哥哥”“姐姐”，并一起拍下一张合影（成为关键道具）。<br>
轮渡行至海域禁区，毫无征兆的特级海上风暴骤然降临。黑云压海、暴雨倾盆、巨浪滔天，狂暴海风直接撕裂船体，轮渡瞬间解体倾覆。混乱的沉船灾难中，人群四散漂流，主角与恋人被巨浪强行冲散，彼此失联、生死未卜。
Ethan与Mia被冲上一座与世隔绝的无名孤岛。岛上白天静谧，夜晚黑雾笼罩，变异猛兽横行，天气变幻莫测。<br>
Ethan醒来后通过哭声寻找到Mia，Mia颤抖着说“哥哥，我怕……爸爸妈妈也不见了”。Ethan握住她的手：“别怕，我们一起找他们。”…</p>
<hr>
<h2 id="三完整主线剧情">三、完整主线剧情</h2>
<h3 id="序章骤雨失航陌路孤岛">序章：骤雨失航·陌路孤岛</h3>
<ul>
<li>
<p><strong>船上初遇CG</strong>：甲板上小女孩拍照，相机脱手，Ethan飞身接住。Mia甜甜道谢，恋人微笑轻声安抚小心。三人合影。</p>
</li>
<li>
<p><strong>海难CG</strong>：风暴中船体断裂，男主Ethan与恋人Joy被冲散。</p>
</li>
<li>
<p><strong>苏醒与相遇</strong>：Ethan在沙滩苏醒，循着哭声在附近礁石缝中找到Mia。</p>
</li>
<li>
<p><strong>新手引导</strong>：Mia用半块饼干分给Ethan，并拿出父亲留下的<strong>生存手册（残破）</strong>，帮助识别可食用植物、生火、找水源。</p>
</li>
<li>
<p><strong>首夜</strong>：简易草棚中，Mia问“姐姐和爸爸妈妈会没事吗？”Ethan说“一定会的，我们要坚强。”Mia点头，攥紧Ethan的衣角入睡。</p>
</li>
<li>
<p><strong>记忆相机</strong>：Mia的防水相机还能使用，拍下第一个场景“沙滩初营”，存入希望相册。</p>
</li>
<li>
<p><strong>初始技能</strong>：</p>
<ul>
<li>
<p>Mia：生存手册</p>
</li>
<li>
<p>Ethan：简单建筑技巧，搭建临时住所</p>
</li>
</ul>
</li>
</ul>
<h3 id="第一阶段沙滩扎根初聚人心">第一阶段：沙滩扎根·初聚人心</h3>
<ul>
<li>
<p><strong>区域</strong>：沙滩、近海浅滩 | <strong>猛兽</strong>：野狼、水鸟 | <strong>BOSS</strong>：狼群首领</p>
</li>
<li>
<p><strong>招募</strong>：厨师、女医生</p>
</li>
<li>
<p><strong>核心剧情</strong>：</p>
<ul>
<li>
<p>深夜狼群咬伤厨师，嘶吼声被Ethan听到之后，使用自制火把吓退狼群，救到了厨师。</p>
</li>
<li>
<p>女医生，被卡在礁石，三天没有吃喝，绝望之时，被Ethan、Mia救出。医生成为第二个被招募的成员，给被咬伤的厨师包扎伤口。</p>
</li>
<li>
<p>沙滩沉船残骸中Ethan发现<strong>恋人的发卡</strong>，Mia说“姐姐的……她还活着！”</p>
</li>
</ul>
</li>
<li>
<p><strong>技能解锁</strong>：</p>
<ul>
<li>
<p>战斗技巧：通过与狼群战斗发现狼群怕火，并识别野狼弱点（腰腹），标记敌人位置。</p>
</li>
<li>
<p>基础药物制作：用海边草药制作简易绷带。</p>
</li>
<li>
<p>食物解锁：通过补货海鱼和狼肉进行充饥。</p>
</li>
</ul>
</li>
</ul>
<h3 id="第二阶段拓荒密林矛盾初生">第二阶段：拓荒密林·矛盾初生</h3>
<ul>
<li>
<p><strong>区域</strong>：草原、阔叶密林 | <strong>猛兽</strong>：野猪、鬣狗、毒蛇、毒蛙 | <strong>BOSS</strong>：野猪王、鬣狗头领</p> https://domal.cc/thinking/%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E6%83%B3/ Wed, 12 Aug 2026 18:00:00 +0800 https://domal.cc/thinking/%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E6%83%B3/ <p>阿里技术大事记时间轴 Html 复刻方案</p>
<h1 id="html可视化时间轴复刻实践分享">HTML可视化时间轴复刻实践分享</h1>
<h2 id="一开发背景">一、开发背景</h2>
<p>偶然看到一款双层分流式技术大事记时间轴设计图，整体曲线脉络、上下分层事件卡片、竖排年份标注的视觉形式表现力很强，适合用来展示企业多年技术发展里程碑，于是决定使用原生 HTML/CSS/SVG 进行页面复刻。
本次复刻没有做到像素级一比一还原，但视觉结构、分层逻辑、矢量绘图核心效果已高度贴近原图，仍有细节优化空间。</p>
<p><img src="https://p11-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/10e40536619141a89e0c5a47fc93f760.png~tplv-a9rns2rl98-image-qvalue.image?lk3s=8e244e95&rcl=20260813145004D0DEFD984F0C6ACA93F1&rrcfp=1860f75c&x-expires=1787208604&x-signature=yk9IF6ByhAkzGsI9pbhdKBPpLoU%3D" alt="参考"></p>
<h2 id="二整体技术选型">二、整体技术选型</h2>
<p>整体采用<strong>无第三方依赖原生前端方案</strong>，轻量化、可直接在浏览器打开运行，适配大屏展示场景：</p>
<ol>
<li><strong>HTML5</strong>：语义化结构承载标题、年份事件卡片，划分上下两层事件轨道；</li>
<li><strong>CSS3</strong>：变量管理主题色、绝对定位布局、文字竖排、响应式横向滚动、多层元素层级控制；</li>
<li><strong>原生 SVG</strong>：绘制全部时间主线、分支连接线、节点圆点，矢量图形放大不失真；</li>
<li>不引入 JS、图片、外部样式表，所有逻辑与视觉全部内联在单文件中，打包、分发、使用更便捷。</li>
</ol>
<h2 id="三复刻过程中的核心难点与解决方案">三、复刻过程中的核心难点与解决方案</h2>
<h3 id="1-多层曲线时间脉络绘制svg难点">1. 多层曲线时间脉络绘制（SVG难点）</h3>
<h4 id="难点">难点</h4>
<p>原图时间轴并非单一直线，是多条交错弯折的折线路径，同时区分主视觉蓝线与灰色辅助线；每条年份节点需要垂直连线连接上下事件卡片，还要区分普通节点与终点标识圆点，手动编写路径坐标极易错位。</p>
<h4 id="解决方案">解决方案</h4>
<ul>
<li>分层编写 <code><path></code>，区分 <code>.blue</code> 主线、<code>.thin</code> 细蓝辅助线、<code>.grey</code> 灰色分层线，视觉层次和原图对齐；</li>
<li>统一规划节点坐标，先标记所有年份对应圆点位置，再批量编写垂直连接线，保证卡片和主线一一对应；</li>
<li>用两类 <code>circle</code> 区分普通节点与蓝色终点圆点，强化视觉收尾。</li>
</ul>
<h3 id="2-上下双层事件卡片定位排版">2. 上下双层事件卡片定位排版</h3>
<h4 id="难点-1">难点</h4>
<p>设计分为 <code>top</code> 上层、<code>bottom</code> 下层两条事件流，同年份可同时存在上下两条记录；所有卡片使用绝对定位，坐标偏移细微就会出现文字重叠、年份文字和主线脱节；竖排年份文字需要紧贴节点左侧，排版容错率极低。</p>
<h4 id="解决方案-1">解决方案</h4>
<ul>
<li>区分 <code>.entry.top</code> / <code>.entry.bottom</code> 两套定位规则，分别控制上下卡片距离主线的间距；</li>
<li>单独为竖排年份 <code>.year</code> 设置 <code>writing-mode: vertical-rl</code>，独立层级不遮挡正文；</li>
<li>多轮视觉校正微调 left、bottom/top 坐标，新增多组修正样式，避免卡片互相遮挡；</li>
<li>为不同长度文案的卡片设置差异化固定宽度，防止文字溢出错乱。</li>
</ul>
<h3 id="3-主题色彩统一管理与样式复用">3. 主题色彩统一管理与样式复用</h3>
<h4 id="难点-2">难点</h4>
<p>页面多处复用深蓝主色、浅蓝标注色、灰色辅助线，分散写颜色值后期修改成本极高；页面包含标题、年份、正文、标记文字多种字号，样式零散难以维护。</p>
<h4 id="解决方案-2">解决方案</h4>
<ul>
<li>使用 CSS <code>:root</code> 定义全局颜色变量 <code>--blue</code>/<code>--sky</code>/<code>--ink</code>/<code>--line</code>，全局一处修改即可更换整套配色；</li>
<li>统一封装 <code>.mark</code> 标记类，用于突出飞天FT3等核心项目标识；</li>
<li>层级分层控制 z-index：SVG底层曲线 → 年份文字层 → 事件卡片正文，解决元素遮挡问题。</li>
</ul>
<h3 id="4-宽幅画布适配与滚动兼容">4. 宽幅画布适配与滚动兼容</h3>
<h4 id="难点-3">难点</h4>
<p>完整时间轴画布宽度超过常规屏幕尺寸，直接展示会裁切右侧年份事件；窄屏设备无法完整浏览全部时间线。</p> https://domal.cc/thinking/hugo%E5%90%8E%E7%AB%AF%E8%AE%BE%E6%83%B3/ Sun, 09 Aug 2026 09:00:00 +0800 https://domal.cc/thinking/hugo%E5%90%8E%E7%AB%AF%E8%AE%BE%E6%83%B3/ <p>记录一款面向 Hugo 内容管理者的 Windows 桌面客户端。</p>
<h1 id="一切的起点hugo-很好但发布太痛了">一切的起点：Hugo 很好，但“发布”太痛了</h1>
<p>我使用 Hugo 搭建个人博客已经很长时间了。坦白说，Hugo 本身作为静态站点生成器，速度快、生态好、主题丰富，几乎无可挑剔。</p>
<p>但有一个环节，始终让我如鲠在喉——<strong>发布上线</strong>。</p>
<p>每一次写完文章，我需要经历的是：</p>
<ul>
<li>打开命令行，cd 到站点目录；</li>
<li>执行 <code>hugo</code> 构建，生成 <code>public/</code> 目录；</li>
<li>打开 FTP/SFTP 客户端，连接到服务器；</li>
<li>手动找到远程网站根目录（比如宝塔面板的 <code>/www/wwwroot/xxx</code>）；</li>
<li>将本地 <code>public/</code> 目录里的文件，一个一个上传覆盖；</li>
<li>刷新浏览器，确认上线。</li>
</ul>
<p>如果只是偶尔写一篇，倒也还能忍。但当你需要频繁更新、修正错别字、调整排版时，这套流程的<strong>重复成本</strong>就会急剧放大。更别提有时候 SFTP 客户端连接超时、文件漏传、目录搞错——每一步都藏着让人抓狂的细节。</p>
<p>我也尝试过 Git + GitHub Actions 或 Webhook 的自动化方案，但坦白说，<strong>配置门槛同样不低</strong>：要在服务器上建 bare 仓库、配置 post-receive hook、设置权限……对于只想安静写点东西的博主来说，这显然是过度工程。</p>
<p><strong>转折</strong>忘了具体哪天，我偶然刷到一款叫“一言”的 APP——它的核心功能非常简单：用户在手机端写下几句话，点击发布，内容就会立即出现在个人页面上。没有复杂的后台配置，没有“部署”这个概念，用户感知到的只有一个动作：<strong>写，然后它就上线了</strong>。</p>
<p>这个极简体验给了我很大的触动。</p>
<p>我在想：<strong>Hugo 博客能不能也做到这样？</strong></p>
<p>能不能有一个界面，用户只负责：</p>
<ul>
<li>在本地打开一个编辑器；</li>
<li>写 Markdown；</li>
<li>点击一个按钮；</li>
</ul>
<p>然后剩下的所有事情（保存文件、调用 Hugo 构建、通过 SSH/SFTP 上传到宝塔面板的网站目录）全部由工具自动完成？</p>
<p>有想法了，也有目标了，说搞就搞。开始借助AI帮我整理思路，以及项目规划。</p>
<h2 id="一项目全景与核心目标">一、项目全景与核心目标</h2>
<h3 id="11-我的项目定位">1.1 我的项目定位</h3>
<p>一款面向 Hugo 内容管理者的 Windows 桌面客户端（C# + WPF），让使用者<strong>无需接触命令行</strong>，在图形界面中完成：</p>