定制网站

更新-260725 | 发布-260723

✳️ 目录
ℹ️ 更新

260705
//新增：修改导航

修改字体大小

和大模型多轮交流，并参考 Minimal Mistakes 官网↗（其实没有找到有价值信息😀），得到解决方案：创建一个 css 文件，指定字体大小，去覆盖主题默认字体大小。

1、新建 css 文件

本网站是通过 mm-github-pages-starter↗ → 点击 Use this template，在 github 上新建仓库，（然后在仓库的 Setting → Pages 做相关操作，发布为网站），完成的。然后 git clone 该仓库到本地 PC（个人电脑），以便在本地能持续更新网站。

因此，要新建 网站根目录 / assets / css / main.scss，因为通过上述方式创建的网站，并没有文件 main.scss（.scss 可以理解为就是 css 文件。更多信息可自行查找）。以本网站为例：

  • github 账号是：gdvzz
  • 本网站的仓库是： ai3
  • 在 github 上，本网站的文件，都是放在 gdvzz / ai3 下面
  • 因此在本地 PC（个人电脑），也建了类似目录：~/gdvzz/ai3 ~ 表示本地电脑上的用户的 HOME 目录
  • main.scss 就放在 ~/gdvzz/ai3/assets/css 目录中

2、修改 css 样式

main.scss 内容如下：

---
---
@charset "utf-8";
@import "minimal-mistakes/skins/default";
@import "minimal-mistakes";

/* 强制所有屏幕尺寸下根字号为 16px（直接粘贴你写的那段规则） */
html { font-size: 16px; }

@media (min-width: 48em) { html { font-size: 16px; } }
@media (min-width: 64em) { html { font-size: 16px; } }
@media (min-width: 80em) { html { font-size: 16px; } }

说明：

  • @media 称之为“媒体查询”。通过该手段可实现在不同屏幕尺寸下，使用不同大小的字体。
  • 主题默认在大屏幕下（电脑屏幕）使用 22px 大小的字体。个人觉得有点太大，就不高级。
  • 上述 main.scss 的内容，就是在所有尺寸屏幕下，都使用 16 px 大小的字体。

3、推送到 github

执行 git push 到 github，在电脑端稍候片刻刷新网站，就可以得到期望结果。

网站统计

  1. 访问 百度统计↗，注册并登录。
  2. 进入「管理」→「新增网站」，填写你的网站域名、首页 URL 等信息。

  3. 提交后会得到一段 JS 代码，类似：

     <script>
 var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 hm.src = "https://hm.baidu.com/hm.js?你的统计ID";
 var s = document.getElementsByTagName("script")[0]; 
 s.parentNode.insertBefore(hm, s);
 })();
 </script>

  4. 新建 html 文件，将上述代码粘贴进去。

    新建文件：网站根目录/_includes/head/custom.html

  5. 推送到 github。

修改导航

1、新增页面

新增页面 _pages/fsem.md，内容如下：

---
title: "就业"
permalink: /fsem/   # 固定链接，后续导航栏会用到
layout: single            # 使用单栏布局，干净简洁
---

欢迎来到就业板块，请选择您感兴趣的类别：

<div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
  <a href="/categories/jobs/" style="padding: 15px 30px; background: #f0f0f0; border-radius: 8px; text-decoration: none; font-weight: bold;">📝 求职</a>
  <a href="/categories/recam/" style="padding: 15px 30px; background: #f0f0f0; border-radius: 8px; text-decoration: none; font-weight: bold;">📢 招聘</a>
  <a href="/categories/exp/" style="padding: 15px 30px; background: #f0f0f0; border-radius: 8px; text-decoration: none; font-weight: bold;">💡 经验</a>
</div>

<p style="margin-top: 30px;">点击上方链接，查看对应分类下的所有文章。</p>

2、修改主导航

main:
- title: "就业"
    url: /fsem/

3、新增存档页面

新增 _pages/cat-recam.md，内容如下：


---
title: "招聘"
layout: archive
permalink: /categories/recam/
---

{% assign posts = site.categories.recam %}
{% for post in posts %}
  {% include archive-single.html %}
{% endfor %}

新增 _pages/cat-jobs.md，内容如下：


---
title: "求职"
layout: archive
permalink: /categories/jobs/
---

{% assign posts = site.categories.jobs %}
{% for post in posts %}
  {% include archive-single.html %}
{% endfor %}

新增 _pages/cat-exp.md，内容如下：


---
title: "经验"
layout: archive
permalink: /categories/exp/
---

{% assign posts = site.categories.exp %}
{% for post in posts %}
  {% include archive-single.html %}
{% endfor %}

✳️ 这里展示 cat-exp.md 的内容时，要加上 ` `，否则内容（代码）就被解释了，从而不能正确显示。