给BearSimple主题加一个友链随机跳转
林墨白
撰写于 2024年 05月 07 日

话说

因为BearSimple主题功能太多，昨天才发现有一个幻灯片的功能没使用，但是我好像没有什么东西可以放上去，思来想去好像可以做一个友链随机跳转。
本站随机跳转链接(点击幻灯片一样的效果)：https://blog.lmb520.cn/other/links-go.php

实现

BearSimple有独立的友链数据库表，所以可以直接用php连接数据库获取友链链接，进行随机访问。中间过渡页面是使用开往的plain简洁版页面(作者是：Lifeni)
具体代码如下：

<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script async src="https://umami.luochancy.com/script.js" data-website-id="23ac5682-b5b5-4013-8a32-5ceb3e598df2"></script>
  <title>星际穿梭中 - 哈喽！林墨白</title>
  <meta
    name="description"
    content="沉墨满纸，一笑若白。——林墨白"
  />
  <link rel="shortcut icon" href="https://files.blog.lmb520.cn/assets/img/logo/pink-black.png" />
<link rel="stylesheet" href="https://files.blog.lmb520.cn/assets/css/links-go.css">
</head>
<body>
<?php
// 数据库连接信息
$servername = "xxxx";
$username = "xxxx";
$password = "xxxxx";
$dbname = "xxxxx";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询有效博客
$sql = "SELECT friendurl, friendname FROM typecho_bscore_friendlinks WHERE status = 'approved'";
$result = $conn->query($sql);

// 存储有效博客的数组
$links = array();

// 将有效博客存储到数组中
if ($result && $result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $friendUrl = $row["friendurl"];
        $friendName = $row["friendname"];
        // 确保友情链接是有效的URL格式
        if (filter_var($friendUrl, FILTER_VALIDATE_URL)) {
            $links[] = array("url" => $friendUrl, "name" => $friendName);
        }
    }
} else {
    echo "没有有效博客";
    $conn->close();
    exit();
}

// 关闭数据库连接
$conn->close();

// 随机选择一个博主
if (!empty($links)) {
    $random_link = $links[array_rand($links)];
    
    // 过渡页面显示时间
    echo '<script>
            setTimeout(function() {
              window.location.replace("' . $random_link["url"] . '");
            }, 3000); 
          </script>';
} else {
    echo "没有有效博客";
    exit();
}
?>
<main>
  <h1><span>哈喽！林墨白</span><span>正在驶入“<?php echo $random_link["name"]; ?>”星云</span></h1>

  <!-- Material Design 风格的加载动画 https://codepen.io/mrrocks/pen/ExLovj -->
  <svg
    class="spinner"
    width="32px"
    height="32px"
    viewBox="0 0 66 66"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      class="path"
      fill="none"
      stroke-width="6"
      stroke-linecap="round"
      cx="33"
      cy="33"
      r="30"
    ></circle>
  </svg>
</main>
<footer>
  <a
    href="https://blog.lmb520.cn/"
    target="_blank"
    rel="noopener noreferrer"
  >
    返回首页
  </a>
  <a
    href="https://blog.lmb520.cn/links.html"
    target="_blank"
    rel="noopener noreferrer"
  >
    加入友链
  </a>
  <a
    href="https://github.com/Lifeni"
    target="_blank"
    rel="noopener noreferrer"
  >
    模板作者
  </a>
  <span></span>
  <a
    href="https://beian.miit.gov.cn/"
    target="_blank"
    rel="noopener noreferrer"
  >
    蜀ICP备-2023019525号-1
  </a>
</footer>
</body>
</html>

里面的css调用代码可以将

<link rel="stylesheet" href="https://files.blog.lmb520.cn/assets/css/links-go.css">

改为

<style>
      /* 色板：https://www.materialui.co/colors */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: Inter, -apple-system, HarmonyOS Sans SC, MiSans,
          Source Han Sans SC, Noto Sans SC, system-ui, Roboto, emoji, sans-serif;
        color: black;
        background: white;
        font-weight: 400;
        font-size: 1rem;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      main {
        padding: 2rem;
        flex: 1;
        display: flex;
        gap: 2rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      main h1 {
        margin-top: 4rem;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.75;
        text-align: center;
      }

      main h1 span {
        white-space: nowrap;
      }

      footer {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
        align-items: center;
        justify-content: center;
        padding: 1.75rem 2rem;
      }

      footer a {
        font-size: 0.875rem;
        text-decoration: none;
        color: #757575;
        transition: all 0.2s;
      }

      footer span {
        flex: 1;
      }

      footer a:hover {
        color: #3f51b5;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
      }

      @media (prefers-color-scheme: dark) {
        body {
          color: #eeeeee;
          background: #212121;
        }

        footer a {
          color: #bdbdbd;
          transition: all 0.2s;
        }

        footer a:hover {
          color: #5c6bc0;
        }
      }

      @media screen and (max-width: 768px) {
        main {
          margin-top: 4.5rem;
        }

        main h1 {
          font-size: 1.5rem;
        }

        footer {
          gap: 0.5rem 1rem;
        }

        footer span {
          display: none;
        }
      }

      /* Material Design 风格的加载动画 https://codepen.io/mrrocks/pen/ExLovj  */
      .spinner {
        -webkit-animation: rotator 1.4s linear infinite;
        animation: rotator 1.4s linear infinite;
      }

      @-webkit-keyframes rotator {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(270deg);
        }
      }

      @keyframes rotator {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(270deg);
        }
      }

      .path {
        stroke-dasharray: 187;
        stroke-dashoffset: 0;
        transform-origin: center;
        -webkit-animation: dash 1.4s ease-in-out infinite,
          colors 5.6s ease-in-out infinite;
        animation: dash 1.4s ease-in-out infinite,
          colors 5.6s ease-in-out infinite;
      }

      @-webkit-keyframes colors {
        0% {
          stroke: #4285f4;
        }
        25% {
          stroke: #de3e35;
        }
        50% {
          stroke: #f7c223;
        }
        75% {
          stroke: #1b9a59;
        }
        100% {
          stroke: #4285f4;
        }
      }

      @keyframes colors {
        0% {
          stroke: #4285f4;
        }
        25% {
          stroke: #de3e35;
        }
        50% {
          stroke: #f7c223;
        }
        75% {
          stroke: #1b9a59;
        }
        100% {
          stroke: #4285f4;
        }
      }
      @-webkit-keyframes dash {
        0% {
          stroke-dashoffset: 187;
        }
        50% {
          stroke-dashoffset: 46.75;
          transform: rotate(135deg);
        }
        100% {
          stroke-dashoffset: 187;
          transform: rotate(450deg);
        }
      }
      @keyframes dash {
        0% {
          stroke-dashoffset: 187;
        }
        50% {
          stroke-dashoffset: 46.75;
          transform: rotate(135deg);
        }
        100% {
          stroke-dashoffset: 187;
          transform: rotate(450deg);
        }
      }
</style>

因为有可能我会移动样式文件，但是我移动后也会及时更新除非我忘了，所以建议自己放在代码里或者找个地方储存调用

注意

代码里面有很多需要自己按情况修改，比如数据库信息、网页内容、网站图标等等

给BearSimple主题加一个友链随机跳转

林墨白教程实践 热度: °C默认 / 楷体 / 霞鹜文楷体
温馨提示：

本文最后更新于2024年05月08日，已超过197天没有更新，若内容或图片失效，请留言反馈。

话说

因为BearSimple主题功能太多，昨天才发现有一个幻灯片的功能没使用，但是我好像没有什么东西可以放上去，思来想去好像可以做一个友链随机跳转。
本站随机跳转链接(点击幻灯片一样的效果)：https://blog.lmb520.cn/other/links-go.php

实现

BearSimple有独立的友链数据库表，所以可以直接用php连接数据库获取友链链接，进行随机访问。中间过渡页面是使用开往的plain简洁版页面(作者是：Lifeni)
具体代码如下：

<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script async src="https://umami.luochancy.com/script.js" data-website-id="23ac5682-b5b5-4013-8a32-5ceb3e598df2"></script>
  <title>星际穿梭中 - 哈喽！林墨白</title>
  <meta
    name="description"
    content="沉墨满纸，一笑若白。——林墨白"
  />
  <link rel="shortcut icon" href="https://files.blog.lmb520.cn/assets/img/logo/pink-black.png" />
<link rel="stylesheet" href="https://files.blog.lmb520.cn/assets/css/links-go.css">
</head>
<body>
<?php
// 数据库连接信息
$servername = "xxxx";
$username = "xxxx";
$password = "xxxxx";
$dbname = "xxxxx";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询有效博客
$sql = "SELECT friendurl, friendname FROM typecho_bscore_friendlinks WHERE status = 'approved'";
$result = $conn->query($sql);

// 存储有效博客的数组
$links = array();

// 将有效博客存储到数组中
if ($result && $result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $friendUrl = $row["friendurl"];
        $friendName = $row["friendname"];
        // 确保友情链接是有效的URL格式
        if (filter_var($friendUrl, FILTER_VALIDATE_URL)) {
            $links[] = array("url" => $friendUrl, "name" => $friendName);
        }
    }
} else {
    echo "没有有效博客";
    $conn->close();
    exit();
}

// 关闭数据库连接
$conn->close();

// 随机选择一个博主
if (!empty($links)) {
    $random_link = $links[array_rand($links)];
    
    // 过渡页面显示时间
    echo '<script>
            setTimeout(function() {
              window.location.replace("' . $random_link["url"] . '");
            }, 3000); 
          </script>';
} else {
    echo "没有有效博客";
    exit();
}
?>
<main>
  <h1><span>哈喽！林墨白</span><span>正在驶入“<?php echo $random_link["name"]; ?>”星云</span></h1>

  <!-- Material Design 风格的加载动画 https://codepen.io/mrrocks/pen/ExLovj -->
  <svg
    class="spinner"
    width="32px"
    height="32px"
    viewBox="0 0 66 66"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      class="path"
      fill="none"
      stroke-width="6"
      stroke-linecap="round"
      cx="33"
      cy="33"
      r="30"
    ></circle>
  </svg>
</main>
<footer>
  <a
    href="https://blog.lmb520.cn/"
    target="_blank"
    rel="noopener noreferrer"
  >
    返回首页
  </a>
  <a
    href="https://blog.lmb520.cn/links.html"
    target="_blank"
    rel="noopener noreferrer"
  >
    加入友链
  </a>
  <a
    href="https://github.com/Lifeni"
    target="_blank"
    rel="noopener noreferrer"
  >
    模板作者
  </a>
  <span></span>
  <a
    href="https://beian.miit.gov.cn/"
    target="_blank"
    rel="noopener noreferrer"
  >
    蜀ICP备-2023019525号-1
  </a>
</footer>
</body>
</html>

里面的css调用代码可以将

<link rel="stylesheet" href="https://files.blog.lmb520.cn/assets/css/links-go.css">

改为

<style>
      /* 色板：https://www.materialui.co/colors */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: Inter, -apple-system, HarmonyOS Sans SC, MiSans,
          Source Han Sans SC, Noto Sans SC, system-ui, Roboto, emoji, sans-serif;
        color: black;
        background: white;
        font-weight: 400;
        font-size: 1rem;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      main {
        padding: 2rem;
        flex: 1;
        display: flex;
        gap: 2rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      main h1 {
        margin-top: 4rem;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.75;
        text-align: center;
      }

      main h1 span {
        white-space: nowrap;
      }

      footer {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
        align-items: center;
        justify-content: center;
        padding: 1.75rem 2rem;
      }

      footer a {
        font-size: 0.875rem;
        text-decoration: none;
        color: #757575;
        transition: all 0.2s;
      }

      footer span {
        flex: 1;
      }

      footer a:hover {
        color: #3f51b5;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
      }

      @media (prefers-color-scheme: dark) {
        body {
          color: #eeeeee;
          background: #212121;
        }

        footer a {
          color: #bdbdbd;
          transition: all 0.2s;
        }

        footer a:hover {
          color: #5c6bc0;
        }
      }

      @media screen and (max-width: 768px) {
        main {
          margin-top: 4.5rem;
        }

        main h1 {
          font-size: 1.5rem;
        }

        footer {
          gap: 0.5rem 1rem;
        }

        footer span {
          display: none;
        }
      }

      /* Material Design 风格的加载动画 https://codepen.io/mrrocks/pen/ExLovj  */
      .spinner {
        -webkit-animation: rotator 1.4s linear infinite;
        animation: rotator 1.4s linear infinite;
      }

      @-webkit-keyframes rotator {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(270deg);
        }
      }

      @keyframes rotator {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(270deg);
        }
      }

      .path {
        stroke-dasharray: 187;
        stroke-dashoffset: 0;
        transform-origin: center;
        -webkit-animation: dash 1.4s ease-in-out infinite,
          colors 5.6s ease-in-out infinite;
        animation: dash 1.4s ease-in-out infinite,
          colors 5.6s ease-in-out infinite;
      }

      @-webkit-keyframes colors {
        0% {
          stroke: #4285f4;
        }
        25% {
          stroke: #de3e35;
        }
        50% {
          stroke: #f7c223;
        }
        75% {
          stroke: #1b9a59;
        }
        100% {
          stroke: #4285f4;
        }
      }

      @keyframes colors {
        0% {
          stroke: #4285f4;
        }
        25% {
          stroke: #de3e35;
        }
        50% {
          stroke: #f7c223;
        }
        75% {
          stroke: #1b9a59;
        }
        100% {
          stroke: #4285f4;
        }
      }
      @-webkit-keyframes dash {
        0% {
          stroke-dashoffset: 187;
        }
        50% {
          stroke-dashoffset: 46.75;
          transform: rotate(135deg);
        }
        100% {
          stroke-dashoffset: 187;
          transform: rotate(450deg);
        }
      }
      @keyframes dash {
        0% {
          stroke-dashoffset: 187;
        }
        50% {
          stroke-dashoffset: 46.75;
          transform: rotate(135deg);
        }
        100% {
          stroke-dashoffset: 187;
          transform: rotate(450deg);
        }
      }
</style>

因为有可能我会移动样式文件，但是我移动后也会及时更新除非我忘了，所以建议自己放在代码里或者找个地方储存调用

注意

代码里面有很多需要自己按情况修改，比如数据库信息、网页内容、网站图标等等


#教程#林墨白原创#实用#typecho
版权属于：林墨白 所有，采用《知识共享署名许可协议》进行许可，转载请注明文章来源。

本文链接： https://blog.lmb520.cn/archives/1271/

上一篇
摄影分享
下一篇
《无处遁形：全网公敌》主线已通关
赞 (5)
分享
QQ
QQ空间
微信
微博

猜您想看

评论区(7条评论)

我要评论


十玖八柒
LV1
  
2024-09-01 13:22 IP属地：中国–广东–汕头

博主，你友链加重了，我本来是想要更新友链的，但是没看到更新的选项，就重新提交了一个

回复 收起子评论
林墨白
博主
   十玖八柒
2024-09-01 13:25 IP属地：中国–四川–达州

现在好了

回复
涵梦
LV1
  
2024-08-10 16:17 IP属地：美国

感谢分享

回复
机智灵巧的女士
LV1
  
2024-06-29 20:31 IP属地：四川省成都市

好用

回复 收起子评论
林墨白
博主
   机智灵巧的女士
2024-06-29 20:32 IP属地：四川省成都市

回复
Ziki
LV1
  
2024-05-23 15:13 IP属地：湖北省武汉市

牛皮!!!!!!!!!!!

回复 收起子评论
林墨白
博主
   Ziki
2024-06-29 20:29 IP属地：四川省成都市

回复