chtholly-daisuki的小屋

「器用贫乏」

0%

博客搭建

发表于 更新于 分类于
我在博客搭建过程中的经验、问题和收获

一、整体框架

试了试butterfly、shokaX，但没找到适合我的教程，尤其是shokaX感觉难度很大
无意间找到了找到了一篇教程，非常适合我这种有一点前端知识的博客小白
于是依照这篇教程的流程走下来，没遇到过太大问题

二、latex安装

1
npm install hexo-filter-mathjax --save

在根目录config.yml添加:

1
2
3
4
5
mathjax:
  tags: none
  single_dollars: true
  cjk_width: 0.9
  normal_width: 0.6

三、代码折叠功能的实现

整体流程

这篇博客

遇到的困难

走完流程之后，发现博客整个崩掉，f12控制台跳出错误：

Uncaught ReferenceError: $ is not defined在code-unfold.js

直接问ai，得到以下结果

$符是 JavaScript 库 jQuery 的常用别名，主要作用是简化 DOM 元素选择、事件绑定、样式操作等操作。例如 $(‘body’) 表示通过 jQuery 选择 元素，$(this).closest(…) 表示通过当前元素查找最近的父级元素等

解决办法

在主题的模板文件（layout/_layout.swig 或 layout/_partials/head.swig）中添加 jQuery 的 CDN 引用

1
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
1
2
3
4
5
6
7
8
9
<!--路径：\themes\next\layout\_partials\header\index.swig-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
{{ partial('_partials/header/brand.swig', {}, {cache: theme.cache.enable}) }}

{{ partial('_partials/header/menu.swig', {}, {cache: theme.cache.enable}) }}

{{ partial('_partials/search/index.swig', {}, {cache: theme.cache.enable}) }}

{{- next_inject('header') }}

以及

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
63
<!--路径：\themes\next\layout\_layout.swig-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="{{ config.language }}">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<head>
  {{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
  {% include '_partials/head/head-unique.swig' %}
  {{- next_inject('head') }}
  <title>{% block title %}{% endblock %}</title>
  {{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
  {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
    </header>

    {{ partial('_partials/widgets.swig', {}, {cache: theme.cache.enable}) }}

    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          {% include '_partials/header/sub-menu.swig' %}
          <div class="content {% block class %}{% endblock %}">
            {% block content %}{% endblock %}
          </div>
          {% include '_partials/comments.swig' %}
        </div>
        {%- if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {%- endif %}
      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        {% include '_partials/languages.swig' %}
        {{ partial('_partials/footer.swig', {}, {cache: theme.cache.enable}) }}
        {{ partial('_third-party/statistics/index.swig', {}, {cache: theme.cache.enable}) }}
      </div>
    </footer>
  </div>

  {{ partial('_scripts/index.swig', {}, {cache: theme.cache.enable}) }}
  {{ partial('_third-party/index.swig', {}, {cache: theme.cache.enable}) }}

  {%- if theme.pjax %}
    <div id="pjax">
  {%- endif %}
  {% include '_third-party/math/index.swig' %}
  {% include '_third-party/quicklink.swig' %}

  {{- next_inject('bodyEnd') }}
  {%- if theme.pjax %}
    </div>
  {%- endif %}
</body>
</html>

延伸出的疑问

swig是什么

.swig文件是 Swig 模板引擎 使用的模板文件，主要用于动态生成 HTML、XML 等文本内容，广泛应用于 Web 开发中实现 “模板与数据分离”。
核心概念：Swig 模板引擎
Swig 是一款轻量、高性能的模板引擎，最初设计用于 Node.js 环境（可配合 Express 等 Web 框架使用），支持多种动态语法（如变量注入、循环、条件判断、模板继承等），帮助开发者复用页面结构、减少冗余代码。简单来说，.swig 文件就像一个 “模板骨架”，其中预留了动态数据的位置，通过后端代码将数据注入后，Swig 会解析模板并生成最终的静态内容（如 HTML）返回给浏览器。
.swig 文件的特点与语法
基础语法
见下方的swig代码
核心作用
分离静态布局与动态数据：页面结构（如导航栏、页脚）写在模板中复用，动态数据（如用户信息、列表内容）由后端动态传入。提高开发效率：通过模板继承、子模板引入，避免重复编写相同代码（如公共头部 / 尾部）。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--swig基础语法：
变量输出：用 {{ 变量名 }} 表示，例如 {{ user.name }} 会输出后端传入的 user 对象的 name 属性。
逻辑标签：用 ${%标签%}$ 表示，支持条件判断（if/else）、循环（for）、模板继承（extends）、引入子模板（include）等。-->
<!-- 条件判断 -->
{% if isLogin %}
  <p>欢迎回来，{{ username }}！</p>
{% else %}
  <p>请先登录</p>
{% endif %}

<!-- 循环 -->
<ul>
  {% for item in list %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

<!-- 模板继承（复用公共布局） -->
{% extends 'base.swig' %}  <!-- 继承基础模板 -->
{% block content %}        <!-- 填充基础模板中的 content 区块 -->
  这里是页面具体内容
{% endblock %}

cdn是什么

在主题的模板文件（layout/_layout.swig 或 layout/_partials/head.swig）中添加 jQuery 的 CDN 引用

1
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

CDN（内容分发网络，Content Delivery Network）是一种分布式网络架构，旨在通过将内容缓存到多个地理位置的边缘节点服务器上，提升用户访问速度并优化网络性能。它覆盖在承载网之上，由分布在不同区域的边缘节点组成，能够有效解决网络延迟、带宽限制和跨运营商访问等问题。