【PHP】Typecho博客备案版权页脚美化

网站版权声明的作用:

合法拥有版权或有权使用的作品,未经本网授权不得转载、摘编或利用其它方式使用上述作品。已经本网授权使用作品的,应在授权范围内使用,并注明“来源:”。违反上述声明者,将追究其相关法律责任。
例如:

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:Wasabi 山葵酱
链接:https://wasabi.fun/415.html
来源:https://wasabi.fun/

网站备案成功后需注意以下事项:

  1. 按照非经营性互联网信息服务备案管理办法,在您的网站首页底部中间位置,放置您的备案号并链接至工信部。
  2. 请您务必保证网站内容与备案信息一致,一旦被查出不一致情况将面临被关停整顿风险。
  3. 按照《中华人民共和国计算机信息系统安全保护条例》等相关法律法规,网站开通之日起30日内到公司实际经营地或个人常住地公安机关履行公安备案手续,具体要求请参见关于公安备案通知。
  4. 依据《非经营性互联网信息服务备案管理办法》第二十三条规定,如备案信息不真实,将关闭网站并注销备案。
  5. 若您的备案信息发生变更,请您尽快申请变更备案。

CSS样式:

.github-badge {
    display: inline-block;
    border-radius: 4px;

    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;

    background-color: #ABBAC3;

    margin-bottom: 5px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-yellowgreen {
    background-color: #a4a61d !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

CSS样式添加方法:

打开Typecho网站后台-》外观-》设置外观-》开发者设置-》自定义CSS,添加以上CSS样式。

我们将CSS样式添加之后,接下来我们需要添加展示的内容,以及将展示的内容和CSS进行关联。
在关联之前,我们看一下,CSS样式支持的徽章的效果。
HTML代码:

<div>
    <div class="github-badge">
        <span class="badge-subject">build</span><span class="badge-value bg-brightgreen">passing</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">build</span><span class="badge-value bg-red">failure</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">tests</span><span class="badge-value bg-green">185 passed, 7 skipped</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">tests</span><span class="badge-value">inaccessible</span>
    </div></div><div>
    <div class="github-badge">
        <span class="badge-subject">npm</span><span class="badge-value bg-blue">v5.5.1</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">node</span><span class="badge-value bg-brightgreen">&gt;=0.4.0</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">gem</span><span class="badge-value bg-orange">v0.2.5</span>
    </div></div><div>
    <div class="github-badge">
        <span class="badge-subject">stars</span><span class="badge-value bg-brightgreen">☆☆☆☆☆</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">node</span><span class="badge-value bg-yellowgreen">★★★☆☆</span>
    </div></div><div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-brightgreen">brightgreen</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-green">green</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-yellowgreen">yellowgreen</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-yellow">yellow</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-orange">orange</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-red">red</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-lightgrey">lightgrey</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value">grey</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-blue">blue</span>
    </div></div>

HTML代码显示的效果:

Typecho使用方法:

目前我的这个版权添加是在Handsame主题上进行修改的,如果你是使用其他,请参考该修改办法,在你的主题上进行修改。
进入网站根目录,进入handsame主题文件夹-》component,在componet目录下的footer.php文件里面,将标签替换为以下内容。

 <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
            <?php $this->options->BottomInfo(); ?>
            <div class="github-badge">
            <a target="_blank" href="https://wasabi.fun"> <span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Wasabi山葵酱</span></a>
            </div>
      </span>

        <div class="github-badge">
        <span class="badge-subject">Copyright</span><span class="badge-value bg-brightgreen">&copy;&nbsp;<?php echo date("Y");?></span>
        </div>
        <?php $this->options->BottomleftInfo(); ?>

以上步骤修改完成之后,清除缓存,刷新博客试试,是不是博客看起来比之前的顺眼多了。

最后修改:2020 年 10 月 31 日 10 : 02 PM
如果觉得我的文章对你有用,请随意赞赏