[{"content":"获取 Token Umami 是有 API 的 (API Reference)\n但是这玩意需要账号密码才能访问，不过账号密码也是用来拿 Token 的，所以我们直接拿 Token 就行了\n这个 Token 无论如何都要在前端使用的，所以直接拿得了🫠\n回头看看写个后端把这玩意封装一下\n打开 Umami 后台，打开一个网页概览，随便找一个 /api/ 结尾的请求\n在请求标头里找到 Authorization copy下来之后替换掉后面代码中的 :authorization\n浏览量、访客、访问次数 文档：GET /api/websites/:websiteId/stats\n打开 params.toml，在 [footer] 的 customText 中添加以下内容\n1 \u0026lt;span id=\u0026#34;visit-info\u0026#34;\u0026gt;\u0026lt;/span\u0026gt; layouts\\partials\\footer\\custom.html\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 \u0026lt;!-- 浏览量、访客、访问次数 --\u0026gt; \u0026lt;script\u0026gt; (async () =\u0026gt; { const spanElement = document.getElementById(\u0026#39;visit-info\u0026#39;) let pageviews = 0 let visitors = 0 let visits = 0 const endOfDay = new Date() endOfDay.setHours(23, 59, 59, 999) const endAt = endOfDay.getTime() const headers = { \u0026#39;authorization\u0026#39;: \u0026#39;:authorization\u0026#39; } try { const res = await fetch(`https://umami.trrw.tech/api/websites/:websiteId/stats?startAt=:startAt\u0026amp;endAt=${endAt}\u0026amp;unit=day\u0026amp;timezone=Asia%2FShanghai`, { headers: headers }) const viewsData = await res.json() pageviews = viewsData.pageviews || 0 visitors = viewsData.visitors || 0 visits = viewsData.visits || 0 } finally { spanElement.innerText = `浏览量${pageviews} · 访客${visitors} · 访问次数${visits}` } })() \u0026lt;/script\u0026gt; 获取 :websiteId\n:startAt 可以在后台把时间调成 所有时间段 后找到这个stats请求来获得\n最终效果\n文章浏览量 文档：GET /api/websites/:websiteId/metrics/expanded\nlayouts\\partials\\article\\components\\details.html\n1 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 \u0026lt;div class=\u0026#34;article-details\u0026#34;\u0026gt; {{ if .Params.categories }} \u0026lt;header class=\u0026#34;article-category\u0026#34;\u0026gt; {{ range (.GetTerms \u0026#34;categories\u0026#34;) }} \u0026lt;a href=\u0026#34;{{ .RelPermalink }}\u0026#34; {{ with .Params.style }}style=\u0026#34;background-color: {{ .background }}; color: {{ .color }};\u0026#34;{{ end }}\u0026gt; {{ .LinkTitle }} \u0026lt;/a\u0026gt; {{ end }} \u0026lt;/header\u0026gt; {{ end }} \u0026lt;div class=\u0026#34;article-title-wrapper\u0026#34;\u0026gt; \u0026lt;h2 class=\u0026#34;article-title\u0026#34;\u0026gt; \u0026lt;a href=\u0026#34;{{ .RelPermalink }}\u0026#34;\u0026gt; {{- .Title -}} \u0026lt;/a\u0026gt; \u0026lt;/h2\u0026gt; {{ with .Params.description }} \u0026lt;h3 class=\u0026#34;article-subtitle\u0026#34;\u0026gt; {{ . }} \u0026lt;/h3\u0026gt; {{ end }} \u0026lt;/div\u0026gt; {{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }} {{ $showDate := not .Date.IsZero }} {{ $showFooter := or $showDate $showReadingTime }} {{ if $showFooter }} \u0026lt;footer class=\u0026#34;article-time\u0026#34;\u0026gt; {{ if $showDate }} \u0026lt;div\u0026gt; {{ partial \u0026#34;helper/icon\u0026#34; \u0026#34;date\u0026#34; }} \u0026lt;time class=\u0026#34;article-time--published\u0026#34; datetime=\u0026#39;{{ .Date.Format \u0026#34;2006-01-02T15:04:05Z07:00\u0026#34; }}\u0026#39;\u0026gt; {{- .Date | time.Format (or .Site.Params.dateFormat.published \u0026#34;Jan 02, 2006\u0026#34;) -}} \u0026lt;/time\u0026gt; \u0026lt;/div\u0026gt; {{ end }} {{ if $showReadingTime }} \u0026lt;div\u0026gt; {{ partial \u0026#34;helper/icon\u0026#34; \u0026#34;clock\u0026#34; }} \u0026lt;time class=\u0026#34;article-time--reading\u0026#34;\u0026gt; {{ T \u0026#34;article.readingTime\u0026#34; .ReadingTime }} \u0026lt;/time\u0026gt; \u0026lt;/div\u0026gt; {{ end }} \u0026lt;!-- 这里是新增的，其余都是主题原本的功能 --\u0026gt; \u0026lt;!-- 浏览量 --\u0026gt; \u0026lt;div\u0026gt; {{ partial \u0026#34;helper/icon\u0026#34; \u0026#34;read\u0026#34; }} \u0026lt;time class=\u0026#34;article-analysic\u0026#34; data-path=\u0026#34;{{ .RelPermalink }}\u0026#34;\u0026gt; 0 阅读 \u0026lt;/time\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;!-- ⬆️⬆️⬆️ --\u0026gt; \u0026lt;/footer\u0026gt; {{ end }} {{ if .IsTranslated }} \u0026lt;footer class=\u0026#34;article-translations\u0026#34;\u0026gt; {{ partial \u0026#34;helper/icon\u0026#34; \u0026#34;language\u0026#34; }} \u0026lt;div\u0026gt; {{ range .Translations }} \u0026lt;a href=\u0026#34;{{ .Permalink }}\u0026#34; class=\u0026#34;link\u0026#34;\u0026gt;{{ .Language.LanguageName }}\u0026lt;/a\u0026gt; {{ end }} \u0026lt;/div\u0026gt; \u0026lt;/footer\u0026gt; {{ end }} \u0026lt;/div\u0026gt; 这里 {{ partial \u0026quot;helper/icon\u0026quot; \u0026quot;read\u0026quot; }} 是对应的 assets/icons 下的svg，这里就是 assets/icons/read.svg\n这里贴一下svg代码，省的找了\n1 2 3 4 5 6 7 \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; width=\u0026#34;24\u0026#34; height=\u0026#34;24\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; fill=\u0026#34;none\u0026#34; stroke=\u0026#34;currentColor\u0026#34; stroke-width=\u0026#34;2\u0026#34; stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; class=\u0026#34;icon icon-tabler icons-tabler-outline icon-tabler-eye\u0026#34;\u0026gt; \u0026lt;path stroke=\u0026#34;none\u0026#34; d=\u0026#34;M0 0h24v24H0z\u0026#34; fill=\u0026#34;none\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;M2 12s3 -7 10 -7s10 7 10 7s-3 7 -10 7s-10 -7 -10 -7\u0026#34; /\u0026gt; \u0026lt;circle cx=\u0026#34;12\u0026#34; cy=\u0026#34;12\u0026#34; r=\u0026#34;2\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; layouts\\partials\\footer\\custom.html\n1 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 \u0026lt;!-- 文章浏览量 --\u0026gt; \u0026lt;script\u0026gt; (async () =\u0026gt; { const els = document.querySelectorAll(\u0026#39;.article-analysic\u0026#39;) if (!els.length) return const endOfDay = new Date() endOfDay.setHours(23, 59, 59, 999) const endAt = endOfDay.getTime() const headers = { \u0026#39;authorization\u0026#39;: \u0026#39;:authorization\u0026#39; } for (const el of els) { const search = el.dataset.path || \u0026#39;/\u0026#39; let pageviews = 0 try { const res = await fetch(`https://umami.trrw.tech/api/websites/:websiteId/metrics/expanded?startAt=:startAt\u0026amp;endAt=${endAt}\u0026amp;unit=day\u0026amp;timezone=Asia%2FShanghai\u0026amp;search=${search}\u0026amp;type=path`, { headers: headers }) const data = await res.json() if (Array.isArray(data) \u0026amp;\u0026amp; data.length \u0026gt; 0) pageviews = data[0].pageviews || 0 } finally { el.textContent = `${pageviews} 阅读` } } })() \u0026lt;/script\u0026gt; 最终效果\n附录 参考文献 Umami API Reference 文章封面 文章封面\n","date":"2025-12-06T23:56:40+08:00","image":"https://www.trrw.tech/p/%E9%80%9A%E8%BF%87umami%E5%AE%9E%E7%8E%B0%E8%AE%BF%E5%AE%A2%E6%95%B0%E6%B5%8F%E8%A7%88%E9%87%8F/cover.webp","permalink":"https://www.trrw.tech/p/%E9%80%9A%E8%BF%87umami%E5%AE%9E%E7%8E%B0%E8%AE%BF%E5%AE%A2%E6%95%B0%E6%B5%8F%E8%A7%88%E9%87%8F/","title":"通过Umami实现访客数、浏览量"},{"content":"前言 这篇文章只是简单修改了下 Waline 的配色以及 a 标签的样式\n可以先参考 「建站技术 | 使博客更好地接入 Waline」 配置好 Waline\nWaline 美化 assets\\scss\\custom.scss\n1 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 // Waline :root { --waline-theme-color: var(--accent-color) !important; --waline-active-color: var(--accent-color-darker) !important; } .wl-panel { border-radius: var(--card-border-radius) !important; } .wl-action:first-child { display: none; } .wl-content a { text-decoration: none; box-shadow: 0 -2px rgba(var(--link-background-color), var(--link-background-opacity)) inset; transition: all .3s ease; \u0026amp;:hover { color: var(--waline-theme-color) !important; box-shadow: 0 calc(-1rem * 2.2) rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset; } } .wl-header-item input { color: var(--card-text-color-secondary); font-size: .75em !important; } 比较难绷的是如果你的标题只是 waline 的话，会因为 id=\u0026ldquo;waline\u0026rdquo; 而把评论显示在标题位置\n附录 参考文献 建站技术 | 使博客更好地接入 Waline 文章封面 遙@RSyaooooo\n","date":"2025-10-22T17:24:14+08:00","image":"https://www.trrw.tech/p/stack-%E4%B8%BB%E9%A2%98%E4%B8%8B-waline-%E7%BE%8E%E5%8C%96/cover.webp","permalink":"https://www.trrw.tech/p/stack-%E4%B8%BB%E9%A2%98%E4%B8%8B-waline-%E7%BE%8E%E5%8C%96/","title":"Stack 主题下 Waline 美化"},{"content":"前言 Stack默认的友链是一行一个，友链一多就会导致页面很长，影响美观。\n本来是准备参考 「建站技术 | 我的链接页面是如何实现的？」 这篇来设置成三列的，但是其HTML文件的内容给的不是很完整，导致完全不熟悉Hugo语法的我没法成功复现，所以就来记录一下。\n代码 SCSS assets\\scss\\custom.scss\n1 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 //链接页面//链接页面 @media (min-width: 1024px) { .article-list--compact.links { display: grid; grid-template-columns: 1fr 1fr 1fr; background: none; box-shadow: none; article { background: var(--card-background); border: none; box-shadow: var(--shadow-l2); margin-bottom: 8px; border-radius: 10px; transition: transform .2s; \u0026amp;:not(:nth-child(3n)) { margin-right: 8px; } // 添加hover效果 \u0026amp;:hover { transform: translateY(-3px); box-shadow: var(--shadow-l3); } } } } .article-list--title { color: var(--accent-color); font-weight: 700; font-size: 1.6rem; margin-left: 10px; } .article-list--compact.links { // 缩小连接组标题与下面链接的距离 margin-top: -20px; } .article-image\u0026gt;img { // 给文章卡片、友链卡片等的图标添加圆角 border-radius: 10px; } .section-image\u0026gt;img { // 给categories的图标添加圆角 object-fit: cover; border-radius: 10px; } 这里由于我用不到原博主的 badge 功能，所以将那一部分删掉了，并将所有卡片的图标都添加了圆角\n给卡片添加了鼠标悬浮动画\nJSON data\\links.json\n1 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 [ { \u0026#34;title\u0026#34;: \u0026#34;我的网站\u0026#34;, \u0026#34;links\u0026#34;: [ { \u0026#34;title\u0026#34;: \u0026#34;Trrrrw\u0026#39;s Blog\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;Spending a lifetime to taste the love and pain\u0026#34;, \u0026#34;website\u0026#34;: \u0026#34;https://www.trrw.tech/\u0026#34;, \u0026#34;image\u0026#34;: \u0026#34;https://www.trrw.tech/favicon.webp\u0026#34; }, { \u0026#34;title\u0026#34;: \u0026#34;影像档案架\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;整合原神、崩铁、绝区零的官网视频\u0026#34;, \u0026#34;website\u0026#34;: \u0026#34;https://hoyo-video.trrw.tech/\u0026#34;, \u0026#34;image\u0026#34;: \u0026#34;https://hoyo-video.trrw.tech/pwa@1024.png\u0026#34; } ] }, { \u0026#34;title\u0026#34;: \u0026#34;友链\u0026#34;, \u0026#34;links\u0026#34;: [ { \u0026#34;title\u0026#34;: \u0026#34;唯知笔记\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;探索知识的无限可能\u0026#34;, \u0026#34;website\u0026#34;: \u0026#34;https://note.weizwz.com\u0026#34;, \u0026#34;image\u0026#34;: \u0026#34;https://p.weizwz.com/logo_a4353391cbf0889b.webp\u0026#34; }, { \u0026#34;title\u0026#34;: \u0026#34;失迹の博客\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;猫与茶与代码与你：一位 编程 / 设计 / ACGN 爱好者的博客。\u0026#34;, \u0026#34;website\u0026#34;: \u0026#34;https://blog.reincarnatey.net/\u0026#34;, \u0026#34;image\u0026#34;: \u0026#34;https://npm.elemecdn.com/@mitr-yuzr/vno-dmego-yuzr@latest/assets/img/headimg.png\u0026#34; } ] } ] 这里的图片可以是链接，也可以是本地图片，起始路径是 content\\page\\links\nHTML layouts\\page\\links.html\n1 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 {{ define \u0026#34;body-class\u0026#34; }}article-page keep-sidebar{{ end }} {{ define \u0026#34;main\u0026#34; }} {{ partial \u0026#34;article/article.html\u0026#34; . }} {{ range $i, $category := $.Site.Data.links }} \u0026lt;span class=\u0026#34;article-list--title\u0026#34;\u0026gt;{{ $category.title }}\u0026lt;/span\u0026gt; \u0026lt;div class=\u0026#34;article-list--compact links\u0026#34;\u0026gt; {{ $siteResources := resources }} {{ range $i, $link := $category.links }} \u0026lt;article\u0026gt; \u0026lt;a href=\u0026#34;{{ $link.website }}\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;article-details\u0026#34;\u0026gt; \u0026lt;h2 class=\u0026#34;article-title\u0026#34;\u0026gt; {{- $link.title -}} \u0026lt;/h2\u0026gt; \u0026lt;footer class=\u0026#34;article-time\u0026#34;\u0026gt; {{ with $link.description }} {{ . }} {{ else }} {{ $link.website }} {{ end }} \u0026lt;/footer\u0026gt; \u0026lt;/div\u0026gt; {{ if $link.image }} \u0026lt;div class=\u0026#34;article-image\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;{{ $link.image }}\u0026#34; loading=\u0026#34;lazy\u0026#34; data-key=\u0026#34;links-{{ $link.website }}\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; {{ end }} \u0026lt;/a\u0026gt; \u0026lt;/article\u0026gt; {{ end }} \u0026lt;/div\u0026gt; {{ end }} {{ if not (eq .Params.comments false) }} {{ partial \u0026#34;comments/include\u0026#34; . }} {{ end }} {{ partialCached \u0026#34;footer/footer\u0026#34; . }} {{ end }} 因为我的习惯是直接使用友链网站的图片链接，所以这里把 \u0026lt;img\u0026gt; 的 src 直接设置成了json中的image参数。\n最终效果 附录 参考文献 建站技术 | 我的链接页面是如何实现的？ Hugo Stack 主题装修笔记 Part 2 文章封面 Skirk\n","date":"2025-06-24T21:05:33+08:00","image":"https://www.trrw.tech/p/stack%E4%B8%BB%E9%A2%98%E5%8F%8B%E9%93%BE%E7%AD%89%E9%A1%B5%E9%9D%A2%E7%BE%8E%E5%8C%96/cover.webp","permalink":"https://www.trrw.tech/p/stack%E4%B8%BB%E9%A2%98%E5%8F%8B%E9%93%BE%E7%AD%89%E9%A1%B5%E9%9D%A2%E7%BE%8E%E5%8C%96/","title":"Stack主题友链等页面美化"},{"content":"添加环境变量 在你的 Vercel 中的 Waline 的 Project 中添加环境变量：\n环境变量 描述 SC_KEY Server 酱提供的 Token，必填 AUTHOR_EMAIL 博主邮箱，用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知 SITE_NAME 网站名称，用于在消息中显示 SITE_URL 网站地址，用于在消息中显示 SC_TEMPLATE Server酱 使用的通知模板，变量与具体格式可参见 Waline文档 的通知模板。未配置则使用默认模板 添加推送代码 按理说这样设置之后就可以正常推送了，而且文档中就是这样写的，但实际是，即使设置了环境变量，也无法正常推送。\n此时打开你 Waline 对应的 Github 仓库，打开根目录下的 index.cjs 文件，在其中添加以下代码：\n1 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 104 105 106 const Application = require(\u0026#39;@waline/vercel\u0026#39;); const FormData = require(\u0026#39;form-data\u0026#39;); const fetch = require(\u0026#39;node-fetch\u0026#39;); module.exports = Application({ plugins: [], async postSave(comment) { // do what ever you want after comment saved console.log(\u0026#39;New comment received:\u0026#39;, comment); // 获取环境变量 const { SC_KEY, SITE_NAME, SITE_URL, PUSH_PLUS_KEY } = process.env; // 准备数据 const data = { self: comment, site: { name: SITE_NAME || \u0026#39;Default Site Name\u0026#39;, url: SITE_URL || \u0026#39;https://default.site.url\u0026#39;, postUrl: (SITE_URL || \u0026#39;https://default.site.url\u0026#39;) + comment.url + \u0026#39;#\u0026#39; + comment.objectId, }, }; const contentTemplate = ` 💬 LengM ---------------------------- 评论页面: ${data.site.postUrl} 评论内容: ${data.self.comment} 评论者昵称: ${data.self.nick} 评论者邮箱: ${data.self.mail || \u0026#39;未提供\u0026#39;} IP 地址: ${data.self.ip || \u0026#39;未知\u0026#39;} 评论时间: ${new Date(data.self.createdAt).toLocaleString()} 浏览器信息: ${data.self.ua || \u0026#39;未知\u0026#39;} `; const title = `LengM - 新评论通知`; let success = false; // Server酱通知 if (SC_KEY) { const form = new FormData(); form.append(\u0026#39;text\u0026#39;, title); form.append(\u0026#39;desp\u0026#39;, contentTemplate); try { const response = await fetch(`https://sctapi.ftqq.com/${SC_KEY}.send`, { method: \u0026#39;POST\u0026#39;, headers: form.getHeaders(), body: form, }); const result = await response.json(); if (response.ok \u0026amp;\u0026amp; result.code === 0) { console.log(\u0026#39;Server酱通知成功:\u0026#39;, result); success = true; } else { console.error(\u0026#39;Server酱通知失败:\u0026#39;, result); } } catch (error) { console.error(\u0026#39;Error sending Server酱 notification:\u0026#39;, error.message); } } else { console.error(\u0026#39;SC_KEY not defined in environment variables.\u0026#39;); } // PushPlus通知 if (PUSH_PLUS_KEY) { try { const pushplusResponse = await fetch(\u0026#39;http://www.pushplus.plus/send/\u0026#39;, { method: \u0026#39;POST\u0026#39;, headers: { \u0026#39;Content-Type\u0026#39;: \u0026#39;application/x-www-form-urlencoded\u0026#39;, }, body: `token=${PUSH_PLUS_KEY}\u0026amp;title=${encodeURIComponent(title)}\u0026amp;content=${encodeURIComponent(contentTemplate)}\u0026amp;template=html`, }); const pushplusResult = await pushplusResponse.json(); if (pushplusResponse.ok \u0026amp;\u0026amp; pushplusResult.code === 200) { console.log(\u0026#39;PushPlus通知成功:\u0026#39;, pushplusResult); success = true; } else { console.error(\u0026#39;PushPlus通知失败:\u0026#39;, pushplusResult); } } catch (error) { console.error(\u0026#39;Error sending PushPlus notification:\u0026#39;, error.message); } } else { console.error(\u0026#39;PUSH_PLUS_KEY not defined in environment variables.\u0026#39;); } // 检查是否有任何通知成功 if (!success) { console.error(\u0026#39;两种通知方式均失败。\u0026#39;); return false; } }, }); 可以修改 contentTemplate 的值来自定义通知的内容。 将文件更新到 Github 之后 Vercel 会自动部署，等待部署完成就可以正常推送了。\n附录 参考文献 Waline 文档-评论通知 walinejs/waline/issues/2828 文章封面 松雀\u0026amp;觉姨\n","date":"2025-06-03T00:11:56+08:00","image":"https://www.trrw.tech/p/waline%E8%AF%84%E8%AE%BA%E9%85%8D%E7%BD%AEserver%E9%85%B1%E9%80%9A%E7%9F%A5/cover.webp","permalink":"https://www.trrw.tech/p/waline%E8%AF%84%E8%AE%BA%E9%85%8D%E7%BD%AEserver%E9%85%B1%E9%80%9A%E7%9F%A5/","title":"Waline评论配置Server酱通知"},{"content":"前言 前段时间从VSCode换到了字节的Trae，发现超级好用。于是就把Clion和VSCode都卸载了，但是Trae没法安装VSCode的C/C++插件，所以就研究了一下怎么在Trae中使用MSVC+CMake+Clang-Format来写C/C++代码\nMSVC 前往 Visual Studio 下载页面，不要下载 VS2022，往下翻，在 用于Visual Studio的工具 中有个 Visual Studio 2022 生成工具，点击右侧的下载\n下载完成后安装，在开始菜单中找到 Visual Studio Installer，点击打开 可以先在 安装位置 处修改 MSVC 的安装位置\n接着在 单个组件 中勾选 Windows 11 SDK 和 MSVC v143 - VS 2022 C++ x64/x86 生成工具(最新)：\n最后点击右下角的安装\nCmake 见 Windows11上配置C、C++环境\nClang-Format 由于Trae使用的是open-vsx的镜像作为市场，其中没有 C/C++ 这个插件\n所以想要格式化代码，需要使用 Clang-Format 这个插件\n在下载插件前，需要先 下载 Clang-Format\n藏的真深🫠\n最后安装 Clang-Format 插件\n新建项目 新建一个文件夹，在其中创建 CMakeLists.txt 和 main.cpp 文件\n1 2 3 4 5 6 7 8 # CMakeLists.txt cmake_minimum_required(VERSION 4.0) # 该项目所需的CMake最低版本 project(test) # 项目名称 set(CMAKE_CXX_STANDARD 26) # 使用的C++标准 add_executable(test main.cpp) # 生成可执行文件: \u0026#34;test.exe\u0026#34; 1 2 3 4 5 6 7 8 9 // main.cpp #include \u0026lt;iostream\u0026gt; using namespace std; int main() { cout \u0026lt;\u0026lt; \u0026#34;Hello, World!\u0026#34; \u0026lt;\u0026lt; endl; return 0; } 用 vscode 或者 Trae 打开这个文件夹，此时 CMake 插件 应该会自动弹出 选择工具包的对话框，选择第一个64位的即可\n之后下面会的输出栏中会输出 CMake 的输出，如果中文部分出现乱码，需要在设置中搜索 output，然后找到 Cmake: Output Log Encoding，将其修改为 utf-8\n之后每次修改 CMakeLists.txt 后，CMake 插件 都会自动重新生成项目，输出栏中也会输出 CMake 的输出\n运行项目 打开 main.cpp，点击 左下角 的 在终端窗口中启动所选目标\n后记 这个文章只是记录一下环境配置的过程，平常不怎么写 C/C++ 代码，之前也写过一个配置 gcc 的文章，但是那个 gcc 版本太低了。\n附录 参考文献 vscode 内置cmake output窗口乱码 文章封面 セルマ\n","date":"2025-06-02T23:03:45+08:00","image":"https://www.trrw.tech/p/vscode-%E9%85%8D%E7%BD%AE-cc-%E7%BC%96%E7%A8%8B%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83/cover.webp","permalink":"https://www.trrw.tech/p/vscode-%E9%85%8D%E7%BD%AE-cc-%E7%BC%96%E7%A8%8B%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83/","title":"VSCode 配置 C、C++ 编程运行环境"},{"content":"前言 在上一篇文章中我们成功搭建了一个使用Stack主题的博客，并将其部署在了Vercel上。但此时网站中只有刚刚新建的文章，非常简陋，甚至头像也没有。\n而Stack主题官网的文档不仅是英文的，而且给出的内容非常有限。\n所以这里单独开一篇来说一下Stack主题的配置。\n对于 static 和 assets 这两个文件夹，Hugo 在构建时会直接将 static 文件夹下的文件复制到网站的根目录下，而 assets 文件夹下的文件会被编译后得到一个链接。 例如，我的网站图标是 static/favicon.webp，在最终上线后，可以直接访问 https://www.trrw.tech/favicon.webp 来打开这个图片。 而我首页的头像图片则是 assets/img/avatar.jpg，他的链接是 https://www.trrw.tech/img/avatar_hu_b50a61df1acbb930.jpg 但是在配置中，这两个文件夹下的文件使用方式是一样的，上个两个文件的使用方式分别是：favicon.webp 和 img/avatar.jpg。 网站基础信息 网站标题 打开 config/_default/config.toml (在新版中这个 config.toml 也可以重命名成 hugo.toml )\n1 2 3 4 5 # config/_default/config.toml baseURL = \u0026#39;https://www.trrw.tech/\u0026#39; languageCode = \u0026#39;zh-cn\u0026#39; title = \u0026#34;Trrrrw\u0026#39;s Blog\u0026#34; baseURL：就填你现在打开网站后在主页时的网址就行，如果是自定义域名就填你的域名。 languageCode：语言代码，这里填中文。(具体的语言代码可以看这里) title：网站标题，显示在左侧栏头像下方以及浏览器标签栏中。 网站图标 将你要作为网站图标的图片重命名成 favicon.png，然后将其放在 static 文件夹中，覆盖掉原先的图片。 配置文件在 config/_default/params.toml 中的 favicon 项。\n1 2 3 # config/_default/params.toml favicon = \u0026#34;favicon.png\u0026#34; 左侧边栏 头像 以 assets/img/avatar.jpg 为例，其配置在 config/_default/params.toml 中：\n1 2 3 4 5 6 # config/_default/params.toml [sidebar.avatar] enabled = true local = true src = \u0026#34;img/avatar.jpg\u0026#34; enabled：是否启用头像 local：是否使用本地图片，为 false 时需 src 需要填写图片链接而非本地图片路径 src：图片链接 副标题 1 2 3 4 5 # config/_default/params.toml [sidebar] emoji = \u0026#34;❤️\u0026#34; subtitle = \u0026#34;Spending a lifetime to taste the love and pain.\u0026#34; emoji：左侧栏头像右下角可以显示一个 emoji subtitle：副标题 社交图标 1 2 3 4 5 6 7 8 9 10 # config/_default/menu.toml [[social]] identifier = \u0026#34;github\u0026#34; name = \u0026#34;GitHub\u0026#34; url = \u0026#34;https://github.com/Trrrrw\u0026#34; weight = 1 [social.params] icon = \u0026#34;brand-github\u0026#34; identifier：应该是给Hugo区分不同图标用的，不同图标的 identifier 不能相同 name：鼠标悬停在图标上时显示的文字 url：跳转链接 weight：显示顺序，数字越小越靠前 icon：图标名称，可以在这个网站上查找 https://tabler.io/icons 如果网站上没有你想要的图标，可以将svg文件放在 assets/icons 文件夹中，之后在 icon 中填写文件名即可：\n1 2 3 4 # config/_default/menu.toml [social.params] icon = \u0026#34;brand-x\u0026#34; # 对应 assets/icons/brand-x.svg 导航菜单 设置导航菜单只需要在你想要显示在左侧栏的页面(page)的 Front Matter 中添加 menu 项即可：\n1 2 3 4 5 6 7 8 9 10 \u0026lt;!-- content/page/archives/index.md --\u0026gt; +++ # ... existing code ... [menu.main] weight = 2 [menu.main.params] icon = \u0026#34;archives\u0026#34; +++ weight：显示顺序，数字越小越靠前 而首页则是 content/_index.md：\n1 2 3 4 5 6 7 8 9 \u0026lt;!-- content/_index.md --\u0026gt; +++ [menu.main] name = \u0026#34;主页\u0026#34; weight = -1 # 将首页置顶 [menu.main.params] icon = \u0026#34;home\u0026#34; +++ 页面 Page 一般一个 blog 的 page 会有 首页 home、归档 archives、链接 links、关于 about、搜索 search\n首页、归档 首页一般只需要配置上一节中提到的 menu 项即可 归档页面创建这个文件即可：content/page/archives/index.md 链接 这一部分可以参考 「Stack主题友链等页面美化」\n下面是Stack默认的links页面实现方式\n1 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 \u0026lt;!-- content/page/links/index.md --\u0026gt; +++ # 基本信息 title = \u0026#34;链接\u0026#34; layout = \u0026#39;links\u0026#39; slug = \u0026#39;links\u0026#39; toc = false readingTime = false license = false # 友链 [[links]] title = \u0026#34;友链1名称\u0026#34; description = \u0026#34;简介\u0026#34; website = \u0026#34;https://www.trrw.tech/\u0026#34; image = \u0026#34;https://www.trrw.tech/favicon.webp\u0026#34; [[links]] title = \u0026#34;友链2名称\u0026#34; description = \u0026#34;简介\u0026#34; website = \u0026#34;https://www.trrw.tech/\u0026#34; image = \u0026#34;https://www.trrw.tech/favicon.webp\u0026#34; # 菜单栏设置 [menu.main] weight = 3 [menu.main.params] icon = \u0026#34;link\u0026#34; +++ \u0026lt;!-- 下面是正常的 Markdown 这部分会显示在友链页面的顶部 --\u0026gt; 在此页面留言，或者给我发邮件。 \u0026gt; 名称：Trrrrw\u0026#39;s Blog \u0026gt; \u0026gt; 简介：Spending a lifetime to taste the love and pain. \u0026gt; \u0026gt; 地址：https://www.trrw.tech/ \u0026gt; \u0026gt; 头像：https://www.trrw.tech/favicon.webp 关于、搜索 关于页面：content/page/about/index.md，就和文章一样写就行 搜索页面：content/page/search/index.md，一般不需要特殊配置 页脚 版权声明 1 2 3 4 # config/_default/params.toml [footer] since = 2022 # 起始年份 此时页脚会自动生成 © 起始年份 - 当前年份 网站标题\n自定义文本 1 2 3 4 5 # config/_default/params.toml [footer] since = 2022 # 起始年份 customText = \u0026#39;自定义内容\u0026#39; 可用于添加ICP备案号或自定义内容\n分类 分类文件夹是 content/categories\n在这个文件夹下创建以分类名称命名的文件夹，然后在这个文件夹下创建一个 _index.md 文件，内容如下：\n1 2 3 4 +++ title = \u0026#34;教程\u0026#34; image = \u0026#34;cover.webp\u0026#34; +++ title：分类名称 image：分类页封面，非必须 标签 标签直接在每个文章的 Front Matter 中添加 tags 项即可：\n1 2 3 4 5 +++ # ... existing code... tags = [\u0026#34;Hugo\u0026#34;,\u0026#34;Stack\u0026#34;,\u0026#34;GitHub\u0026#34;,\u0026#34;Vercel\u0026#34;] +++ 评论 在 config/_default/params.toml 的 comments 参数中配置(这里以 waline 为例)：\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 # config/_default/params.toml [comments] enabled = true provider = \u0026#34;waline\u0026#34; # ... existing code... [comments.waline] serverURL = \u0026#34;waline.trrw.tech\u0026#34; lang = \u0026#34;zh-CN\u0026#34; visitor = \u0026#34;\u0026#34; avatar = \u0026#34;/img/Akkarin.jpg\u0026#34; emoji = [\u0026#34;https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo\u0026#34;] requiredMeta = [\u0026#34;name\u0026#34;, \u0026#34;email\u0026#34;, \u0026#34;url\u0026#34;] placeholder = \u0026#34;欢迎留下宝贵的评论！请留下正确的邮箱以便有回复时进行邮箱提醒，请勿发布任何与本文章无关的内容。\u0026#34; [comments.waline.locale] admin = \u0026#34;站长\u0026#34; comments enabled：是否启用评论 provider：评论提供商 comments.waline serverURL：评论服务器地址 lang：语言 visitor：访问者头像（这一项和下面一项暂时没确定有什么具体效果） avatar：评论者头像，这个值会直接写在#waline \u0026gt; div的avatar属性中，应该是访客的默认头像 emoji：表情服务 requiredMeta：必填项 placeholder：评论框占位文本 comments.waline.locale admin：管理员在自己网站评论时在昵称旁显示的文本 具体 Waline 的配置可以看 Waline 文档\n网站加速 如果你是将网站部署到自己服务器上，Hugo有一些资源可能会加载的比较慢，可以把这部分文件下载到本地\ncustom-font 先从custom-font.css下载下来CSS文件，放到assets\\css\\custom-font.css\n打开这个CSS，里面会有6个woff2文件链接，把这六个链接下载下来放到static\\fonts文件夹中\n然后修改CSS文件中的链接，将https://fonts.gstatic.com/s/lato/v24替换为/fonts\n然后创建并修改layouts\\partials\\footer\\components\\custom-font.html\n1 2 3 4 5 6 7 8 9 10 11 12 {{ $customFont := resources.Get \u0026#34;css/custom-font.css\u0026#34; | minify | fingerprint }} \u0026lt;script\u0026gt; (function () { const customFont = document.createElement(\u0026#39;link\u0026#39;); customFont.href = \u0026#34;{{ $customFont.RelPermalink }}\u0026#34;; customFont.type = \u0026#34;text/css\u0026#34;; customFont.rel = \u0026#34;stylesheet\u0026#34;; document.head.appendChild(customFont); }()); \u0026lt;/script\u0026gt; vibrant.min.js 从vibrant.min.js下载vibrant.min.js文件，放到static\\js\\vibrant.min.js\n创建并修改data\\external.yaml\n1 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 Vibrant: - src: /js/vibrant.min.js integrity: sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM= type: script PhotoSwipe: - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe.min.js integrity: sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo= type: script defer: true - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js integrity: sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU= type: script defer: true - src: https://unpkg.com/photoswipe@4.1.3/dist/default-skin/default-skin.css type: style - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe.css type: style KaTeX: - src: https://unpkg.com/katex@0.16.9/dist/katex.min.css integrity: sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV type: style - src: https://unpkg.com/katex@0.16.9/dist/katex.min.js integrity: sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8 type: script defer: true - src: https://unpkg.com/katex@0.16.9/dist/contrib/auto-render.min.js integrity: sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05 type: script defer: true Cactus: - src: https://latest.cactus.chat/cactus.js integrity: type: script - src: https://latest.cactus.chat/style.css integrity: type: style 附录 参考文献 HUGO中文文档 Stack主题文档 失迹の博客 | 使用 Hugo + Stack 简单搭建一个博客 文章封面 天才たちのてぇてぇ\n","date":"2025-05-15T14:41:00+08:00","image":"https://www.trrw.tech/p/hugo-stack%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/cover.webp","permalink":"https://www.trrw.tech/p/hugo-stack%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/","title":"Hugo Stack主题配置"},{"content":"前言 这是一篇使用Hugo+Stack搭建博客的教程，主要是为了记录自己搭建博客的过程，方便以后使用。\n安装 Hugo Hugo是由Go编写的快速现代静态网站生成器，旨在让网站创建变得有趣。\n在使用Hugo时常常需要使用到 Git、Go和Dart Sass。\n不过第三个Dart Sass没看懂怎么安装，不过也没有什么影响。\n安装 Git 打开上面的Git官网之后，点击 Download for Windows 。 之后选择 Standalone Installer 下的 64-bit Git for Windows Setup.\n你会得到一个 Git-x.xx.x-64-bit.exe ，之后打开文件一路默认即可。\n安装 Go 打开上面的Go官网之后，点击 Download 。 同样打开之后一路确认即可。\n安装 Hugo 我这里使用的是 Win11，所以直接使用官方使用的安装方式：\n1 winget install Hugo.Hugo.Extended 如果没有 winget ，可以去GitHub下载 exe文件。\n在 Assets 里找到 hugo_extended_x.xxx.x_windows-amd64.zip 的文件下载，之后解压到文件夹中。 之后将文件夹添加到环境变量中。\n验证安装 打开终端，输入一下命令，如果出现以下内容，说明安装成功。\n1 2 3 4 5 6 git -v #输出：git version 2.48.1.windows.1 go version #输出：go version go1.24.1 windows/amd64 hugo version #输出：hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended windows/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio Hugo的版本中一定要带有+extended。\n创建网站 如果您是Windows用户：\n不要使用命令提示符 不要使用 Windows PowerShell 请在 PowerShell 或 Linux 终端（如WSL或Git Bash）中运行这些命令 PowerShell 和 Windows PowerShell 是不同的应用程序。\n上面是Hugo官方文档给出的提示，我这里使用的是Microsoft Store中的PowerShell7。\n运行以下命令，运行时将其中的site-folder替换为你想要的文件夹名称。\n1 2 3 hugo new site site-folder cd site-folder git init 安装 Stack 主题 紧接着上面的命令，在site-folder路径下运行以下命令：\n1 hugo mod init github.com/你的GitHub用户名/你用于存放网站的仓库名 然后打开 Stack主题的模板仓库， 克隆这个仓库或者其他什么办法，将其中的config文件夹复制到你的site-folder中，然后默认生成的那个hugo.toml就可以删除了。\n确定config文件夹中的_default文件夹下的config.toml文件存在之后，运行以下命令：\n1 hugo server 之后会出现以下内容：\n1 Web Server is available at http://localhost:xxxx/ (bind address 127.0.0.1) 然后在浏览器中打开这个http://localhost:xxxx/，就可以看到你的网站了。你可以在这里实时看到你对网站的修改。(有些操作不会实时刷新，还是需要重新运行hugo server才能看到)\n但是这个端口每次启动都会变，如果想要端口不变的话可以在命令后面加上-p 端口号， 如果想要局域网内的设备也可以访问的话可以在命令后面加上--bind 0.0.0.0。\n1 hugo server --bind 0.0.0.0 -p 8080 至于配置主题，回头单独开一个教程吧。有一说一，官网的文档是有点简陋的\n编写博客 文件结构 文章的文件夹是放在content/post文件夹下的，文件结构如下：\n1 2 3 4 5 6 content └── post └── my-first-post ├── index.md ├── image1.png └── image2.png 可以使用一下命令创建一个新的文章：\n1 hugo new post/my-first-post/index.md Markdown 打开使用上面命令生成的index.md文件，会发现最上方自动生成了一个使用+++分隔的内容，这个内容就是 Front Matter（前置参数）。\n+++围起来的内容格式是TOML，---围起来的内容格式是YAML。\n这里使用TOML为例。\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 +++ date = \u0026#39;\u0026#39; # 文章创建时间，这个会自动生成 draft = true # 文章是否为草稿，true为草稿，此时你在网页中是看不到这篇文章的，需要将其设为false或者删除这个参数 title = \u0026#39;\u0026#39; # 文章标题 description = \u0026#39;\u0026#39; # 文章简介 image = \u0026#39;\u0026#39; # 文章封面图片 comments = true # 文章是否允许评论，true为允许，false为不允许 license = \u0026#39;\u0026#39; # 页面的许可证。如果设置为false，许可证部分将被隐。 math = false # 启用/禁用 KaTeX 渲染 toc = false # 显示/隐藏页面的目录 style = \u0026#39;\u0026#39; # Additional CSS styles for taxonomy term badge that appears in article page. keywords = [] # 文章的关键字，用于SEO readingTime = true # 显示/隐藏阅读时间 +++ 部署 GitHub 新建 GitHub 仓库 打开 https://github.com/new ，在 Repository name 里填写你在 安装 Stack 主题 中使用的仓库名，然后点击 Create repository 。 将文件上传到 GitHub 在此之前，先在项目根目录下新建一个 .gitignore 文件，并在文件中添加\n1 2 3 4 5 public resources .vscode/ .hugo_build.lock desktop.ini 打开终端，在site-folder路径下运行以下命令：\n1 2 3 4 5 git add . git commit -m \u0026#34;Initial commit\u0026#34; git branch -M main git remote add origin https://github.com/你的GitHub用户名/你用于存放网站的仓库名.git git push -u origin main 之后每次想要更新网站时，只需要运行以下命令：\n1 2 3 git add . git commit -m \u0026#34;更新内容，可修改\u0026#34; git push origin main Vercel 配置 Vercel 项目 首先打开 https://vercel.com/，注册或登录。进入 Overview 界面，点击右上角的 Add New\u0026hellip; 里的 Project 。 在左侧的 Import Git Repository 中登录 GitHub，选择刚刚创建的仓库，然后点击 Import。 之后在 Framework Preset 中选择 Hugo，然后点击下方的 Build and Output Settings，按照下图填写， 然后点击 Deploy，等待一段时间后，就可以进入项目页面了。\n1 2 3 4 # Build Command hugo --gc --minify # Install Command yum install -y golang 等待 Status 变为 Ready 后，就可以点击上面 Domains 下的链接打开你的网站了。 自定义域名 可以看到，默认的域名是 xxxx.vercel.app，这个域名不仅不美观，更重要的是，他在国内基本处于无法访问的状态。 点击项目名上方的 Settings，然后点击 Domains -\u0026gt; Add，在 Add Domain 中输入你的域名。 我这里使用的域名解析是 Cloudflare，在添加域名后会自动跳转到 Cloudflare 的页面，点击同意后会自动在 DNS 解析中添加对应的解析。\n而自动添加的解析的目标值依旧是不方便访问的cname.vercel-dns.com，这里手动将其修改成cname-china.vercel-dns.com。 等待一段时间后就可以使用自己的域名访问啦！\n附录 参考文献 HUGO中文文档 Stack主题文档 失迹の博客 | 使用 Hugo + Stack 简单搭建一个博客 rizkidoank | Deploy Hugo to Vercel 文章封面 Roommates\n","date":"2025-03-14T19:26:51+08:00","image":"https://www.trrw.tech/p/%E4%BD%BF%E7%94%A8hugo-stack%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/cover.webp","permalink":"https://www.trrw.tech/p/%E4%BD%BF%E7%94%A8hugo-stack%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/","title":"使用Hugo+Stack搭建博客"},{"content":"MinGW MinGW: A native Windows port of the GNU Compiler Collection (GCC), with freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All of MinGW\u0026rsquo;s software will execute on the 64bit Windows platforms.\n下载 MinGW - Minimalist GNU for Windows 直接下载\n安装 安装时选择好安装位置(不能有中文或空格)，其他默认即可。 安装完成后打开MinGW，勾选mingw32-base，mingw32-gcc-g++，分别是C/C++编译器。 点击Installation -\u0026gt; Apply Changes，在弹出窗口中点击Apply。 将MinGW添加到系统环境变量 在终端中输入gcc -v查看是否安装成功。 进入MinGW安装位置C:\\MinGW\\bin，将mingw32-make.exe复制一个出来改成make.exe方便使用。 到这里你可以使用gcc -o main main.c来编译C程序。\nCMake 下载 CMake下载地址，选择正确的平台，一般是x64。 直接下载 安装 双击运行下载的.msi文件。 选择第二个将CMake添加到系统环境变量，桌面快捷方式根据个人习惯选择。 选择安装位置。 在终端中输入cmake --version查看是否安装成功。 系统环境变量修改后要重启终端才能生效\n使用CMake编译 创建一个test文件夹。 1 mkdir test\u0026amp;\u0026amp;cd test 在文件夹中新建main.c和CMakeLists.txt文件，并在其中分别写入以下内容。 1 2 3 4 5 6 7 // main.c #include \u0026lt;stdio.h\u0026gt; int main() { printf(\u0026#34;Hello World!\\n\u0026#34;); return 0; } 1 2 3 4 5 6 7 8 9 10 # CMakeLists.txt cmake_minimum_required(VERSION 3.27) project(test) # 这里的\u0026#34;C:/MinGW/bin\u0026#34;路径是你MinGW的路径 set(CMAKE_CXX_COMPILER \u0026#34;C:/MinGW/bin/g++.exe\u0026#34;) set(CMAKE_C_COMPILER \u0026#34;C:/MinGW/bin/gcc.exe\u0026#34;) add_executable(test main.c) 在test文件夹下创建build文件夹，并用CMake编译。 1 2 3 mkdir build\u0026amp;\u0026amp;cd build cmake .. -G \u0026#34;MinGW Makefiles\u0026#34; make 错误 The C compiler is not able to compile a simple test program. 运行：\n1 cmake .. -G \u0026#34;MinGW Makefiles\u0026#34; 输出：\n1 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 PS D:\\Trrrrw\\文档\\C\\test\\build\u0026gt; cmake .. -G \u0026#34;MinGW Makefiles\u0026#34; -- The C compiler identification is GNU 6.3.0 -- The CXX compiler identification is GNU 6.3.0 -- Detecting C compiler ABI info -- Detecting C compiler ABI info - failed -- Check for working C compiler: D:/MinGW/bin/gcc.exe -- Check for working C compiler: D:/MinGW/bin/gcc.exe - broken CMake Error at D:/Trrrrw/应用/命令行工具/cmake/share/cmake-3.27/Modules/CMakeTestCCompiler.cmake:67 (message): The C compiler \u0026#34;D:/MinGW/bin/gcc.exe\u0026#34; is not able to compile a simple test program. It fails with the following output: Change Dir: \u0026#39;D:/Trrrrw/文档/C/test/build/CMakeFiles/CMakeScratch/TryCompile-qihtzh\u0026#39; Run Build Command(s): D:/Trrrrw/应用/命令行工具/cmake/bin/cmake.exe -E env VERBOSE=1 D:/MinGW/bin/mingw32-make.exe -f Makefile cmTC_22fc3/fast D:/MinGW/bin/mingw32-make.exe -f CMakeFiles\\cmTC_22fc3.dir\\build.make CMakeFiles/cmTC_22fc3.dir/build mingw32-make.exe[1]: Entering directory \u0026#39;D:/Trrrrw/文档/C/test/build/CMakeFiles/CMakeScratch/TryCompile-qihtzh\u0026#39; 系统找不到指定的路径。 CMakeFiles\\cmTC_22fc3.dir\\build.make:76: recipe for target \u0026#39;CMakeFiles/cmTC_22fc3.dir/testCCompiler.c.obj\u0026#39; failed mingw32-make.exe[1]: *** [CMakeFiles/cmTC_22fc3.dir/testCCompiler.c.obj] Error 1 mingw32-make.exe[1]: Leaving directory \u0026#39;D:/Trrrrw/文档/C/test/build/CMakeFiles/CMakeScratch/TryCompile-qihtzh\u0026#39; Makefile:126: recipe for target \u0026#39;cmTC_22fc3/fast\u0026#39; failed mingw32-make.exe: *** [cmTC_22fc3/fast] Error 2 CMake will not be able to correctly generate this project. Call Stack (most recent call first): CMakeLists.txt:2 (project) -- Configuring incomplete, errors occurred! 解决： 重新安装cmake，使用安装包安装，不要下载压缩包手动添加环境变量\nCMake Error: Target DependInfo.cmake file not found 运行：\n1 make 输出：\n1 2 3 4 5 6 CMake Error: Target DependInfo.cmake file not found make[2]: *** No rule to make target \u0026#39;D:/Trrrrw//C/test/main.c\u0026#39;, needed by \u0026#39;CMakeFiles/test.dir/main.c.obj\u0026#39;. Stop. CMakeFiles/Makefile2:82: recipe for target \u0026#39;CMakeFiles/test.dir/all\u0026#39; failed make[1]: *** [CMakeFiles/test.dir/all] Error 2 Makefile:90: recipe for target \u0026#39;all\u0026#39; failed make: *** [all] Error 2 解决： 文件夹路径不能有中文\n参考文章： MinGW下载和安装教程\n","date":"2023-09-06T21:53:01+08:00","image":"https://www.trrw.tech/p/windows11%E4%B8%8A%E9%85%8D%E7%BD%AEcc-%E7%8E%AF%E5%A2%83/pixiv-75321273.webp","permalink":"https://www.trrw.tech/p/windows11%E4%B8%8A%E9%85%8D%E7%BD%AEcc-%E7%8E%AF%E5%A2%83/","title":"Windows11上配置C、C++环境"},{"content":"Java Java 17(1.17及以上版本) https://www.oracle.com/java/technologies/downloads/\nJava 8(1.17以下版本) https://www.java.com/en/download/\n原版 server.jar https://mcversions.net/ 在Stable Releases栏选择需要的版本点击Download，选择Download Server Jar 下载完成后将server.jar文件放在一个文件夹里，右键文件夹空白区域选择在终端中打开(Win10可能需要按住Shift点击右键)。 在终端中运行以下命令：\n1 java -Xms1024M -Xmx1024M -jar server.jar nogui 此时会在文件夹中生成一些文件，并显示提示：\n1 You need to agree to the EULA in order to run the server. Go to eula.txt for more info. 回到文件夹打开eula.txt，将false改为true:\n1 eula=true 此时再回到终端运行这条命令：\n1 java -Xms1024M -Xmx1024M -jar server.jar nogui Windows防火墙可能会有提示，允许即可。 当终端显示下面这行时说明服务器开启成功：\n1 Done (30.927s)! For help, type \u0026#34;help\u0026#34; 在终端中向上找，找到这一行：\n1 Starting Minecraft server on *:25565 其中冒号后面的数字就是你服务器运行的端口(可能会不一样)，此时服务器运行在：\n1 127.0.0.1:25565 现在你本地打开一个Minecraft客户端(不要关闭终端)，就是平时自己玩的那个。进游戏点击多人游戏，选择添加服务器，服务器名随意，服务器地址填上面那个地址。 此时是进不去服务器的，还要打开文件夹中的server.properties文件，修改以下选项：\n1 online-mode=false 这个选项开启之后会验证正版账号，也就是说开启之后只有正版才能进去，所以需要关闭。其他选项的意思参考Minecraft Wiki\n此时在终端输入stop关闭服务器(之后关闭服务器都这么关，这样它会保存你的存档)，再运行启动服务器的命令：\n1 java -Xms1024M -Xmx1024M -jar server.jar nogui 这时客户端就能进服务器了🎉，但此时服务端还只是运行在你自己的电脑上，只有你自己和局域网内的电脑可以连接，接下来就是将本地端口共享给其他人。\nFabric版 从原版安装 到Fabric官网下载最新安装器，点击中间的Download for Windows 双击打开下载的文件，选择服务端，选择正确的游戏版本，加载器版本默认最新即可，安装位置选择原版服务器路径，点击安装，安装完成后可以关闭安装界面。 此时服务器的启动指令变为： 1 java -Xms1024M -Xmx1024M -jar fabric-server-launch.jar nogui 直接安装 下载对应版本的jar文件，放到空文件夹中，并在该路径下在终端中运行：\n1 java -Xmx2G -jar 下载的文件名 nogui 同样需要调整eula.txt和server.properties文件。\nForge版 在官网下载正确版本的jar文件 双击运行，选择Insall server并选择一个空文件夹，点击确定 安装完成后目录： 1 2 3 4 5 folder/ ├── libraries ├── run.bat ├── run.sh ├── user_jvm_args.txt 双击运行run.bat即可，如果想要只弹出命令行窗口的话，可以用记事本打开run.bat，并在java开头那一行最后添加空格nogui 1 java @user_jvm_args.txt @libraries/net/minecraftforge/forge/1.20.1-47.0.1/win_args.txt %* nogui 内网穿透 各种内网穿透工具官网都有详细的使用说明。\nOPENFRP 官网：www.openfrp.net OPENFRP 使用方法：docs.openfrp.net 参考文章： Minecraft Wiki/教程/架设服务器\n","date":"2022-12-13T22:31:54+08:00","image":"https://www.trrw.tech/p/minecraft%E6%90%AD%E5%BB%BA%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%99%A8/cover.webp","permalink":"https://www.trrw.tech/p/minecraft%E6%90%AD%E5%BB%BA%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%99%A8/","title":"Minecraft搭建本地服务器"},{"content":"依赖 Eigen eigen.tuxfamily.org\n1 2 3 4 5 6 wget https://gitlab.com/libeigen/eigen/-/archive/3.3.4/eigen-3.3.4.zip unzip eigen-3.3.4.zip \u0026amp;\u0026amp; cd eigen-3.3.4 mkdir build \u0026amp;\u0026amp; cd build cmake .. sudo make install sudo cp -r /usr/local/include/eigen3/Eigen /usr/local/include Pangolin Pangolin-Github\n1 2 3 4 5 6 7 8 9 10 git clone https://github.com/stevenlovegrove/Pangolin cd Pangolin/scripts/ rm -rf vcpkg/ git clone https://github.com/microsoft/vcpkg cd .. ./scripts/install_prerequisites.sh --dry-run recommended mkdir build \u0026amp;\u0026amp; cd build cmake .. cmake --build . sudo make install 错误1：Could NOT find OpenGL\n1 sudo apt install libgl1-mesa-dev 错误2：Could not find GLEW\n1 sudo apt install libglew-dev OpenCV opencv.org\n安装依赖 1 2 3 sudo apt install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev sudo apt install libgtk2.0-dev sudo apt install pkg-config 安装OpenCV 1 2 3 4 5 6 7 8 sudo apt update \u0026amp;\u0026amp; sudo apt install g++ unzip wget cmake wget -O opencv.zip https://github.com/opencv/opencv/archive/refs/tags/4.4.0.zip unzip opencv.zip cd opencv-4.4.0/ mkdir build \u0026amp;\u0026amp; cd build cmake .. cmake --build . sudo make install Boost 1 sudo apt install libboost-all-dev 安装PCL 依赖 将以下内容保存为install_pcl_dependences.sh ，使用在ubuntu 命令行终端输入sudo sh install_pcl_dependences.sh 即可进行安装，在下载安装依赖库过程中会提示是否安装，都输入y。（好像没什么用） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 sudo apt-get update sudo apt-get install git build-essential linux-libc-dev sudo apt-get install cmake cmake-gui sudo apt-get install libusb-1.0-0-dev libusb-dev libudev-dev sudo apt-get install mpi-default-dev openmpi-bin openmpi-common sudo apt-get install libflann1.8 libflann-dev sudo apt-get install libeigen3-dev sudo apt-get install libboost-all-dev sudo apt-get install libvtk5.10-qt4 libvtk5.10 libvtk5-dev sudo apt-get install libqhull* libgtest-dev sudo apt-get install freeglut3-dev pkg-config sudo apt-get install libxmu-dev libxi-dev sudo apt-get install mono-complete sudo apt-get install qt-sdk openjdk-8-jdk openjdk-8-jre 下载源码 1 2 3 4 ## 下载 wget -O pcl.tar.gz https://github.com/PointCloudLibrary/pcl/archive/refs/tags/pcl-1.12.0.tar.gz ## 解压 tar -zxvf pcl.tar.gz 安装 1 2 3 4 5 6 cd pcl-pcl-1.12.0 mkdir release cd release cmake -DCMAKE_BUILD_TYPE=None -DCMAKE_INSTALL_PREFIX=/usr \\ -DBUILD_GPU=ON-DBUILD_apps=ON -DBUILD_examples=ON \\ -DCMAKE_INSTALL_PREFIX=/usr .. make sudo make install 这个是用apt安装，但是好像版本不对\n1 sudo apt install libpcl-dev 安装SLAM 1 2 3 4 git clone -b dense_map https://github.com/electech6/ORB_SLAM3_detailed_comments cd ORB_SLAM3_detailed_comments chmod +x build.sh ./build.sh ## 如果报错可以试试打开这个文件把里面的指令一句一句手动执行，`make -j`换成`make` 报错1：\n1 2 3 fatal error: openssl/md5.h: c #include \u0026lt;openssl/md5.h\u0026gt; ^~~~~~~~~~~~~~~ 1 sudo apt install libssl-dev 未完待续\u0026hellip;\u0026hellip;\n","date":"2022-10-16T15:16:01+08:00","image":"https://www.trrw.tech/p/orb-slam3%E7%A8%A0%E5%AF%86%E5%BB%BA%E5%9B%BE/ORB-SLAM3-cover.webp","permalink":"https://www.trrw.tech/p/orb-slam3%E7%A8%A0%E5%AF%86%E5%BB%BA%E5%9B%BE/","title":"ORB SLAM3稠密建图"},{"content":"准备 在ORB_SLAM3\\Examples\\Monocular下新建myvideo.yaml和myvideo.cpp，视频文件也放到这。 在myvideo.yaml中添加内容： 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 %YAML:1.0 #-------------------------------------------------------------------------------------------- # Camera Parameters. Adjust them! #-------------------------------------------------------------------------------------------- Camera.type: \u0026#34;PinHole\u0026#34; # Camera calibration and distortion parameters (OpenCV) Camera.fx: 614.3472290039062 Camera.fy: 613.3615112304688 Camera.cx: 314.36767578125 Camera.cy: 239.8182830810547 Camera.k1: 0.0 Camera.k2: 0.0 Camera.p1: 0.0 Camera.p2: 0.0 Camera.k3: 0.0 # Camera frames per second Camera.fps: 30.0 # Color order of the images (0: BGR, 1: RGB. It is ignored if images are grayscale) Camera.RGB: 1 # Camera resolution Camera.width: 1920 Camera.height: 1080 #-------------------------------------------------------------------------------------------- # ORB Parameters #-------------------------------------------------------------------------------------------- # ORB Extractor: Number of features per image ORBextractor.nFeatures: 1000 # ORB Extractor: Scale factor between levels in the scale pyramid ORBextractor.scaleFactor: 1.2 # ORB Extractor: Number of levels in the scale pyramid\tORBextractor.nLevels: 8 # ORB Extractor: Fast threshold # Image is divided in a grid. At each cell FAST are extracted imposing a minimum response. # Firstly we impose iniThFAST. If no corners are detected we impose a lower value minThFAST # You can lower these values if your images have low contrast\tORBextractor.iniThFAST: 20 ORBextractor.minThFAST: 7 #-------------------------------------------------------------------------------------------- # Viewer Parameters #-------------------------------------------------------------------------------------------- Viewer.KeyFrameSize: 0.05 Viewer.KeyFrameLineWidth: 5 Viewer.GraphLineWidth: 0.9 Viewer.PointSize:2 Viewer.CameraSize: 0.08 Viewer.CameraLineWidth: 3 Viewer.ViewpointX: 0 Viewer.ViewpointY: -0.7 Viewer.ViewpointZ: -1.8 Viewer.ViewpointF: 500 在myvideo.cpp中添加内容： 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 // // Created by xiang on 11/29/17. // // 该文件将打开给定的视频文件，并将图像传递给ORB-SLAM2进行定位 // 需要opencv #include \u0026lt;opencv2/opencv.hpp\u0026gt; // ORB-SLAM的系统接口 #include \u0026#34;System.h\u0026#34; #include \u0026lt;string\u0026gt; #include \u0026lt;chrono\u0026gt; // for time stamp #include \u0026lt;iostream\u0026gt; using namespace std; // 参数文件与字典文件 // 如果你系统上的路径不同，请修改它 // 第二个路径建议用相对路径 string parameterFile = \u0026#34;./myvideo.yaml\u0026#34;; string vocFile = \u0026#34;../../Vocabulary/ORBvoc.txt\u0026#34;; // 视频文件，修改的话需要和你的视频名字一起改 string videoFile = \u0026#34;./video.mp4\u0026#34;; int main(int argc, char **argv) { // 声明 ORB-SLAM3 系统 ORB_SLAM3::System SLAM(vocFile, parameterFile, ORB_SLAM3::System::MONOCULAR, true); // 获取视频图像 cv::VideoCapture cap(videoFile); // change to 1 if you want to use USB camera. // 记录系统时间 auto start = chrono::system_clock::now(); while (1) { cv::Mat frame; cap \u0026gt;\u0026gt; frame; // 读取相机数据 if ( frame.data == nullptr ) break; // rescale because image is too large cv::Mat frame_resized; cv::resize(frame, frame_resized, cv::Size(640,480)); auto now = chrono::system_clock::now(); auto timestamp = chrono::duration_cast\u0026lt;chrono::milliseconds\u0026gt;(now - start); SLAM.TrackMonocular(frame_resized, double(timestamp.count())/1000.0); cv::waitKey(30); } SLAM.Shutdown(); return 0; } 修改ORB_SLAM3的CMakeLists.txt，在最后添加： 1 2 add_executable(myvideo Examples/Monocular/myvideo.cpp) target_link_libraries(myvideo ${PROJECT_NAME}) 运行 运行ORB_SLAM3\n1 2 3 cd ORB_SLAM3 chmod +x build.sh ./build.sh 不知道为什么myvideo文件生成在了ORB_SLAM3\\Examples_old\\Stereo-Inertial下，复制到ORB_SLAM3\\Examples\\Monocular下就行 之后再运行它：\n1 2 cp Examples_old/Stereo-Inertial/myvideo Examples/Monocular/myvideo ./myvideo 效果 参考文章： 用自己的视频跑ORB_SLAM3（密码：eu2t）\n","date":"2022-10-15T15:45:57+08:00","image":"https://www.trrw.tech/p/orb-slam3%E8%BF%90%E8%A1%8C%E8%87%AA%E5%B7%B1%E7%9A%84%E6%95%B0%E6%8D%AE%E9%9B%86/ORB-SLAM3-cover.webp","permalink":"https://www.trrw.tech/p/orb-slam3%E8%BF%90%E8%A1%8C%E8%87%AA%E5%B7%B1%E7%9A%84%E6%95%B0%E6%8D%AE%E9%9B%86/","title":"ORB SLAM3运行自己的数据集"},{"content":"仓库链接 UZ-SLAMLab/ORB_SLAM3\n系统 我前面弄了Apollo所以想再整个新系统来弄SLAM，也可以直接在原系统中进行。\n在wsl2-distro-manager的release中下载最新版的压缩包。 打开就可以复制已有的WSL。 依赖 Pangolin Pangolin-Github\n1 2 3 4 5 6 7 8 9 10 git clone https://github.com/stevenlovegrove/Pangolin cd Pangolin/scripts/ rm -rf vcpkg/ git clone https://github.com/microsoft/vcpkg cd .. ./scripts/install_prerequisites.sh --dry-run recommended mkdir build \u0026amp;\u0026amp; cd build cmake .. cmake --build . sudo make install OpenCV opencv.org\n安装依赖 1 2 3 sudo apt install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev sudo apt install libgtk2.0-dev sudo apt install pkg-config 安装OpenCV 1 2 3 4 5 6 7 8 sudo apt update \u0026amp;\u0026amp; sudo apt install g++ unzip wget cmake wget -O opencv.zip https://github.com/opencv/opencv/archive/refs/tags/4.4.0.zip unzip opencv.zip cd opencv-4.4.0/ mkdir build \u0026amp;\u0026amp; cd build cmake .. cmake --build . sudo make install 安装好依赖的话在5.3中应该就不会报错\nEigen3 eigen.tuxfamily.org\n1 2 3 4 5 6 wget https://gitlab.com/libeigen/eigen/-/archive/3.1.1/eigen-3.1.1.zip unzip eigen-3.1.1.zip \u0026amp;\u0026amp; cd eigen-3.1.1 mkdir build \u0026amp;\u0026amp; cd build cmake .. sudo make install sudo cp -r /usr/local/include/eigen3/Eigen /usr/local/include 不知道为什么这个不用cmake --build .\n安装 Clone the repository:\n1 git clone https://github.com/UZ-SLAMLab/ORB_SLAM3.git ORB_SLAM3 1 2 3 cd ORB_SLAM3 chmod +x build.sh ./build.sh 报错1\n1 2 /home/trrrrw/orb-slam3/ORB_SLAM3/Thirdparty/DBoW2/DBoW2/BowVector.h:17:10: fatal error: boost/serialization/serialization.hpp: No such file or directory #include \u0026lt;boost/serialization/serialization.hpp\u0026gt; 1 sudo apt install libboost-dev 报错2\n1 2 /home/trrrrw/orb-slam3/ORB_SLAM3/src/System.cc:26:10: fatal error: openssl/md5.h: No such file or directory #include \u0026lt;openssl/md5.h\u0026gt; 1 sudo apt install libssl-dev 报错3\n1 /usr/bin/ld: cannot find -lboost_serialization 安装boost\n1 sudo apt install libboost-all-dev 测试数据集 下载数据集 https://projects.asl.ethz.ch/datasets/doku.php?id=kmavvisualinertialdatasets#downloads 下载ASL格式 放在最外面新建文件夹 Examples 解压出mav0文件夹 在ORB_SLAM3下新建文件夹dataset/MH01，将mav0文件夹放在这 1 2 3 4 mkdir dataset \u0026amp;\u0026amp; cd dataset mkdir MH01 \u0026amp;\u0026amp; cd MH01 ## 把mav0文件夹复制到MH01里就行 cp -r ../../../Examples/mav0/ ./ 运行 1 2 cd ../../Examples ./Monocular/mono_euroc ../Vocabulary/ORBvoc.txt ./Monocular/EuRoC.yaml ../dataset/MH01 ./Monocular/EuRoC_TimeStamps/MH01.txt 这样应该是没有窗口的 在 Examples/Monocular/mono_euroc.cc 第 83 行附近，将函数的最后一个参数更改为 true ORB_SLAM3::System SLAM(argv[1],argv[2],ORB_SLAM3::System::MONOCULAR, true); 默认情况下为 false，改为true 用WSL这样还是没有窗口🤷‍♂️\nWSL2 安装xfce4 1 sudo apt install xfce4 重新编译会报错（如果2.2.1没安装依赖的话） 1 what(): OpenCV(4.4.0) /home/trrrrw/orb-slam3/opencv-4.4.0/modules/highgui/src/window.cpp:634: error: (-2:Unspecified error) The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support. If you are on Ubuntu or Debian, install libgtk2.0-dev and pkg-config, then re-run cmake or configure script in function \u0026#39;cvNamedWindow\u0026#39; 删除OpenCV后安装libgtk2.0-dev and pkg-config后重新编译安装 1 2 cd opencv-4.4.0/build sudo make uninstall 安装依赖 1 2 3 sudo apt install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev sudo apt install libgtk2.0-dev sudo apt install pkg-config 编译安装 1 2 3 4 cd build cmake .. cmake --build . sudo make install 再执行4.4 成功👍 ","date":"2022-10-06T21:09:26+08:00","image":"https://www.trrw.tech/p/%E5%9C%A8wsl2%E4%B8%AD%E8%BF%90%E8%A1%8Corb-slam3/ORB-SLAM3-cover.webp","permalink":"https://www.trrw.tech/p/%E5%9C%A8wsl2%E4%B8%AD%E8%BF%90%E8%A1%8Corb-slam3/","title":"在WSL2中运行ORB SLAM3"},{"content":"Node.js 介绍 百度百科 菜鸟教程 下载 官网\n安装 CSDN\n只需要完成第一步即可，第二步修改全局模块路径和缓存路径可以不做，npm包一般不会很大。\nGit 下载 官网\n使用 安装完成后右键菜单会有这个 常用命令 cd \u0026quot;路径\u0026quot; 打开路径\ngit clone 链接 克隆仓库，链接为仓库链接。克隆下来的位置是上面那个命令打开的路径。\n新建GitHub仓库 https://github.com/new 填写仓库名blog，其他默认。\n安装Hexo 1 npm install -g hexo-cli 如果之后打开项目后不能用hexo命令可以再重新安装hexo\n新建站点 1 2 3 hexo init \u0026lt;folder\u0026gt; cd \u0026lt;folder\u0026gt; npm install 要把\u0026lt;folder\u0026gt;改为自己的文件夹名，\u0026lt;\u0026gt;也要去掉\n新建完成后指定文件夹的目录：\n1 2 3 4 5 6 7 8 . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes _config.yml中的一些参数\n参数 描述 title 网站标题 subtitle 网站副标题 description 网站描述 keywords 网站的关键词。支持多个关键词。 author 您的名字 language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。 timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。 更多详细说明移步官方文档 ⭐最主要的是url和root，如果不自定义域名的话，url为https://\u0026lt;username\u0026gt;.github.io/\u0026lt;repositories\u0026gt;/，root为/\u0026lt;repositories\u0026gt;/。如果设置不正确的话可能会导致网页没有css样式。 参数名后的冒号后面要有一个空格 安装主题 一般主题都会有使用教程，这里只展示了使用主题文件安装的过程。\n从主题站找到自己喜欢的主题，点击标题进入对应GitHub仓库下载 将主题文件放到一个单独文件夹\u0026lt;ThemeFolder\u0026gt;，并将改文件夹放在themes文件夹里 在站点的_config.yml文件中theme的内容更改为\u0026lt;ThemeFolder\u0026gt;即可 一个主题可能会有以下的结构： 1 2 3 4 5 6 . ├── _config.yml ├── languages ├── layout ├── scripts └── source _config.yml 主题的配置文件。和 Hexo 配置文件不是同一个文件，要注意区分。\n如需更换主题，只需要将新主题的文件夹放到正确位置，再将站点的_config.yml文件中theme的内容更改为新的主题名即可\n生成静态文件 1 hexo g #hexo generate的缩写 网页需要的文件都在public文件夹下，将该文件夹下文件上传到GitHub仓库即可。\n启动服务 1 hexo s #hexo server的缩写 用这个可以先在本地预览你的网页\n如果不能用的话先安装，--save是把npm包安装在这个项目中并记录在package.json中\n1 npm install hexo-server --save 新建文章 1 hexo new [layout] \u0026lt;title\u0026gt; 同样[]和\u0026lt;\u0026gt;也要去掉\n布局（Layout） 路径 描述 post source/_posts 文章 page source 页面 draft source/_drafts 草稿 部署到GitHub 打开网站的_config.yml 在文件底部找到以下内容并补全：\n1 2 3 4 deploy: type: git repo: https://github.com/Trrrrw/blog ## 你的仓库链接 branch: main 然后在blog文件夹中打开终端输入命令npm install hexo-deployer-git --save安装部署插件。 之后输入命令：\n1 2 3 hexo clean #清除已生成的静态文件 hexo g #hexo generate 生成静态文件 hexo d #hexo deploy 生成静态文件并部署到仓库 如果在部署的时候出现 Failed to connect to github.com port之类的错误，在终端中执行git config --global --unset http.proxy和git config --global --unset https.proxy应该就行了。 完成之后要去GitHub仓库里找到Settings -\u0026gt; Pages -\u0026gt; Build and deployment -\u0026gt; Branch，设置成main分支，路径为/(root)。点save保存之后就能在https://username.github.io/repo/ 里看到你的网页。\n自定义域名 购买域名 例：example.com\n域名解析 在电脑上执行 1 ping username.github.io 得到\n1 2 正在 Ping username.github.io [IP地址] 具有 32 字节的数据: ... 记住上面的IP地址\n在购买的域名控制台找到域名列表-域名解析 添加解析 主机记录 记录类型 解析路线 记录值 TTL @ AAAA 默认 IPV6地址 10 分钟 @ A 默认 IPV4地址 10 分钟 @ CNAME 默认 username.github.io 10 分钟 www CNAME 默认 username.github.io 10 分钟 前两个行用有一个即可，但好像都没什么用。还会和第三行冲突。 可以只有后面两行，第四行的www可以换成自己喜欢的、符合规范的前缀，可以设成blog来说明这个网站是一个blog网站。也可以只有第三行，这样就是一个裸域名比较好记忆。 如果修改了的话下面两项设置要把www改成对应的前缀或者删除。\n绑定GitHub Page 在GitHub仓库中点击Settings-\u0026gt;Pages 在Custom domain下填写www.example.com 点Save保存 等待GitHub检查完DNS勾选下面的Enforce HTTPS 修改Hexo的_config.yml 在Hexo的_config.yml中修改url和root\n1 2 url: https://www.example.com root: / 再重新部署一次即可\n参考文章： 官方文档 Markdown教程\n","date":"2022-07-04T22:24:42+08:00","image":"https://www.trrw.tech/p/%E5%9F%BA%E4%BA%8Ehexo%E6%90%AD%E5%BB%BAblog%E7%BD%91%E7%AB%99/Hexo-cover.webp","permalink":"https://www.trrw.tech/p/%E5%9F%BA%E4%BA%8Ehexo%E6%90%AD%E5%BB%BAblog%E7%BD%91%E7%AB%99/","title":"基于Hexo搭建blog网站"}]