给SAO_Utils右键菜单增加功能

以下功能可能只适用于Butterfly主题

作者留言

本人非前端专业，所以书写上可能不是那么简洁美观😅，还请各位见谅。

源码

新建[\source\js\diy.js]或者直接在原作者的[\themes\butterfly\source\js\SAO_Menu.js]中添加以下源码。

提取自Butterfly主题[\themes\butterfly\source\js\main.js]源码

function openDarkMode() { // Switch Between Light And Dark Mode
  const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
  if (nowMode === 'light') {
    activateDarkMode();
    saveToLocal.set('theme', 'dark', 2);
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night);
  } else {
    activateLightMode();
    saveToLocal.set('theme', 'light', 2);
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day);
  }
  // handle some cases
  typeof utterancesTheme === 'function' && utterancesTheme();
  typeof changeGiscusTheme === 'function' && changeGiscusTheme();
  typeof FB === 'object' && window.loadFBComment();
  window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200);
  typeof runMermaid === 'function' && window.runMermaid();
}

提取自Butterfly主题[\themes\butterfly\source\js\main.js]源码。
[！注意]：[SnackbarIMGES(‘你已切换为双栏’, 2000)]这个提示弹窗需要添加相应的源码，详情看自定义提示弹窗

function openhideAsideBtn() { // Hide aside
  const $htmlDom = document.documentElement.classList;
  $htmlDom.contains('hide-aside')
    ? saveToLocal.set('aside-status', 'show', 2) || SnackbarIMGES('你已切换为双栏', 2000)
    : saveToLocal.set('aside-status', 'hide', 2) || SnackbarIMGES('你已切换为单栏', 2000);
  $htmlDom.toggle('hide-aside');
}

Butterfly主题自带样式提示弹窗
食用SnackbarIMGES(提示文本，停留时长)

function SnackbarIMGES(text, time) {
  const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
  const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
  Snackbar.show({
    text: '✨ ' + text + ' ✨',
    backgroundColor: bg,
    pos: position,
    actionText: '🍭🔮🎨🎊🍬',
    duration: time,
    // showAction: false,
    // onActionClick: function(e) {
    // location.reload()
    // },
  });
};

提示弹窗美化[本博客样式]
新建[\source\css\diy.css]添加以下源码。

/* 弹窗魔改 */
.snackbar-container {
  border-radius: 30px !important;
  /* color: #fff; */
}
.snackbar-container p {
  font-weight: 800!important;
  color: #000000 !important;
  /* font-weight: 600; */
}
/*夜间模式*/
[data-theme="dark"] .snackbar-container p,
.snackbar-container .action {
  color: #ffffff !important;
}

看板娘样式提示弹窗
食用showMessagePIUS(提示文本，停留时长，优先级)

function showMessagePIUS(text, timeout, priority) {
  if (!text || (sessionStorage.getItem("waifu-text") && sessionStorage.getItem("waifu-text") > priority)) return;
  // if (messageTimer) {
  //     clearTimeout(messageTimer);
  //     messageTimer = null
  // }
  // text = randomSelectionPIUS(text);
  sessionStorage.setItem("waifu-text", priority);
  const tips = document.getElementById("waifu-tips");
  tips.innerHTML = "✨"+text+"✨";
  tips.classList.add("waifu-tips-active");
  setTimeout(() => {
      sessionStorage.removeItem("waifu-text");
      tips.classList.remove("waifu-tips-active")
  }, timeout)
}

提取自看板娘[https://github.com/stevenjoezhang/live2d-widget/blob/master/waifu-tips.js]源码。
[！注意]：[SnackbarIMGES(‘你好，我是Naokuo的小助手！’, 10000)]和[showMessagePIUS(“你好，我是Naokuo的小助手！”, 10000, 15)]提示弹窗需要添加相应的源码，详情看自定义提示弹窗

function openlive2d() {
  var w = document.getElementById("waifu-toggle");
  var wa = document.getElementById("waifu").style;
  if (w.classList == "waifu-toggle-active") {
    SnackbarIMGES('你好，我是Naokuo的小助手！', 10000);
    showMessagePIUS("你好，我是Naokuo的小助手！", 10000, 15);
    w.classList.remove("waifu-toggle-active");
    // wa.bottom = "0px";
    if (w.getAttribute("first-time")) {
      loadWidget(config);
      w.removeAttribute("first-time");
    } else {
      localStorage.removeItem("waifu-display");
      wa.display = "";
      setTimeout(() => {
        wa.bottom = 0;
      }, 0);
    }
  } else {
    localStorage.setItem("waifu-display", Date.now());
    SnackbarIMGES('愿有一天能与你再次重逢！', 10000);
    showMessagePIUS("愿有一天能与你再次重逢！", 3000, 15);
    wa.bottom = "-500px";
    setTimeout(() => {
      wa.display = "none";
      w.classList.add("waifu-toggle-active");
    }, 3000);
  }
}

提取自Butterfly主题[\themes\butterfly\source\js\main.js]源码。
[！注意]：[SnackbarIMGES(‘你已关闭阅读模式’, 2000)]这个提示弹窗需要添加相应的源码，详情看自定义提示弹窗

function openReadMode() { // read-mode
  const $body = document.body;
  const newEle = document.createElement('button');
  // var r = document.body.classList;
  if ($body.classList=="read-mode") {
    SnackbarIMGES('你已关闭阅读模式', 2000);
    $body.classList.remove('read-mode');
    newEle.remove();
    newEle.removeEventListener('click', clickFn);
  } else {
    SnackbarIMGES('你已打开阅读模式', 2000);
    $body.classList.add('read-mode');
    newEle.type = 'button';
    newEle.className = 'fas fa-sign-out-alt exit-readmode';
    $body.appendChild(newEle);
    newEle.addEventListener('click', clickFn)
  }
}

提取自Butterfly主题[\themes\butterfly\source\js\main.js]源码。

1
2
3

function openToTop() { // Back to top
  btf.scrollToDest(0, 500);
}

数组方案切换

////背景切换
//图片数组
var fruItsIMGes = [
  "https://tva4.sinaimg.cn/large/9bd9b167gy1g4lhiavgk7j21hc0xcdsm.jpg",
  "https://tva4.sinaimg.cn/large/9bd9b167gy1g4lhiavgk7j21hc0xcdsm.jpg",
  "https://tva4.sinaimg.cn/large/9bd9b167gy1g4c8qgp8yhj21hc0u0tk8.jpg"
];
//图片数组位置
var openImag3 = 0;
//图片数组数量
var openIMAgesQU = 0;
//图片实际数量
var iMAgesQU = 1;
function openImage() {
  SnackbarIMGES('你已切换背景：第' + iMAgesQU + '张', 2000) || showMessagePIUS('背景：第' + iMAgesQU + '张好看吗', 3000, 15);
  document.getElementById("web_bg").style.backgroundImage = "url(" + fruItsIMGes[openImag3] + ")";
  //获取数组数量
  openIMAgesQU = fruItsIMGes.length;
  if (openImag3 >= openIMAgesQU - 1) {
    openImag3 = 0;
    iMAgesQU = 1;
  } else {
    openImag3++;
    iMAgesQU++;
  }
}

随机图API方案切换
[！注意]：不知道什么原因，请求不到JSON数组

// GET请求
function httpGetAsyncIMGES(theUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true); // 对于异步
  xmlHttp.send(null);
}
function openImageApi() { //按钮请求数组
    var url = 'https://www.dmoe.cc/random.php?return=json';
    httpGetAsyncIMGES(url, function (result) {
        var obj = JSON.parse(result);
        var imgurl = obj.imgurl;
        document.getElementById("web_bg").style.backgroundImage = "url(" + imgurl + ")";  
    });
}

在原作者的[themes\butterfly\layout\includes\SAO-menu.pug]中添加以下源码。

audio#SAOlauncher(src=Launcher)
audio#SAOClick(src=Click)
audio#SAOPanel(src=Panel)
audio#SAOAlert(src=Alert)
++  audio#SAOImge(src='https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/img.mp3')

新建[\source\js\diy.js]或者直接在原作者的[\themes\butterfly\source\js\SAO_Menu.js]中添加以下源码。

//背景切换时，点击音效
function imgeAudio() {
  var imgeAudio = document.getElementById("SAOImge");
  if (imgeAudio) {
    imgeAudio.play();//有音频时播放
  }
}

在[themes\butterfly\layout\includes\rightside.pug]中添加以下源码。

mixin rightsideItem(array)
  each item in array
    case item
++    when 'saosimge'
++      if theme.Open_Imge.enable
++        button#ranklist_imge(type="button" title=_p("热门背景图片切换") onclick="imgeAudio();openImage()")
++        i.fas.fa-images

在[themes\butterfly\layout\includes\rightside.pug]中修改以下源码。

1	- const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside','saosimge']

在[_config.butterfly.yml]中添加以下源码。

1
2
3

# 壁纸切换按钮
Open_Imge:
  enable: true # 总开关

</div></div>

</div>