宝可梦历险记

样式美化 ​

Mix Space

https://innei.in/
https://mx-space.js.org/

vitepress

https://docs.scott-studio.cn/
https://docs.scott-studio.cn/

全球网站性能测试

https://www.36ce.net/
https://pagespeed.web.dev/

SVG

https://www.runoob.com/try/try.php?filename=trysvg_myfirst
http://tool.chacuo.net/svgeditor

Runtime ​

  • 页脚本站已运行：&天&小时&分&秒
  • config.mts
点击查看
ts
    //页脚
    footer: {
      message: '遵循 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 协议',
      //自动更新时间
      copyright: `
      Copyright © 2025-${new Date().getFullYear()} Powered by Gamers
      <br>
      <span id="runtime">
        本站已运行:
        <span id="A" style="color:#FFA500;font-weight:bold"></span>天
        <span id="B" style="color:#8A2BE2;font-weight:bold"></span>时
        <span id="C" style="color:#1DBF97;font-weight:bold"></span>分
        <span id="D" style="color:#007EC6;font-weight:bold"></span>秒
      </span>
      `,
    },
ts
  head: [
    [
      'script',
      {},
      `
      function runtime () {
        X = new Date("2025/6/1 23:53:46");
        Y = new Date();
        T = (Y.getTime()-X.getTime());
        M = 24*60*60*1000;
        a = T/M;
        A = Math.floor(a);
        b = (a-A)*24;
        B = Math.floor(b);
        c = (b-B)*60;
        C = Math.floor((b-B)*60);
        D = Math.floor((c-C)*60);

        document.getElementById("A").innerHTML = A;
        document.getElementById("B").innerHTML = B;
        document.getElementById("C").innerHTML = C;
        document.getElementById("D").innerHTML = D;
      }
      setInterval(runtime, 1000);
      `
    ],
  ],

原版 ​

点击查看
ts
    //页脚
    footer: {
      message: '<span id="runtime"></span><br>本站均采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>许可协议',
      //自动更新时间
      copyright: `Copyright © 2025-${new Date().getFullYear()} Powered by Gamers`,
      //备案
      // copyright: `Copyright ©️ 2023-${new Date().getFullYear()} 备案号：<a href="https://beian.miit.gov.cn/" target="_blank">京****号</a>`,
    },
ts
  head: [
    // 页脚本站已运行：&天&小时&分&秒 <span id="runtime"></span>
    [
      'script',
      {},
      `
      function runtime(){
      // 初始时间，日/月/年 时:分:秒
      X = new Date("6/1/2025 23:53:46");
      Y = new Date();
      T = (Y.getTime()-X.getTime());
      M = 24*60*60*1000;
      a = T/M;
      A = Math.floor(a);
      b = (a-A)*24;
      B = Math.floor(b);
      c = (b-B)*60;
      C = Math.floor((b-B)*60);
      D = Math.floor((c-C)*60);
      // 信息写入到DIV中
      // 彩色-加粗
      // document.getElementById("runtime").innerHTML = "本站已运行: "+"<font style='color:#FFA500;font-weight:bold'>"+A+"</font>"+"天"+"<font style='color:#8A2BE2;font-weight:bold'>"+B+"</font>"+"时<font style='color:#1DBF97;font-weight:bold'>"+C+"</font>分<font style='color:#007EC6;font-weight:bold'>"+D+"</font>秒"
      // 黑色-加粗
      // document.getElementById("runtime").innerHTML = "本站已运行: "+"<font style='font-weight:bold'>"+A+"</font>"+"天"+"<font style='font-weight:bold'>"+B+"</font>"+"时<font style='font-weight:bold'>"+C+"</font>分<font style='font-weight:bold'>"+D+"</font>秒"
      // 黑色
      document.getElementById("runtime").innerHTML = "本站已运行: "+"<font >"+A+"</font>"+"天"+"<font >"+B+"</font>"+"时<font >"+C+"</font>分<font >"+D+"</font>秒"
    }
    setInterval(runtime, 1000);
      `
    ],
  ],

Time ​

  • 这是一个占位符~
  • 首页index.md

时间显示 ​

点击查看
html
<script setup lang="ts">
import {ref,onMounted} from 'vue'

const timerNum=ref(0)
const timer=ref(null)

onMounted(()=>{
  timer.value=setInterval(()=>{
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    const time = `${year}年${month}月${day}日 ${hour}时${minute}分${second}秒`
    const dom = document.querySelector('.tagline')
    if(dom){
      dom.innerHTML = time
    }else{
      timerNum.value+=1
    if(timerNum.value>5){
      clearInterval(timer.value)
      timer.value=null
    }
    }
  },1000)
})
</script>

<style module>
  :root{
    --vp-c-indigo-1:'#567bf3'!important;
  }
</style>

运行时间 ​

点击查看
html
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 设置站点上线时间（格式：年/月/日 时:分:秒）
const LAUNCH_DATE = new Date('2025-06-01T23:53:46')
const timer = ref<NodeJS.Timeout | null>(null)

// 计算运行时间的函数
const calculateRuntime = () => {
  const now = new Date()
  const diff = now.getTime() - LAUNCH_DATE.getTime()  // 时间差（毫秒）
  
  // 转换为秒并计算各个单位
  const totalSeconds = Math.floor(diff / 1000)
  const days = Math.floor(totalSeconds / (3600 * 24))
  const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const seconds = totalSeconds % 60
  
  return `${days}天${hours}时${minutes}分${seconds}秒`
}

onMounted(() => {
  let retryCount = 0
  const maxRetries = 5
  
  timer.value = setInterval(() => {
    const dom = document.querySelector('.tagline')
    if (dom) {
      dom.innerHTML = `本站已运行：${calculateRuntime()}`
    } else {
      retryCount++
      if (retryCount > maxRetries) {
        clearInterval(timer.value!)
        timer.value = null
      }
    }
  }, 1000)
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})
</script>

侧边栏样式美化 - 改 ​

css
/* 侧边栏顶级项目样式 */
.group:has([role='button']) .VPSidebarItem.level-0 .items {
  padding-left: 15px !important;
  border-left: 1px solid var(--vp-c-divider);
  border-radius: 2px;
  transition: background-color 0.25s;
}

/* 折叠的非链接项样式 */
#VPSidebarNav .VPSidebarItem:not(.is-link).collapsed > .item {
  display: inline-flex;
  align-items: center;
}

/* 常规非链接项样式 */
#VPSidebarNav .VPSidebarItem:not(.is-link) > .item {
  display: inline-flex;
  align-items: center;
}

/* 链接项样式 */
#VPSidebarNav .VPSidebarItem.is-link > .item {
  display: inline-flex;
  align-items: center;
}

/* ============= 关键修改：SVG图标颜色继承方案 ============= */
/* 所有图标的通用样式 */
#VPSidebarNav .VPSidebarItem > .item::before {
  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  
  /* 使用遮罩技术实现颜色继承 */
  background-color: currentColor; /* 继承父级文字颜色 */
  -webkit-mask-size: cover;
  mask-size: cover;
  
  /* 禁用原背景图 */
  background-image: none !important;
}

/* 折叠项图标 */
#VPSidebarNav .VPSidebarItem:not(.is-link).collapsed > .item::before {
  -webkit-mask-image: url('/svg/D1.svg');
  mask-image: url('/svg/D1.svg');
}

/* 常规非链接项图标 */
#VPSidebarNav .VPSidebarItem:not(.is-link) > .item::before {
  -webkit-mask-image: url('/svg/D2.svg');
  mask-image: url('/svg/D2.svg');
}

/* 链接项图标 */
#VPSidebarNav .VPSidebarItem.is-link > .item::before {
  -webkit-mask-image: url('/svg/B3.svg');
  mask-image: url('/svg/B3.svg');
}

侧边栏图标 ​

点击查看
html
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
html
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-open"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path></svg>
html
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-marked"><path d="M10 2v8l3-3 3 3V2"></path><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path></svg>

新

html
<svg t="1751477240448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14052" width="256" height="256"><path d="M780.190476 146.285714a73.142857 73.142857 0 0 1 73.142857 73.142857v508.099048L678.4 926.47619H268.190476a73.142857 73.142857 0 0 1-73.142857-73.142857V219.428571a73.142857 73.142857 0 0 1 73.142857-73.142857v707.047619h304.737524l0.024381-207.238095H780.190476V146.285714z m-16.969143 572.952381H646.095238l-0.024381 133.241905 117.150476-133.241905zM560.761905 512v73.142857h-219.428572v-73.142857h219.428572z m121.904762-146.285714v73.142857H341.333333v-73.142857h341.333334z m48.761904-268.190476v121.904761h-73.142857V97.52381h73.142857zM387.218286 97.52381v121.904761h-73.142857V97.52381h73.142857zM609.52381 135.68v73.142857h-170.666667v-73.142857h170.666667z" p-id="14053"></path></svg>
html
<svg t="1751477582511" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1808" width="256" height="256"><path d="M649.924923 39.384615a78.769231 78.769231 0 0 1 55.414154 22.843077l169.156923 167.50277a78.769231 78.769231 0 0 1 23.315692 55.965538V905.846154a78.769231 78.769231 0 0 1-78.76923 78.769231H203.224615a78.769231 78.769231 0 0 1-78.76923-78.769231V118.153846a78.769231 78.769231 0 0 1 78.76923-78.769231h446.700308z m-80.620308 86.60677L211.101538 126.030769v771.938462h600.064l0.07877-579.741539h-198.616616a43.323077 43.323077 0 0 1-43.323077-43.323077V125.952z m92.199385 556.425846a31.507692 31.507692 0 1 1 0 63.015384H317.833846a31.507692 31.507692 0 1 1 0-63.015384h343.709539z m-85.897846-150.370462a31.507692 31.507692 0 1 1 0 63.015385H317.794462a31.507692 31.507692 0 1 1 0-63.015385h257.811692z m-85.937231-150.370461a31.507692 31.507692 0 0 1 0 63.015384H317.794462a31.507692 31.507692 0 1 1 0-63.015384h171.874461z m166.281846-246.468923v96.334769h97.240616l-97.240616-96.334769z" fill="#000000" p-id="1809"></path></svg>

H1 - 尤雨溪改 ​

css
.VPDoc h1 {
  display: inline-block; /* 使元素宽度由内容决定 */
  white-space: nowrap;
  position: relative;
}
.VPDoc h1:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 66%;
  left: 0;  /* 移除em单位，使用相对值 */
  right: auto;  /* 重置right */
  width: 100%;  /* 改为使用width */
  bottom: 0;
  transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
  background-color: rgba(79, 192, 141, 0.5);
}
.VPDoc h1:hover:after {
  top: 0%;
}

颜色 ​

33a6b8 f596aa
ff6666 a0a7d4
26a69a ff7b7b
fb7287 99d8cf
69a6cc 838bc6

本站已运行: - 天 - 时 - 分 - 秒

Copyright © 2025 Powered by Gamers VitePress Cloudflare Namecheap umami