首页 Typecho 美化 🎨 / 未收录,推送中

请注意,本文最后更新时间:2021-04-01,最后编辑于73天前,内容可能已经不具有时效性,请谨慎参考。

原理也简单,不细说了。直接上教程。

下载二维码生成器
https://wws.lanzous.com/iXmw5ng959c
密码:ddsp

解压后得到一个叫 poster 的文件夹,放到 joe 的主题目录里。

添加 html
找到 Joe/public/handle.php 在文件最下面添加


<footer class="entry-footer" id="footfix">
    <div class="entry-bar-inner" style="width: auto;">
        <div class="post-tags">
            <?php $this->tags('', true, ''); ?>
        </div>
        <div class="readlist">
            <div href="javascript:;" id="mClick" class="mobile_click">
                <div class="share">
                    <div class="Menu-item"><a href="javascript:Share('tqq')"><svg t="1617016842691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271" width="20" height="20"><path d="M510.138606 62.785975c-247.246127 0-447.679066 200.431915-447.679066 447.679066S262.891456 958.144106 510.138606 958.144106s447.679066-200.431915 447.679066-447.679066S757.384733 62.785975 510.138606 62.785975zM725.157751 635.028011c-9.552563 5.081739-24.467251-6.489808-38.461987-27.720342-5.516644 23.134907-19.282159 44.057425-38.842657 60.886719 20.558222 7.739265 33.964556 20.400632 33.964556 34.704406 0 23.52581-36.31509 42.59819-81.136925 42.59819-40.400129 0-73.909313-15.502066-80.113619-35.821857-1.610684-0.026606-7.995091-0.026606-9.655917 0-6.178723 20.345374-39.660278 35.821857-80.08906 35.821857-44.819788 0-81.136925-19.044752-81.136925-42.59819 0-14.329357 13.422707-26.965142 33.965579-34.704406-19.588127-16.803711-33.301454-37.751812-38.842657-60.886719-13.996782 21.231557-28.950356 32.801057-38.487569 27.720342-13.829983-7.372921-11.031241-46.844911 6.195096-88.217181 13.509688-32.488948 31.936363-56.459896 45.880957-61.747319-0.179079-2.085498-0.25685-4.169973-0.25685-6.253424 0-12.58462 3.422959-24.178679 9.221012-33.638121-0.027629-0.728594-0.078795-1.483794-0.078795-2.213411 0-5.758144 1.341554-11.177574 3.664459-15.891945 3.515057-84.520999 57.476039-151.633512 144.80499-151.633512 87.277786 0 141.215232 67.113537 144.764058 151.633512 2.299369 4.689812 3.654226 10.108219 3.654226 15.891945 0 0.728594 0 1.483794-0.101307 2.213411 5.849218 9.458419 9.269108 21.079084 9.269108 33.638121 0 2.083451-0.103354 4.193509-0.305969 6.253424 14.045901 5.287423 32.407084 29.232788 45.944402 61.747319C736.266763 588.157517 738.996944 627.654067 725.157751 635.028011z" p-id="1272"></path></svg>  QQ 分享</a></div>
                    <div class="Menu-item"><a href="javascript:Share('sina')"><svg t="1617016892561" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2124" width="18" height="18"><path d="M428.465 463.138c-88.93 12.19-154.28 71.145-145.986 131.497 8.394 60.353 87.132 99.423 176.063 87.232 88.93-12.29 154.28-71.144 145.986-131.497-8.394-60.453-87.132-99.522-176.063-87.232z m26.68 175.463c-46.364 8.893-89.73-13.69-96.725-50.56-7.094-36.772 24.78-73.843 71.144-82.736 46.364-8.893 89.63 13.79 96.725 50.56 7.094 36.872-24.78 73.943-71.145 82.736z" p-id="2125"></path><path d="M512.3 0.8C229.72 0.8 0.7 229.82 0.7 512.4S229.72 1024 512.3 1024s511.6-229.021 511.6-511.6S794.78 0.8 512.3 0.8z m184.955 590.238c-23.282 71.744-160.075 182.658-347.928 115.61-76.94-31.176-126.7-102.72-95.625-185.455 55.057-136.494 249.505-211.235 246.907-106.317-1 19.185-1 30.076 27.878 14.788 83.635-42.367 115.91 21.384 96.125 60.253-12.59 19.885 14.089 14.09 14.089 14.09s89.63-20.785 58.554 87.031z m-21.583-138.192c5.396-69.845-60.852-58.154-65.049-57.655-4.197 0.5-9.792-3.197-10.592-9.792-0.9-6.595 4.197-11.091 11.691-11.89 99.123-10.493 83.735 80.336 82.835 87.031-0.999 6.695-4.496 13.99-13.39 11.791-8.992-2.298-4.496-13.19-5.495-19.485z m96.325 20.284c-3.997 11.591-12.99 26.68-27.479 23.082-15.987-4.296-13.49-24.98-10.292-38.47 23.282-122.804-104.018-115.91-130.698-115.91-7.194-0.699-21.483-9.392-21.383-22.681 0.1-13.39 16.287-19.585 23.482-20.884 227.122-14.689 168.268 161.474 166.37 174.863z" p-id="2126"></path><path d="M424.069 555.366c-15.988 0-28.978 11.091-28.978 24.68 0 13.69 12.99 24.682 28.978 24.682s28.977-10.992 28.977-24.681c0-13.59-12.89-24.68-28.977-24.68z m47.563-16.087c-5.996 0-11.991 7.194-11.991 15.987 0 8.893 6.095 16.088 11.99 16.088 5.996 0 12.091-7.195 12.091-16.088-0.1-8.793-6.195-15.987-12.09-15.987z" p-id="2127"></path></svg> 微博分享</a></div>
                    <div class="Menu-item"><svg t="1617016924519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" width="18" height="18"><path d="M710.4 511.36c16.64 0 29.44 10.88 29.44 24.32 0 10.88-12.8 21.76-29.44 21.76-12.8 0-23.68-10.88-23.68-21.76 0.64-13.44 11.52-24.32 23.68-24.32zM337.92 340.48c16.64 0 30.08 10.88 30.08 29.44 0 17.28-13.44 29.44-30.08 29.44-17.92 0-35.84-12.16-35.84-29.44 0-18.56 17.92-29.44 35.84-29.44z m165.12 58.24c-17.28 0-33.92-11.52-33.92-29.44 0-18.56 16.64-29.44 33.92-29.44 18.56 0 30.08 10.88 30.08 29.44 0 17.92-12.16 29.44-30.08 29.44z m76.8 112.64c17.28 0 30.08 10.88 30.08 24.32 0 10.88-12.8 21.76-30.08 21.76-11.52 0-23.68-10.88-23.68-21.76 0-13.44 11.52-24.32 23.68-24.32zM415.36 641.92c6.4 0 14.08 0 21.12-0.64-4.48-16.64-6.4-32.64-6.4-49.92 0-102.4 87.68-187.52 200.96-187.52 6.4 0 14.08 0.64 22.4 2.56-20.48-97.92-122.88-165.76-238.08-165.76-129.92 0-236.8 87.04-236.8 200.32 0 64 35.2 117.12 94.08 158.72l-24.32 71.68 84.48-42.88c28.8 8.32 51.84 13.44 82.56 13.44z m347.52 81.28c46.72-33.92 82.56-81.92 82.56-135.04 0-95.36-95.36-172.16-200.96-172.16-112 0-200.32 76.8-200.32 172.16s88.32 171.52 200.32 171.52c24.32 0 47.36-7.68 71.68-12.16l63.36 35.84-16.64-60.16zM512 0c282.88 0 512 229.12 512 512s-229.12 512-512 512S0 794.88 0 512 229.12 0 512 0z" p-id="3061"></path></svg> 微信分享<img src="<?php $this->options->themeUrl("poster/api.php"); ?>?url=<?php $this->permalink() ?>">
                    </div>
                </div>
                <div><svg t="1617016981855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3873" width="15" height="15"><path d="M826.48 660.9c-60.456 0-109.88 32.358-132.9 82.596L401.373 619.203c17.045-26.404 26.41-58.768 26.41-93.666 0-14.459-1.706-28.943-5.12-42.573l186.572-144.752c24.72 18.729 56.253 29.798 91.177 29.798 84.347 0 147.38-63.012 147.38-146.432 0-83.45-63.054-146.462-147.38-146.462-84.352 0-146.535 63.011-146.535 146.462 0 21.29 4.265 40.868 11.07 57.892L392.837 411.433c-34.068-51.087-90.301-86.856-154.194-86.856-104.192-0.26-188.866 83.989-189.122 188.18a23.803 23.803 0 0 0 0 0.856c-0.2 104.192 84.106 188.815 188.298 189.015h0.83c39.188 0 75.811-10.194 105.635-28.928l335.683 143.032c4.27 79.176 65.602 137.923 146.509 137.923 84.372 0 146.554-62.992 146.554-146.437s-63.058-147.313-146.529-147.313h-0.02z" p-id="3874" fill="#ffffff"></path></svg>  分享</div>
            </div>
        </div>
    </div>
</footer>
<script type="text/javascript">
    $("#mClick").click(function (e) {
        if ($(this).hasClass('mobile_click')){
            $(this).prop('class','mobile_close')
        }else{
            $(this).prop('class','mobile_click')
        }
    })
    function Share(pType){
        var pTitle = "<?php $this->title(); ?>"; //待分享的标题
        var pImage = "<?php $this->fields->thumb(); ?>"; //待分享的图片
        var pContent = '<?php _e(str_replace(array("\r\n","\n","\r"),'<br/>',Typecho_Common::subStr(strip_tags($this->excerpt), 0, 80, '...')));?>'; //待分享的内容
        var pUrl = window.location.href; //当前的url地址
        var pObj = jQuery("div[class='yogo_hc']").find("h4");
        if(pObj.length){ pTitle = pObj.text();}
        var pObj = jQuery("div[class='yogo_hcs']").find("em");
        if(pObj.length){ pContent = pObj.text();  }
        var pObj = jQuery("div[class='con_cons']").find("img");
        if(pObj.length){ pImage = jQuery("div[class='con_cons']").find("img",0).attr("src");}
        shareys(pType, pUrl, pTitle,pImage, pContent);
    }
    function shareys(a, c, b, e, d) {
        switch (a) {
            case "sina":
                c = "http://service.weibo.com/share/share.php?title\x3d" + encodeURIComponent(d + "\u300c" + b +
                    "\u300d \u70b9\u8fd9\u91cc" + c) + "\x26pic\x3d" + e;
                window.open(c);
                break;
            case "tqq":
                c = "https://connect.qq.com/widget/shareqq/index.html?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" +
                    encodeURIComponent(b) + "\x26pics\x3d" + e;
                window.open(c);
                break;
            case "qzone":
                c = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" +
                    encodeURIComponent(b) + "\x26site\x3d\x26pics\x3d" + encodeURIComponent(e) + "\x26desc\x3d" + encodeURIComponent(d) +
                    "\x26summary\x3d" + encodeURIComponent(d);
                window.open(c);
                break;
            case "ren":
                c = "http://widget.renren.com/dialog/share?resourceUrl\x3d" + encodeURIComponent(c) + "\x26srcUrl\x3d" + e +
                    "\x26title\x3d" + encodeURIComponent(b), NaN + d, window.open(c)
        }
    }
</script>

添加自定义css

body #footfix.entry-footer {
  display: table;
  width: 100%;
  padding: 10px;
}
body #footfix.entry-footer .share {
  position: absolute;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  -webkit-box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1);
  box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1);
  z-index: 203;
  padding: 15px 0;
  width: 110px;
  animation: left 0.5s;
  left: -43px;
  top: -200px;
}
body #footfix.entry-footer .share .Menu-item {
  display: block;
  width: 100%;
  padding: 0 15px;
  text-align: left;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: black;
}
body #footfix.entry-footer .share .Menu-item a {
  color: var(--main);
}
body #footfix.entry-footer .share .Menu-item img {
  max-width: 100%;
  height: auto;
  transition: opacity 0.3s;
  vertical-align: middle;
}
body #footfix.entry-footer .mobile_click .share {
  display: none;
}
body #footfix.entry-footer .post-tags a {
  margin-right: 15px;
  margin-bottom: 15px;
  line-height: 32px;
  display: inline-block;
  padding: 0 8px;
  background: var(--classC);
  border-radius: 3px;
  color: var(--minor);
  cursor: pointer;
  float: left;
  font-size: 11px;
}
body #footfix.entry-footer #mClick.mobile_click, body #footfix.entry-footer #mClick.mobile_close {
  float: right;
  color: #fff;
  padding: 0 10px;
  background: var(--theme);
  border-radius: 2px;
  font-size: 11px;
  line-height: 32px;
  cursor: pointer;
}
body #footfix.entry-footer #mClick.mobile_click, body #footfix.entry-footer #mClick.mobile_close {
  float: right;
  color: #fff;
  padding: 0 10px;
  background: var(--theme);
  border-radius: 2px;
  font-size: 11px;
  line-height: 32px;
  cursor: pointer;
}
body #footfix.entry-footer #mClick.mobile_close {
  position: relative;
}
body #footfix.entry-footer a#mClick, body #footfix.entry-footer a#mStats {
  opacity: 1;
}

本文转自: 即刻学术


您阅读这篇文章共花了:



文章评论

评论已关闭