JCVICTORの秘密小站
large picture of the cover

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

前言

老站效果：

 image-1 (1).png

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

  1. 樱花图标（主题自带）

  2. 版权声明

  3. 跳动的颜文字 （本站我尝试了一下好像不太行）

  4. 运行时长

  5. 萌ICP备

  6. 知识共享许可协议

  7. LOGOs   （本站删除，可添加）

  8. 一言（主题自带）（本站没有）

  9. 负载占用查询（主题自带）（本站没有）

  10. 主题声明（主题自带）

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

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

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

注：本站用的是Halo2.0的Sakura主题

主题自带

主要设置都在全局设置 - 页尾设置中，自行根据需求开启即可，老站一言API为主题默认。（Sakura主题请到主题设置中寻找对应设置）Sakura主题目前没有内置一言，如有需要请自行添加页尾代码。

image-2 (1).png

版权声明

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

© 2022-2023 JCVICTOR · All Rights Reserved.

跳动的文字

在全局 head 标签中粘贴：请注意，可能需要在前后加上<style>和</style>

 .my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    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)
    }
}

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

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

运行时长

在全局 head 标签中添加如下：

<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("1/3/2022 0:00:00");
        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);
        runtime_span.innerHTML = "小破站已运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();

</script>

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

然后在页尾添加：

<br /><span id="runtime_span" style="color: #313030"></span>

文字和颜色都可以自定义

萌ICP备

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

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

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

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

知识共享许可协议

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

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

image-3 (1).png

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_L0G0.png"alt="Bilibili" style="height: 2em;max-height: 2em;padding-bottom: Opx;margin-bottom:0.2em">
</a>

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

如果想要添加其他的LOGO这边推荐一个非常好用的网站（没有恰饭！）阿里巴巴矢量图标库，完全免费，基本大公司的图标都是有的而且还有各种样式，还能自定义颜色等。

选择PNG下载上传到网站媒体即可使用。在 img src 栏替换链接，其他的设置相信机智的你都能看懂按需调整即可。

Reference

  1. css实现跳动的文字 作者：jeremyjone  https://www.jeremyjone.com/618/

  2. 纯CSS实现跳动的文字 作者：MelodyJerry https://www.cnblogs.com/melodyjerry/p/13934184.html

  3. WordPress网站底部设置网站已运行时间 作者：潘超 https://blog.csdn.net/panchao888888/article/details/91129368

  4. 萌国ICP备案(萌ICP备)申请 作者：帝君 https://moea.cc/?post=10

  5. 萌国官网 https://icp.gov.moe/

  6. 知识共享许可协议选择 https://creativecommons.org/choose/

  7. 阿里巴巴矢量图标库 https ://www.iconfont.cn/

  8. 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

很明显是这个网站的主人）

site logo

World is Uneven

© 2024 JCVICTORの秘密小站