前言

本站效果:

完整的效果可以直接拉到页面最下面看一眼哦。本站页尾包含了:

  1. 樱花图标(主题自带)
  2. 版权声明
  3. 跳动的颜文字
  4. 运行时长
  5. 萌ICP备
  6. 知识共享许可协议
  7. LOGOs
  8. 一言(主题自带)
  9. 负载占用查询(主题自带)
  10. 主题声明(主题自带)

有四项是Sakurairo主题自带的,可以在这里了解更多关于Sakurairo主题

本文主要针对Sakurairo主题用户,非Sakurairo主题用户需通过实际情况自行修改网站源代码文件,主题自带部分可以跳过。本文结尾的引用应该能帮到你!

自定义时可能需要使用一些基本的HTML代码,Javascript代码本文直接提供可以直接使用,按需修改

主题自带

主要设置都在 全局设置 - 页尾设置中,自行根据需求开启即可,本站一言API为主题默认。

版权声明

直接在页尾信息文本框粘贴如下代码即可(如果放在首行)

© 2022 JCVICTOR · All Rights Reserved.

跳动的文字

在页尾附加代码中粘贴:

/* start */
.my-face {
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

    @-webkit-keyframes my-face {

    2%,
    24%,
    80% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
    transform: translate(0, 1.5px) rotate(1.5deg)
    }

    4%,
    68%,
    98% {
    -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
    transform: translate(0, -1.5px) rotate(-.5deg)
    }

    38%,
    6% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
    transform: translate(0, 1.5px) rotate(-1.5deg)
    }

    8%,
    86% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
    transform: translate(0, -1.5px) rotate(-1.5deg)
    }

    10%,
    72% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
    transform: translate(0, 2.5px) rotate(1.5deg)
    }

    12%,
    64%,
    78%,
    96% {
    -webkit-transform: translate(0, -.5px) rotate(1.5deg);
    transform: translate(0, -.5px) rotate(1.5deg)
    }

    14%,
    54% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
    transform: translate(0, -1.5px) rotate(1.5deg)
    }

    16% {
    -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
    transform: translate(0, -.5px) rotate(-1.5deg)
    }

    18%,
    22% {
    -webkit-transform: translate(0, .5px) rotate(-1.5deg);
    transform: translate(0, .5px) rotate(-1.5deg)
    }

    20%,
    36%,
    46% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
    transform: translate(0, -1.5px) rotate(2.5deg)
    }

    26%,
    50% {
    -webkit-transform: translate(0, .5px) rotate(.5deg);
    transform: translate(0, .5px) rotate(.5deg)
    }

    28% {
    -webkit-transform: translate(0, .5px) rotate(1.5deg);
    transform: translate(0, .5px) rotate(1.5deg)
    }

    30%,
    40%,
    62%,
    76%,
    88% {
    -webkit-transform: translate(0, -.5px) rotate(2.5deg);
    transform: translate(0, -.5px) rotate(2.5deg)
    }

    32%,
    34%,
    66% {
    -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
    transform: translate(0, 1.5px) rotate(-.5deg)
    }

    42% {
    -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
    transform: translate(0, 2.5px) rotate(-1.5deg)
    }

    44%,
    70% {
    -webkit-transform: translate(0, 1.5px) rotate(.5deg);
    transform: translate(0, 1.5px) rotate(.5deg)
    }

    48%,
    74%,
    82% {
    -webkit-transform: translate(0, -.5px) rotate(.5deg);
    transform: translate(0, -.5px) rotate(.5deg)
    }

    52%,
    56%,
    60% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
    transform: translate(0, 2.5px) rotate(2.5deg)
    }

    58% {
    -webkit-transform: translate(0, .5px) rotate(2.5deg);
    transform: translate(0, .5px) rotate(2.5deg)
    }

    84% {
    -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
    transform: translate(0, 1.5px) rotate(2.5deg)
    }

    90% {
    -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
    transform: translate(0, 2.5px) rotate(-.5deg)
    }

    92% {
    -webkit-transform: translate(0, .5px) rotate(-.5deg);
    transform: translate(0, .5px) rotate(-.5deg)
    }

    94% {
    -webkit-transform: translate(0, 2.5px) rotate(.5deg);
    transform: translate(0, 2.5px) rotate(.5deg)
    }

    0%,
    100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
    }
    }

    @keyframes my-face {

    2%,
    24%,
    80% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
    transform: translate(0, 1.5px) rotate(1.5deg)
    }

    4%,
    68%,
    98% {
    -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
    transform: translate(0, -1.5px) rotate(-.5deg)
    }

    38%,
    6% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
    transform: translate(0, 1.5px) rotate(-1.5deg)
    }

    8%,
    86% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
    transform: translate(0, -1.5px) rotate(-1.5deg)
    }

    10%,
    72% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
    transform: translate(0, 2.5px) rotate(1.5deg)
    }

    12%,
    64%,
    78%,
    96% {
    -webkit-transform: translate(0, -.5px) rotate(1.5deg);
    transform: translate(0, -.5px) rotate(1.5deg)
    }

    14%,
    54% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
    transform: translate(0, -1.5px) rotate(1.5deg)
    }

    16% {
    -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
    transform: translate(0, -.5px) rotate(-1.5deg)
    }

    18%,
    22% {
    -webkit-transform: translate(0, .5px) rotate(-1.5deg);
    transform: translate(0, .5px) rotate(-1.5deg)
    }

    20%,
    36%,
    46% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
    transform: translate(0, -1.5px) rotate(2.5deg)
    }

    26%,
    50% {
    -webkit-transform: translate(0, .5px) rotate(.5deg);
    transform: translate(0, .5px) rotate(.5deg)
    }

    28% {
    -webkit-transform: translate(0, .5px) rotate(1.5deg);
    transform: translate(0, .5px) rotate(1.5deg)
    }

    30%,
    40%,
    62%,
    76%,
    88% {
    -webkit-transform: translate(0, -.5px) rotate(2.5deg);
    transform: translate(0, -.5px) rotate(2.5deg)
    }

    32%,
    34%,
    66% {
    -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
    transform: translate(0, 1.5px) rotate(-.5deg)
    }

    42% {
    -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
    transform: translate(0, 2.5px) rotate(-1.5deg)
    }

    44%,
    70% {
    -webkit-transform: translate(0, 1.5px) rotate(.5deg);
    transform: translate(0, 1.5px) rotate(.5deg)
    }

    48%,
    74%,
    82% {
    -webkit-transform: translate(0, -.5px) rotate(.5deg);
    transform: translate(0, -.5px) rotate(.5deg)
    }

    52%,
    56%,
    60% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
    transform: translate(0, 2.5px) rotate(2.5deg)
    }

    58% {
    -webkit-transform: translate(0, .5px) rotate(2.5deg);
    transform: translate(0, .5px) rotate(2.5deg)
    }

    84% {
    -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
    transform: translate(0, 1.5px) rotate(2.5deg)
    }

    90% {
    -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
    transform: translate(0, 2.5px) rotate(-.5deg)
    }

    92% {
    -webkit-transform: translate(0, .5px) rotate(-.5deg);
    transform: translate(0, .5px) rotate(-.5deg)
    }

    94% {
    -webkit-transform: translate(0, 2.5px) rotate(.5deg);
    transform: translate(0, 2.5px) rotate(.5deg)
    }

    0%,
    100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
    }
}
/* end */

最后导入使用,即放在页尾信息栏中。颜文字可以自定义,什么文本都可以的。

<span class="my-face"> ٩(๑>◡<๑)۶</span>

运行时长

在页尾附加代码中添加如下:

<script>
function runTime() {
    var d = new Date(), str = '';
    BirthDay = new Date("2022-1-3");
    today = new Date();
    timeold = (today.getTime() - BirthDay.getTime());
    sectimeold = timeold / 1000
    secondsold = Math.floor(sectimeold);
    msPerDay = 24 * 60 * 60 * 1000
    msPerYear = 365 * 24 * 60 * 60 * 1000
    e_daysold = timeold / msPerDay
    e_yearsold = timeold / msPerYear
    daysold = Math.floor(e_daysold);
    yearsold = Math.floor(e_yearsold);
    //str = yearsold + "年";
    str += daysold + "天";
    str += d.getHours() + '时';
    str += d.getMinutes() + '分';
    str += d.getSeconds() + '秒';
    return str;
}

setInterval(function () {
    $('#run_time').html(runTime())
}, 1000);
</script>

年份可以自行选择添加与否

然后在页尾信息栏添加:

<p style="color: #666666">小破站已运行: <span id="run_time" style="color: black"></span></p>

文字和颜色都可以自定义

萌ICP备

萌ICP备全称是萌国ICP备案,意思就是在萌国这个虚拟世界里拥有自己的备案号

注意:萌ICP备 备的是一级地址且网站是可以访问的

ICP号目前是自选号,选靓号啦

https://icp.gov.moe 流程很简单很快的,记得把HTML代码放在页尾信息里

开梯子是不可以登上官网的哦,请关闭梯子。

知识共享许可协议

这个是国际上的许可协议,简单点来说就是你是否允许分享你网站的内容给别人使用,以及如果使用是否可以进行商业化(赚钱),有免费的许可也有付费的许可。通过这个链接可以快速选择自己的许可协议。

选好之后在右下角复制代码,并粘贴到页尾信息中。有两种LOGO样式可供选择

LOGOs

本站一共三个图标,页尾信息代码如下:


<p></p>
<a href="https://www.aliyun.com/" target="_blank" rel="nofollow">
				<img src="https://yremp.live/wp-content/uploads/2019/07/aliyun.png" alt="aliyun" style="height: 1.7em;max-height: 1.8em;padding-bottom: 0px">
				</a>   
				<a href="https://github.com/" target="_blank" rel="nofollow">
				<img src="https://yremp.live/wp-content/uploads/2019/07/Github.png" alt="github" style="height: 2.2em;max-height: 2.5em;padding-bottom: 0px">
				</a>  
 
				<a href="https://space.bilibili.com/263867738" target="_blank" rel="nofollow">
				<img src="http://www.jcvictor.space/wp-content/uploads/2022/07/BILIBILI_LOGO.png" alt="Bilibili" style="height: 2em;max-height: 2em;padding-bottom: 0px;margin-bottom:0.2em">
				</a>

开头的空行是为了与上下间距相同。

如果想要添加其他的LOGO这边推荐一个非常好用的网站(没有恰饭!)阿里巴巴矢量图标库,完全免费,基本大公司的图标都是有的而且还有各种样式,还能自定义颜色等。选择PNG下载上传到网站媒体即可使用。在 img src 栏替换链接,其他的设置相信机智的你都能看懂按需调整即可。

引用

  1. css实现跳动的文字 作者:jeremyjone 链接:https://www.jeremyjone.com/618/
  2. WordPress网站底部设置网站已运行时间 作者:潘超博客 链接:https://blog.csdn.net/panchao888888/article/details/91129368
  3. 萌国ICP备案(萌ICP备)申请 作者:帝君  链接:https://moea.cc/?post=10
  4. 萌国官网 https://icp.gov.moe/
  5. 知识共享许可协议选择 https://creativecommons.org/choose/
  6. 阿里巴巴矢量图标库 https://www.iconfont.cn/
  7. WordPress Sakura🌸主题使用手册 作者:Yremp 链接:https://yremp.live/wordpress-sakura-teach/#3.3-%E7%99%BD%E7%8C%AB%E5%90%8C%E6%AC%BE%E7%9C%8B%E6%9D%BF%E5%A8%98

是JCVICTOR BLOG的创始人