社区 › 资源分享 › 子比主题 – 文章版权声明样式美化

竹林 发表于 2024-11-7 18:27:14

子比主题 – 文章版权声明样式美化

部署教程
子比主题：WordPress后台 >> 主题设置 >> 文章&列表 >> 文章页面 >> 将代码添加到“版权提示内容”中
<!--版权样式八 -->
<style>
@font-face {
    font-family: 'iconfont';
    /* Project id 4660907 */
    src: url('//at.alicdn.com/t/c/font_4660907_in343ww0v0p.woff2?t=1730878397275') format('woff2'),
      url('//at.alicdn.com/t/c/font_4660907_in343ww0v0p.woff?t=1730878397275') format('woff'),
      url('//at.alicdn.com/t/c/font_4660907_in343ww0v0p.ttf?t=1730878397275') format('truetype');
}

.post-copyright {
background: var(--main-bg-color);
    border-width: 1px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
    position: relative;
    margin: 1rem 2rem 0.5rem;
    border-radius: 12px;
    padding: 34px 0 20px 0;
    border: 1px solid #e3e8f7;
    color: var(--main-color);
}

.post-copyright .post-copyright__author_group .post-copyright__author_img {
    width: 64px;
    height: 64px;
    margin: auto;
    border-radius: 64px;
    overflow: hidden;
    position: absolute;
    left: calc(50% - 33px);
    top: -33px;
    border: 1px solid #e3e8f7;
    box-shadow: 0 8px 12px -3px #24679923;
}

.post-copyright .post-copyright__author_group .post-copyright__author_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 1s ease-in-out;
}

.post-copyright .post-copyright__author_group .post-copyright__author_img img:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3)
}

.post-copyright .post-copyright__author_group .post-copyright__author_name {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-top: 16px;
    color: var(--main-color);
    line-height: 1
}

.post-copyright .post-copyright__author_group .post-copyright__author_desc {
    text-align: center;
    font-size: 14px;
    color: rgba(60, 60, 67, 0.8);
    margin: 4px 10px 0;
    line-height: 1.5
}

.post-copyright .post-copyright__notice {
    font-size: 12px;
    margin: .5rem 0;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.post-copyright .post-copyright__notice .post-copyright-info {
    padding-left: 0;
    color: var(--main-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: center;
    max-width: 500px
}

@media screen and (max-width:768px) {
    .post-copyright .post-copyright__notice .post-copyright-info {
      -webkit-line-clamp: 2
    }
}

.post-copyright .post-copyright__notice .post-copyright-info a {
    text-decoration: none;
    word-break: break-word;
    padding: 0 4px;
    border-radius: 4px;
    color: var(--main-color);
    font-weight: 700
}

.post-copyright .post-copyright__notice .post-copyright-info a:hover {
    text-decoration: none;
    background-color: #246799;
    color: #fff;
    cursor: pointer;
    border-radius: 4px
}

.social-share {
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 40px;
    margin: .5rem auto;
    gap: .5rem;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.social-share-ico i {
    font-style: normal;
    font-size: 20px;
}

.social-share .social-share-ico {
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #e3e8f7;
    cursor: pointer;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s
}

@media screen and (max-width:768px) {
    .social-share .social-share-ico:nth-child(n+6) {
      display: none
    }
}

.social-share .social-share-ico:hover {
    color: #fff
}

.social-share .icon-qq {
    color: #56b6e7;
    border-color: #56b6e7
}

.social-share .icon-qq:hover {
    background-color: #56b6e7
}

.social-share .icon-weibo {
    color: #d44040;
    border-color: #d44040
}

.social-share .icon-weibo:hover {
    background-color: #d44040
}

.social-share .icon-facebook {
    color: #415dc9;
    border-color: #415dc9
}

.social-share .icon-facebook:hover {
    background-color: #415dc9
}

.social-share .icon-twitter {
    color: #56b6e7;
    border-color: #56b6e7
}

.social-share .icon-twitter:hover {
    background-color: #56b6e7
}

.social-share .icon-link {
    color: #425aef;
    border-color: #425aef
}

.social-share .icon-link:hover {
    background-color: #425aef
}

.social-share .icon-qrcode {
    position: relative;
    color: #000;
    border-color: #000
}

@media screen and (max-width:900px) {
    .social-share .icon-qrcode {
      display: none
    }
}

.social-share .icon-qrcode:hover {
    background-color: #000
}

.social-share .icon-qrcode:hover .share-main {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex
}

.social-share .icon-qrcode .share-main {
    display: none;
    position: absolute;
    bottom: 1.7rem;
    z-index: 100;
    padding-bottom: 15px
}

.social-share #qrcode img {
    width: 132px;
    height: 132px;
}

.social-share .icon-qrcode .share-main-all {
    padding: 12px;
    border-radius: 12px;
    background: #f7f7f9;
    -webkit-animation: donate_effcet .3s .1s ease both;
    -moz-animation: donate_effcet .3s .1s ease both;
    -o-animation: donate_effcet .3s .1s ease both;
    -ms-animation: donate_effcet .3s .1s ease both;
    animation: donate_effcet .3s .1s ease both;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border: 1px solid #e3e8f7
}

.social-share .icon-qrcode .share-main-all .reward-dec {
    font-size: 1rem;
    color: #363636 !important;
    text-align: center
}

.social-share #qrcode {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e3e8f7
}

.fa-seedling::before {
    font-family: 'iconfont';
    content: '\e60d';
    font-size: 20px;
}

.post-tools {
    display: flex;
    width: 100%;
    margin: 15px 0;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 8px;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.post-tools .post-tools-left {
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    gap: .5rem;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.post-tools .post-tools-left #quit-box {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .2);
    top: 0;
    left: 0;
    opacity: .01;
    display: none;
    z-index: 101;
    margin: 0
}

@media screen and (max-width:768px) {
    .post-tools .post-tools-left #quit-box {
      height: calc(100vh - 380px)
    }
}

.post-tools .post-tools-left .reward-link.mode {
    background: #57bd6a;
    color: #fff;
    padding: 0 16px;
    height: 40px;
    line-height: 39px;
    -webkit-box-shadow: 0 8px 12px -3px rgba(135, 238, 121, 0.212);
    box-shadow: 0 8px 12px -3px rgba(135, 238, 121, 0.212);
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s
}

.post-tools .post-tools-left .reward-link.mode a {
    color: #fff
}

.post-tools .post-tools-left .reward-link.mode i {
    margin-right: 4px
}

.post-tools .post-tools-left .reward-link.mode:hover {
    background: #425aef;
    -webkit-box-shadow: none;
    box-shadow: none
}

.social-share-ico .fa-qq::before {
    font-family: 'iconfont';
    content: '\e876';
}

.social-share-ico .fa-weibo::before {
    font-family: 'iconfont';
    content: '\e666';
}

.social-share-ico .fa-twitter::before {
    font-family: 'iconfont';
    content: '\e613';
}

.social-share-ico .fa-facebook::before {
    font-family: 'iconfont';
    content: '\e617';
}

.social-share-ico .fa-facebook::before {
    font-family: 'iconfont';
    content: '\e6e1';
}

.social-share-ico .fa-link::before {
    font-family: 'iconfont';
    content: '\e706';
}

.social-share-ico .fa-qrcode::before {
    font-family: 'iconfont';
    content: '\e6bd';
}

@media screen and (max-width:768px) {
    .post-copyright {
      box-shadow: 0 8px 16px -4px rgba(44, 45, 48, 0.047);
      padding: 1rem 1.3rem;
      margin: .5rem
    }

    .social-share {
      display: none;
    }
    .post-copyright__author_name{
      margin-top:24px !important;
    }
}
</style>
<div class="post-copyright">
<div class="post-copyright__author_group">
    <a class="post-copyright__author_img" href="/about.html"><img class="post-copyright__author_img_front"
      src="https://q1.qlogo.cn/g?b=qq&nk=82115339&s=640"></a>
    <div class="post-copyright__author_name">
      狐狸资源网
    </div>
    <div class="post-copyright__author_desc"></div>
</div>
<div class="post-tools" id="post-tools">
    <div class="post-tools-left">
      <div class="reward-link mode">
      <a class="reward-link-button" href="/rss"><i class="solitude fa-solid fa-seedling"></i>订阅</a>
      </div>
    </div>
</div>
<div class="social-share">
    <a class="social-share-ico icon-qq" target="_blank" rel="noopener"
      href="https://connect.qq.com/widget/shareqq/index.html?url=" title="分享到QQ">
      <i class="solitude fab fa-qq"></i>
    </a>
    <a class="social-share-ico icon-weibo" target="_blank" rel="noopener"
      href="https://service.weibo.com/share/share.php?url=" title="分享到微博">
      <i class="solitude fab fa-weibo"></i>
    </a>
    <a class="social-share-ico icon-twitter" target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?url="
      title="分享到Twitter">
      <i class="solitude fab fa-twitter"></i>
    </a>
    <a class="social-share-ico icon-facebook" target="_blank" rel="noopener"
      href="https://www.facebook.com/sharer/sharer.php?u=" title="分享到Facebook">
      <i class="solitude fab fa-facebook"></i>
    </a>
    <div class="social-share-ico icon-link" onclick="copyLink()" title="复制文章链接">
      <i class="solitude fas fa-link"></i>
    </div>
    <div class="social-share-ico icon-qrcode" title="使用手机扫码阅读这篇文章">
      <i class="solitude fas fa-qrcode"></i>
      <div class="share-main">
      <div class="share-main-all">
          <div class="qrcode" data-size="100"></div>
          <div class="reward-dec">
            手机扫码查看
          </div>
      </div>
      </div>
    </div>
</div>
<div class="post-copyright__notice">
    <span class="post-copyright-info">本文是原创文章，采用<a target="_blank" rel="noopener"
      href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0</a>协议，完整转载请注明来自<a
      href="/">狐狸资源网</a></span>
</div>
</div>
<script>
const link = window.location.href;
document.querySelectorAll('a.social-share-ico').forEach(function (element) {
    let href = element.getAttribute('href');
    element.setAttribute('href', href + encodeURIComponent(link));// 将链接添加到分享地址中
});
</script>
</script>
<div id="notyn-container"></div>
<script>
function copyLink() {
    const link = window.location.href;

    navigator.clipboard.writeText(link)
      .then(() => {
      const notyn = document.createElement('div');
      notyn.classList.add('notyn');
      const noty1 = document.createElement('div');
      noty1.classList.add('noty1');
      const notyf = document.createElement('div');
      notyf.classList.add('notyf', 'success');
      notyf.textContent = '本文链接已复制，可贴粘';
      noty1.appendChild(notyf);
      notyn.appendChild(noty1);
      document.getElementById('notyn-container').appendChild(notyn);
      setTimeout(() => {
          notyn.style.display = 'block';
      }, 100);
      setTimeout(() => {
          notyn.style.display = 'none';
          notyn.remove();
      }, 2000);
      })
      .catch(err => {
      console.error('复制失败', err);
      });
}
</script>
<!--版权样式八 -->

查看完整版本: 子比主题 – 文章版权声明样式美化