2024-11-07
在我写了几篇博客之后，通过实际的编写过程和这期间看到的别的内容，我发现用单纯的Markdown语法来写并不能达到我想要的效果。并且我通过对比发现我在Typora里编辑的 html 语法是可以被识别到并正确运行的，不过可能由于我本身博客的框架基础，在web页面并没有被正确加载，所以我决定研究一下我的 post 具体是怎样被加载的。
经过研究发现，我的书写内容没有问题，post 的加载也没有问题，在修复Hugo静态生成器中忽略原始HTML的方法中我找到了问题的答案，原来是因为渲染的markdown不能理解我在短代码中的HTML。从Hugo V.0.60开始，默认的markdown渲染器是Gold mark。Goldmark渲染引擎默认忽略了原始HTML。所以我必须使用配置参数来告诉它。这个解决方案可以让Markdown渲染器使用Goldmark渲染器，通过配置考虑原始HTML。
修复方法是在配置文件中加入
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
这里我正在使用 config.toml 文件，若是 yaml 文件参考文章给出的格式。这时候我之前的 html 语句就被正确加载了。
第二个问题是我之前插入了很多图片都没有被正确加载，我觉得可能是因为文件路径的问题。因为上一个问题我是先问的 gpt ，其实 gpt 给出的方案和正确方案是比较类似的，但他没有意识到她提到的 blackfriday 渲染器已经不再使用了，导致我花费很多时间找到真正的原因，所以这一次我也觉得先在搜索引擎中找答案。根据 hugo 导入图片的两种方式我也完成了我的图片导入。但是后续我想到了一些问题，就是我的 content\cn\posts 内文件本身是没有额外文件夹的，但是在 hugo 启动之后生成的 public 文件夹中是针对每个 md 文件有一个文件夹的，其中放了 html 文件，所以我的做法就是将图片放在这个文件夹之下。我想到的是什么呢，就是说这个文件是一个缓存文件，如果我执行了清除缓存的命令，我里面的图片就没了，我测试了一下，果然没了。但是 edge 里面还能看到，我猜测是因为 edge 本身缓存了这个图片，于是我打开 chrome 试了一下果然，这张图片已经看不到了，所以我现在要理解这个过程，将图片放在一个一劳永逸的地方。为什么我不直接放在 content 目录先呢，因为这里面原来都是单独的 md 文件，我担心将 md 文件放入文件夹中会影响 hugo 构建的过程。这次我直接询问 gpt 得到了答案，我可以在 post 文件夹下额外新建一个对应 md 文件的文件夹，然后将相应的图片放入即可，这样 hugo 自然会将图片放入 public 对应的文件夹和 html 文件在一起。在这之前，~~我找到了回收站中被清除的图片。~~我重新上传了需要的图片。
接着针对超链接的格式设置问题由于我解决了 html 渲染的问题，所以我不需要在我原来的 css 文件里设置统一的格式。我可以根据每一处的超链接单独设置了。我将博客内按照原来的格式去配置，博客外的采用另一种我觉得好看的形式去展示。相应的我要修改我之前改过的 css 文件。之后对于文档内的我要设置超链接的颜色为style="color: #0000FF;"
在此记录一下链接到外部网站和链接到文档内的位置的语法：
外部网站
<a style="color: #0000FF;" href="网站链接" target="_blank">网站名</a>
内部位置
<a style="color: #0000FF;" href="#位置id">位置名</a><br>
<a id="位置id"></a>
之后我在观察途中发现我的字体很细，最终经过F12发现是我的字体版本较细，所以更换为 Screen 的版本。利用npm工具在字体网站下载新的版本，发现npm命令未找到，重新安装 Node.js ,但是并没有重新安装。在此记录这两条命令，以防下次遇到类似问题。（要使用 Powershell 且以管理员身份运行）
# 配置 fnm 环境
fnm env --use-on-cd | Out-String | Invoke-Expression
# 下载并安装 Node.js
fnm use --install-if-missing 22
# 验证环境中是否存在正确的 Node.js 版本
node -v # 应该打印 `v22.11.0`
# 验证环境中是否存在正确的 npm 版本
npm -v # 应该打印 `10.9.0`
均可以得到正常结果，且不需要安装，可能是需要使用该环境。用npm install --save lxgw-wenkai-screen-webfont下载。
然后我发现 Markdown 自带的表格不是很好用，首先他没有边框，对表格内再做其他操作也不方便，所以我在想现在能不能用 html 重写来替换我之前的表格。改变成功！
对Java代码的语法做了高亮处理，优化了我的代码块，增加了复制按钮，并设置相应的美化效果。模板如下：
<div class="highlight" style="position:relative;"><pre><code class="language-java" data-lang="java" id = "代码的id">填充代码
</code></pre>
<button class="copy-button" data-clipboard-target="#代码的id">Copy</button>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-java.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
// 初始化 Clipboard.js
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function(e) {
var copyButton = e.trigger;
copyButton.textContent = 'Copied!';
copyButton.style.backgroundColor = '#cd3bee';
setTimeout(function() {
copyButton.textContent = 'Copy';
copyButton.style.backgroundColor = '#008b8b';
}, 2000);
e.clearSelection(); // 清除选中的文本
});
</script>
2024-11-8
今天尝试在 GitHub 上创建了代码仓库，并进行了常规的部署，效果不错，但是因为还有很多功能未实现，所以就先关掉了。
2024-11-9
今天准备整理一下我的网站的目录等网页内容,写了一个文章分类与统计的页面，把之前生成的分类页面串联在一起了。其中，分类的总页面是我根据自动生成的 html 改写的，因为我没有找到它是怎么生成的。所以后续更新了我的博客网站的话，我还得重新改写，希望后续能弄得，目前来看的话，我每次都要改meta property以及它下面的link、title和页面的内容。
好的后续经过我不懈的努力，我成功将他改成了部分自动的！可喜可贺！
然后在title部分加上了一个头像，是十日终焉的主角齐夏的同人创作。来自于小红书的分享。
2024-11-10
然后我加上了变换深色浅色的功能。使用的是Darkmode.js。
最后在情情的强烈要求下，加上了评论区功能。支持来源于Disqus。
然后就完成了我初期设想的全部功能啦！
每次提交需要：
hugo --buildFuture -D
git add .
git commit -m ""
git push
2024-11-14更新
在这里补上目前网站的模样：
