抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

本教程内容是建立在 Volantis 主题上的,其它主题理论上都可以实施,应用可以按照需要添加。

概述

简介

Sweetalert 是一个 javascript,因弹窗精美以替代原有的 alert 的弹窗显示。有关 Sweetalert 的官方文档在这里:

目前还没有人对 hexo 博客做出 Sweetalert 的适配,因此今天弟兄们来一发🔫

效果展示

Sweetalert 提供了4种弹窗:warning,success,info,error 具体到文档查看效果

转到主页查看 info 弹窗。

安装

Sweetalert 的文档中给出了2种方法进行安装。

npm 安装(不推荐)

先执行安装

npm install sweetalert --save

然后导入

import swal from 'sweetalert';

直接利用 CDN(推荐)

打开主题目录下的 layout/_partial/head.ejs,在

<meta charset="utf8">

标签的下面添加

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

即可。

应用实例

添加进入网页的欢迎弹窗

示例:网站首页。

layout/index.ejs 改为

<script>
  swal("欢迎来到 Luosw 的小窝!", "不如去留言板看看,说说也可以呢~", "info");
</script>
<!--上面是添加的-->
<%- partial('_pre') %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
  <%- partial('_partial/archive') %>
</div>
<%- partial('_partial/side') %>

其中 swal() 中的内容自行修改即可。

值得说明的是,函数swal()的参数内容,这在后面自行修改很有用。

教程

单信息弹窗(无图标)

<script>swal("信息内容");</script>

带标题信息弹窗(无图标)

<script>swal("信息标题","信息内容");</script>

带标题信息图标弹窗

示例:

<script>
  swal("欢迎来到 Luosw 的小窝!(标题)", "不如去留言板看看,说说也可以呢~(内容)", "info(种类)");
</script>

自定义选项

意义见英文。

<script>
swal({
  title: "Good job!",//标题
  text: "You clicked the button!",//内容
  icon: "success",//图标
  button: "Aww yiss!",//按钮文字
});
</script>

复制代码弹窗

打开 layout/third-party/_clipboard/script.ejs,在第 20 行

clipboard.off('success').on('success', function (e) {

下方添加下列代码

swal({
        title: '复制成功',
        text: "代码已复制,请遵守相关授权协议。",
        icon: 'success',
        button: "我承诺遵守",
});

即可。

右键菜单栏复制弹窗

图片链接地址、链接地址复制弹窗

打开 layout/_pratical/rightmenu.ejs,找到

function copyString(str) {

在函数的定义最后添加

swal({
      title: '复制成功',
      text: "文本/链接已复制,请遵守相关授权协议。",
      icon: 'success',
      button: "我承诺遵守",
    });

这样函数变成

function copyString(str) {
    const input = document.createElement('input');
    input.setAttribute('readonly', 'readonly');
    document.body.appendChild(input);
    input.setAttribute('value', str);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    swal({
      title: '复制成功',
      text: "文本/链接已复制,请遵守相关授权协议。",
      icon: 'success',
      button: "我承诺遵守",
    });
  }

文本复制弹窗

先在主题 _config.yml 中找到

clipboard:
    enable: false

启用它,即把 enable 字段设为 true

enable: true

打开 layout/_pratical/rightmenu.ejs,找到

let copyText = document.getElementById('menu-copy-text');
    copyText.style.display = 'none';
    hrText.style.display = 'none';
    if (href.length == 0) {
      // 选中文本
      if (window.getSelection().toString()) {
        if ('<%= theme.plugins.clipboard.enable %>' == 'true') {
          copyText.style.display = 'block';
          hrText.style.display = 'block';
        }
      }
    }

找到

if ('<%= theme.plugins.clipboard.enable %>' == 'true') {

在下一行添加

let str_luosw = window.getSelection().toString();

然后找到

hrText.style.display = 'block';

在下一行添加

copyText.addEventListener("click", function (e) {
   copyString(str_luosw);
}, {
   once: true
});

即可。

这样整个片段就变成

let copyText = document.getElementById('menu-copy-text');
    copyText.style.display = 'none';
    hrText.style.display = 'none';
    if (href.length == 0) {
      // 选中文本
      if (window.getSelection().toString()) {
        if ('<%= theme.plugins.clipboard.enable %>' == 'true') {
          let str_luosw = window.getSelection().toString();
          copyText.style.display = 'block';
          hrText.style.display = 'block';
          copyText.addEventListener("click", function (e) {
            copyString(str_luosw);
          }, {
            once: true
          });
        }
      }
    }

自动夜间模式+弹窗

参考了这篇文章:

打开主题目录下 layout/_partial/scripts/darkmode.ejs,在第一行添加

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Colsrch/CDN@master/judge_time/js.js"></script>

然后在最后

</script>

前添加下面的代码

// 自动夜间模式
  if (navigator.geolocation) { //获取地理位置 用于判断日出日落时间
    navigator.geolocation.getCurrentPosition(
      function (position) {
        var res = computeSunRiseSunSet(position.coords.latitude, position.coords.longitude, 8);
        console.log(res.str)
        adjust_time(res.strSunRise, res.strSunSet, "08:00", "12:00", "14:00", "23:00")
      },
      function (e) {
        adjust_time("7:00", "17:30", "08:00", "12:00", "14:00", "23:00") //未允许获取地理位置时,使用默认时间
        console.log("未允许获取地理位置,使用默认配置时间")
        throw (e.message);
      }
    )
  }

  function adjust_time(beginTime, endTime, morningTime, noonTime, afternoonTime, nightTime) {
    const rootElement = document.documentElement;
    var strb = beginTime.split(":");
    if (strb.length != 2) {
      return false;
    }

    var stre = endTime.split(":");
    if (stre.length != 2) {
      return false;
    }

    var strmorning = morningTime.split(":"); //12点
    if (stre.length != 2) {
      return false;
    }

    var strnoon = noonTime.split(":"); //12点
    if (stre.length != 2) {
      return false;
    }

    var strafternoon = afternoonTime.split(":"); //13点
    if (stre.length != 2) {
      return false;
    }

    var strnight = nightTime.split(":"); //23点
    if (stre.length != 2) {
      return false;
    }

    var b = new Date();
    var e = new Date();
    var n = new Date();
    var morning = new Date();
    var noon = new Date();
    var afternoon = new Date();
    var night = new Date();

    b.setHours(strb[0]);
    b.setMinutes(strb[1]);
    e.setHours(stre[0]);
    e.setMinutes(stre[1]);
    morning.setHours(strmorning[0]);
    morning.setMinutes(strmorning[1]);
    noon.setHours(strnoon[0]);
    noon.setMinutes(strnoon[1]);
    afternoon.setHours(strafternoon[0]);
    afternoon.setMinutes(strafternoon[1]);
    night.setHours(strnight[0]);
    night.setMinutes(strnight[1]);


    //在这里面处理获得的数据
    if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
      var daytimetitle = "";
      var daytimemessage = "";
      if (n.getTime() - morning.getTime() < 0) {
        // 早上
        daytimetitle = "早安";
      } else if (n.getTime() - noon.getTime() < 0) {
        // 上午
        daytimetitle = "上午好";
      } else if (n.getTime() - afternoon.getTime() < 0) {
        // 中午
        daytimetitle = "中午好";
        daytimemessage = "要注意休息哦~";
      } else {
        // 下午
        daytimetitle = "下午好";
      } // 判断是否已经开启夜间模式
      if (rootElement.getAttribute('data-user-color-scheme', 'dark')) { // 已开启夜间模式,修改按钮状态
        swal(daytimetitle, daytimemessage, "info");
      } else { // 未开启夜间模式,不执行操作
        swal("操作通知", daytimetitle + ",已自动为您切换为日间模式。" + daytimemessage, "success");
        const mode = toggleCustomDarkMode();
        applyCustomDarkModeSettings(mode);
      }
    } else { // 晚上
      var nighttitle = "";
      var nightmessage = "";
      if (night.getTime() - n.getTime() < 0 || n.getTime() - b.getTime() < 0) {
        nighttitle = "夜深了";
        nightmessage = "该睡觉啦~";
      } else {
        nighttitle = "晚上好";
        nightmessage = "吃晚饭了吗?要注意眼睛哦。";
      } // 判断是否已经开启夜间模式
      if (rootElement.getAttribute('data-user-color-scheme', 'dark')) { // 已开启夜间模式,不执行操作 
        swal("操作通知", nighttitle + ",已自动为您切换为夜间模式。" + nightmessage, "success");
        const mode = toggleCustomDarkMode();
        applyCustomDarkModeSettings(mode);
      } else { // 未开启夜间模式,修改按钮状态
        swal(nighttitle, nightmessage, "info");
      }
    }
  }

即可。

后续

可以自行探索哦~

发言区

留下自己的足迹吧~