sweetalert弹窗

step1：butterfly引入

在inject的bottom处加入：

1
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

step1：nexT引入

修改_layout.njk:

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
<!DOCTYPE html>
<html lang="{{ page.lang }}">
<head>
  {{ partial('_partials/head/head.njk', {}, {cache: theme.cache.enable}) }}
  {%- include '_partials/head/head-unique.njk' -%}
  <title>{% block title %}{% endblock %}</title>
  {{ partial('_third-party/analytics/index.njk', {}, {cache: theme.cache.enable}) }}
  {{- next_inject('head') }}
  <noscript>
    <link rel="stylesheet" href="{{ url_for(theme.css) }}/noscript.css">
  </noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage"{% if theme.motion.enable %} class="use-motion"{% endif %}>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
+【修改这里】  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader">
        {%- include '_partials/header/index.njk' -%}
      </header>
      {%- if theme.sidebar.display !== 'remove' %}
        {% block sidebar %}{% endblock %}
      {%- endif %}
    </div>

step2：点击式调用

在指定文章内，输入：

1
<button id="btn1-1" class="btn btn-primary btn-lg m-3"> 按钮文字 </button>

并在文章末尾，输入：

1
2
3
4
5
6
7
8
9
10
11
<script>
  $('#btn1-1').click(function () {  //名字要与调用时的button id一致
    swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});

  })
</script>

更多效果请翻阅sweetalert官方文档。

step2：自动调用

在文章任意位置，输入：

1
2
3
4
5
6
7
8
9
10
11
<script>
if (sessionStorage.getItem("isPopupWindow") != "1") {
    swal({
  title: "TITLE",
  text: "text",
  icon: "success",
  button: "OK",
});
sessionStorage.setItem("isPopupWindow", "1");
}
</script>

昼夜切换调用

step1：修改自定义js（如custom.js）

添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function darkmod(){
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
    }

}

function lightmod(){
    document.documentElement.setAttribute('data-theme', 'light')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
        document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
    }
}

step2：修改导航栏

1
2
3
模式 || fas fa-adjust hide:
  黑夜模式:  javascript:darkmod()
  白昼模式: javascript:lightmod()

当然，也可以用超链接的方式调用：
黑夜模式
白昼模式
许多function都在内置文件中。利用相似的方法，可以自行调用很多函数。