Sakurairo主题网站页尾页脚美化一网打尽

前言

本站效果：

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

樱花图标（主题自带）
版权声明
跳动的颜文字
运行时长
萌ICP备
知识共享许可协议
LOGOs
一言（主题自带）
负载占用查询（主题自带）
主题声明（主题自带）

有四项是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 栏替换链接，其他的设置相信机智的你都能看懂按需调整即可。

引用

css实现跳动的文字作者：jeremyjone 链接：https://www.jeremyjone.com/618/
WordPress网站底部设置网站已运行时间作者：潘超博客链接：https://blog.csdn.net/panchao888888/article/details/91129368
萌国ICP备案(萌ICP备)申请作者：帝君链接：https://moea.cc/?post=10
萌国官网 https://icp.gov.moe/
知识共享许可协议选择 https://creativecommons.org/choose/
阿里巴巴矢量图标库 https://www.iconfont.cn/
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

查看评论 - 3 条评论

Comments 3 条评论

博主 LM

回复

发布于 2022-08-03 05:37 ( Chrome 103 Windows 10/11 )( )

这是一条私密评论
- 博主 JCVICTOR
  
  回复
  
  发布于 2022-08-03 07:37 ( Chrome 103 Windows 10/11 )( )
  
  @LM 可以的哇，https://www.jcvictor.space/friendlink/ 这里有我的网站介绍，你把你的按格式写一下就好了
博主 LM

回复

发布于 2022-08-03 18:55 ( Chrome 103 Windows 10/11 )( )

这是一条私密评论