为hexo博客支持sweetalert弹窗
本教程内容是建立在 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");
}
}
}
即可。
后续
可以自行探索哦~
推荐文章 看看别的吧，也许有用呢~
