概述

本功能通过获取友联页面信息,配合随机函数制作的类似于@开往的一个项目

添加代码

不知道如何添加代码的同学,可以看这篇文章

本代码由@张洪大佬页脚 JS 改造而来

//默认以主题 Butterfly 为例
/**友联跳转 */
function random_flink() {
  fetch("/link")
    .then((e) => e.text())
    .then((e) => {
      let t = document.createElement("div");
      t.innerHTML = e;
      let n = t.getElementsByClassName("flink-item-name");
      let l = t.querySelectorAll(".flink-list-item a");
      n = Array.from(n);
      l = Array.from(l);
      var a = 5; //可设置为任意开始的位置
      var b = l.length; //可设置位任意结束的位置
      var num = Math.floor(Math.random() * eval(b) + eval(a)) - 1;
      var n_name = n[num].innerText;
      btf.snackbarShow("温馨提示,您即将前往" + n_name, !1, 3e3);
      function jump() {
        window.location.href = l[num];
      }
      setTimeout(jump, 2000);
    });
}

参数说明

选项	说明
fetch	填写你的友联页面,如"/link"
n	填写你友联页面中,网站名称哪一项的`class`
a	随机数开始生成的区间,默认为 0,可自行调节
l	填写你友联页面中,地址的一项
setTimeout	延迟,默认 2s

开启弹窗

找到主题的配置文件(~~大约在 840 行左右~~)

# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
snackbar:
  enable: true
  position: top-center #弹窗显示位置可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
  bg_light: "#1f1f1f" # 明亮主题下的背景
  bg_dark: "#1f1f1f" # T暗黑模式下的背景

修改主题文件

需要修改的文件在\themes\butterfly\layout\includes\header\nav.pug,其他主题可自行查找菜单的 PUG 文件所在

nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]

  #menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search-button
        a.site-page.social-icon.search
          i.iconfont.icon-sousuo
          span=' '+_p('search.title')
+    #random_flink(onclick='random_flink()')
+      i.fas.fa-bus.fa-fw //图标可自行选择
+      span='串门'


    !=partial('includes/header/menu_item', {}, {cache: true})

    #toggle-menu
      a.site-page
        i.fas.fa-bars.fa-fw

修改 css

在你的自定义 CSS 文件中,加入以下信息

#nav #random_flink {
  display: inline;
  padding: 0 0 0 14px;
  font-size: 16px;
}

其中font-size有你决定,可以在控制台中进行测试

第三方主题

如果您的主题不包含SnackBar模块,可找寻其他弹窗替代,本文使用SnackBar示例

通过外部链接引入文件

1
2
3

inject:
  - <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/node-snackbar@latest/src/js/snackbar.min.js"></script>
  - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/node-snackbar@latest/dist/snackbar.min.css" />

Key	Default	Description
text	null	The text to displae inside the notification.
textColor	#FFFFFF	Text color of the notification text. Default is white.
pos	bottom-left	The position the notification will show. Refer to the examples above for possible positions.
customClass	null	Add a custom class to the notification for custom styling.
width	auto	Width of the notification. Used to shrink/expand window as you wish.
showAction	true	Boolean to show the action buton or not.
actionText	Dismiss	Text to display as the action button.
actionTextAria	Dismiss, Description for Screen Readers	Text for screen readers.
alertScreenReader	false	Determines if screen readers will annouce the snackbar message.
actionTextColor	#4CAF50	Text color of the action button.
backgroundColor	#323232	Background color of the notification window.
duration	5000	Time in milliseconds the notification is displayed before fading out.
onActionClick	function(ele)	Default action closes the notification.
onClose	function(ele)	Fires when the notification has been closed.

示例

1
2
3

$(".button").click(function () {
  Snackbar.show({ text: "示例" });
});

代码替换

/**友联跳转 */
function random_flink() {
  fetch("/link")
    .then((e) => e.text())
    .then((e) => {
      let t = document.createElement("div");
      t.innerHTML = e;
      let n = t.getElementsByClassName("flink-item-name");
      let l = t.querySelectorAll(".flink-list-item a");
      n = Array.from(n);
      l = Array.from(l);
      var a = 5; //可设置为任意开始的位置
      var b = l.length; //可设置位任意结束的位置
      var num = Math.floor(Math.random() * eval(b) + eval(a)) - 1;
      var n_name = n[num].innerText;
      Snackbar.Show({ test: "温馨提示,您即将前往" + n_name }, !1, 3e3);
      function jump() {
        window.location.href = l[num];
      }
      setTimeout(jump, 2000);
    });
}

后记

代码因为是由另一个功能改的,可能不太完善,如果有更好的方案建议在评论区留言

为你的网站添加'串门'功能

概述