创建自己的免费网站 第 3 部分 - 创建博客
第一部分和 第二部分我将继续创建主页，如果您立即访问了第 3 部分，请背靠背观看第 1 部分和第 2 部分，并使用 RStudio 跟读，然后再回到本文。
在这篇文章中，我们将在主页中创建一个类似博客的页面。如果你跟着做，就能做到。总之，请跟我一起创建一个博客风格的页面，我已经在下面的 Quarto 网站中实现了这一功能。
设置主页 YAML 文件
首先，点击根文件夹中的 _quarto.yml 文件，打开源代码编辑窗口。 然后，输入下面的代码，确保"-"的位置与顶部的"-"一致。 这将在导航栏中插入博客菜单，点击后打开博客页面。如果查看 href 地址，你会发现我们需要在根目录下创建 docs 文件夹，在 docs 文件夹下创建 blog 文件夹，然后创建 index.qmd 文件（难道只有我有动物本能？）
- text: "博客
href: docs/blog/index.qmd
在博客文件夹中设置 index.qmd
对于点击导航栏中的博客菜单后显示的页面，请在博客文件夹中创建一个 index.qmd，如下图所示，然后在该文件中输入以下源代码并保存。当然，你可以随意更改标题和副标题。
---.
标题： IT Playground 博客
副标题： 关于 R、Python 和 AI 的新闻和技巧
listing：
排序: "date desc" # 博客最新文章在顶部
contents: "posts
sort-ui: false
filter-ui: false
类别: true
feed: true
页面布局: full
margin-header: signup.html
title-block-banner: "#EDF3F9"
title-block-banner-colour: body
搜索： false
---.
在博客文件夹中设置 signup.html
您在上面的步骤中设置了根文件夹/docs/blog/index.qmd。 现在，当您在博客上发布新文章时，您注册的电子邮件地址将收到更新通知，通知将使用 订阅服务设置实际上，这需要您研究服务提供商的解决方案，所以只是一个说明。其实，我也需要研究这部分内容......我们先集中讨论格式问题吧（我争取以后再发帖讨论。 如果你急着用 1 分 1 秒，这里有适合你的服务~）！ 这里来看看~)
在博客文件夹中 singup.html(注意拼写！）创建 signup.html，然后将下面的源代码复制并粘贴到该文件中。
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup" style="padding-bottom: 1em; max-width: 400px;" class="ms-auto me-auto">
<p style="font-weight: 600; margin-bottom: 0;">订阅</p>
<span style="font-size: 0.9em;">喜欢这个博客吗？ 新文章将通过电子邮件通知您：</span>
<form action="https://quarto.us14.list-manage.com/subscribe/post?u=c79fb56a311ae347fbe916740&id=ec05dfca03" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="input-group mt-1 mb-2">
<input type="email" class="form-control" placeholder="电子邮件地址" aria-label="电子邮件地址" name="EMAIL" style="font-size: 0.8em; padding: .2em;">
</div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c79fb56a311ae347fbe916740_ec05dfca03" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot" style="display: flex; align-items: center; justify-content: center;">
<input type="submit" value="订阅" name="subscribe" style="min-width: 150px; font-size: 0.8em;" id="mc-embedded-subscribe" class="button btn btn-light btn-sm ms-auto me-auto">
</div>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
在帖子文件夹中设置 YAML 文件
接下来，在博客文件夹内创建一个 posts 文件夹，用于设置帖子的默认设置。 然后在 posts 文件夹内创建一个名为 _metadata.yml 的文件，并将下面的源代码复制并粘贴到该文件中。
评论：
giscus：
仓库: quarto-dev/quarto-web
类别： 博客
title-block-banner: "#EDF3F9"
title-block-banner-colour: body
toc-location: left
格式：
html：
include-after-body：
- ./signup.html
搜索: false
试着真正发帖
现在，让我们来进行实际发布。 创建一个文件夹，其中包含的文本将放在 posts 文件夹内的 url 地址中。在这里，我们将使用 2024-01-24-first-post 创建一个名为 index.qmd 的文件夹，并在其中创建一个 index.qmd 文件，然后复制并粘贴下面的源代码。 然后，运行渲染到 localhost，点击网站上的博客菜单，就可以看到第一篇文章已经完成，如下图所示。 顺便说一下，图片没有出现是因为我没有对其进行任何处理，不过我稍后会进行处理。
---.
标题： 博客上市成功
subtitle: 这是我的第一篇文章。
description: |
这比你想象的要难，但很有趣...
类别：
- Quarto
- 研究
作者: TERE
日期: "01/24/2024"
图像： "success.jpg"
image-alt: "一个孩子成功的图像"。
---.
这比听起来复杂，但很有趣。
那么，如果我们想第二次发布呢？如果你有预感，可以在 posts 文件夹中创建另一个帖子文件夹，并在该文件夹中创建和渲染 index.qmd。
在您撰写第一篇和第二篇文章时，您是否看到代码源窗口中的标题、副标题、描述、类别、作者和数据呈现良好，并且与您在网站博客菜单中看到的内容一致？有一点比什么都重要、 类别 您的博客中是否有按 "撰写"、"功能 "等分类的帖子？如果点击 "已呈现的博客 "菜单右中角 "类别 "下的列表，就可以进行筛选，只查看符合该关键词的博客。
我今天想写得简短易懂，但结果还是太长了。
直到有一天，生活中充满了模仿！ secondlife.lol by Terry是
谢谢
添加 1.在帖子列表中插入图片（作为缩略图）
让我们为网站博客菜单中列出的文章添加缩略图。 我们将使用创建的第一个文章文件夹 (2024-01-24-first-post)，然后打开 index.qmd 文件，并将缩略图添加到 图像 和 全图 那张照片。就是这样。比你想象的要简单，不是吗？ 当图片因某种原因无法显示时，你需要图像-alt 文本来替换图片。
添加 2. 在帖子中插入图片
要在帖子内容中插入图片，可以使用上面上传的图片。只需复制下面的源代码，然后粘贴到帖子内容的任意位置即可。当然，您需要将图片文件名（success.jpg）和 fig-alt 改成与下面源代码不同的名称。
{.preview-image fig-align="center "f fig-alt="这是一张孩子成功的图片"}。
'secondlife.lol'上的所有内容均受版权法保护。未经授权，禁止复制、拷贝、传播等。
