如何做一个像这样的网站

Posted on Mon, Jan 9, 2023 教程 项目

因为我有时候想实现定制化的需求，于是可能会不定时更新这篇文章。

关于Notablog作者的博客

这是他的链接：https://dragonman225.js.org/；他的GitHub：https://github.com/dragonman225；如果我们需要更改博客的样式，则需要在 notablog-starter 中修改。

如何发布Notion Pages至GitHub

我喜欢Notion，所以我找到了一个博客，它是关于如何构建基于Notion的网站并自动上传到GitHub Pages的详细教程。具体请参考博客（链接）或知乎（链接）。

请注意，如果要添加新页面，应复制现有行之一以确保格式一致。

此外，页面的自动上载需要等到 workflow/main.yml 设置的时间。但是，在Notion中完成后，您可以手动执行工作流以等待上载页面，这通常需要不到10分钟的时间。

如果你需要一个留言板

我添加了一个名为 uttenrenc.es 的GitHub应用程序来启用评论/留言。您可以单击（此处）看看作者是如何解决这个问题的。

具体方案如下：使用 utteranc.es 更改下面的 notablog-starter/themes/pure-ejs/layouts/post.html 部分，生成自己的脚本。

<%- post.contentHTML %>
    <script src="https://utteranc.es/client.js"
        repo="Iris1e27/Iris1e27.github.io"
        issue-term="pathname"
        label="✨"
        theme="github-light"
        crossorigin="anonymous"
        async>
    </script>

你也可以使用 disqus 这是一个收费的强大网络社区平台，适用于各种网站，或使用 giscus，这是一个由 GitHub discussion 提供支持的免费评论系统。

总的来说，disqus 的定价是为了取消广告，但比 giscus 和 utterances 更强大，因为它有许多登录方法和自己的服务器来存储数据（参见此处）。然而，为了免费使用，utterances 和 giscus 应该是更好的选择。

如果你需要一个返回顶部（目录）/底部（留言板）的按钮

这个内容是我自己添加的，但我本人也是前端新手，所以欢迎各位前端大佬提出修改意见。

首先，你需要先修改 notablog-starter/themes/pure-ejs/layouts/post.html 中位于</header>与<script >留言板的代码，改成如下内容：

即，添加了两个anchor的<div>标签，一个id是content-html，一个id是message-board；然后增加新的<aside>内容，其中包含上下的手势（当然你也可以改成别的）。这样HTML页面就做好了。

</header>
    <div id="content-html"></div>
  <%- post.contentHTML %>
    <aside class="Aside">
        <a href="#content-html"><div id="up">👆</div></a>
        <a href="#message-board"><div id="down">👇</div></a>
    </aside>
    <div id="message-board"></div>
    <script src="https://utteranc.es/client.js"
        repo="Iris1e27/Iris1e27.github.io"
        issue-term="pathname"
        label="✨"
        theme="github-light"
        crossorigin="anonymous"
        async>
    </script>

其次，来到 notablog-starter/themes/pure-ejs/assets/css/ 中，增加一个新的css文件，名为CustomSetting.css，并添加如下代码：

即，添加了up down按钮的样式，其中 @media only screen and (max-width: 900px) 的部分代表手机屏幕适配的按钮大小，当然你可以将颜色、位置换成你喜欢的。这样CSS样式就做好了。

/* up and down buttom */
.Aside #up {
  background-color: rgba(230, 165, 250, 0.3);
  position: fixed;
  right: 20px;
  bottom: 85px;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.Aside #up:hover {
  background-color: rgb(160, 2, 252);
}

.Aside #down {
  background-color: rgba(129, 192, 242, 0.3);
  position: fixed;
  right: 20px;
  bottom: 20px;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}
.Aside #down:hover {
  background-color: rgb(45, 150, 233);
}

@media only screen and (max-width: 900px) {
  .Aside #up {
    right: 15px;
    bottom: 65px;
    width: 25px;
    height: 25px;
    line-height: 25px;
  }
  .Aside #down {
    right: 15px;
    width: 25px;
    height: 25px;
    line-height: 25px;
  }
}@media only screen and (max-width: 900px) {
  .Aside #up {
    right: 15px;
    bottom: 65px;
    width: 25px;
    height: 25px;
    line-height: 25px;
  }
  .Aside #down {
    right: 15px;
    width: 25px;
    height: 25px;
    line-height: 25px;
  }
}

然后，来到 notablog-starter/themes/pure-ejs/layouts/partials/head.html 中，添加最后一行代码在notablog那一行代码的下方：

这样CSS样式表就被引入到了header中，也就引入了包含header的post.html中，样式就可以正常显示了。

<link rel="stylesheet" type="text/css" href="css/SourceSansPro.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/notablog.css">
<link rel="stylesheet" type="text/css" href="css/CustomSetting.css">

如果