hugo 博客添加分享功能

使用 share.js为MemE主题添加社交分享功能。

  • 首先 拷贝 share.js仓库到本地
git clone https://github.com/overtrue/share.js.git
  • 分别把share.js/dist/目录下的css,fonts,js拷贝到static目录下的css,fonts,js中。

  • 在博客根目录创建partials/share.html,添加内容:

<div class="social-share" data-initialized="true" data-wechat-qrcode-title="扫一扫分享到微信">
    <center>
    <font style="font-size:18px;color:darkcyan;">分享到:</font>
    <a href=" " class="social-share-icon icon-weibo"></a >
    <a href="#" class="social-share-icon icon-wechat"></a >
    <a href="#" class="social-share-icon icon-twitter"></a >
    <a href="#" class="social-share-icon icon-linkedin"></a >
    <a href="#" class="social-share-icon icon-facebook"></a >
    <a href="#" class="social-share-icon icon-qq"></a >
    <a href="#" class="social-share-icon icon-qzone"></a >
    </center>
</div>

<!--  css & js -->
<link rel="stylesheet" href="{{ "css/share.min.css" | absURL }}" />
<script src="https://hugo-picture.oss-cn-beijing.aliyuncs.com/social-share.min.js"></script>
  • 在博客根目录创建partials/custom/footer.html,添加内容:
<div class="container" role="main" itemscope itemtype="http://schema.org/Article">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
           
            <article role="main" class="blog-post" itemprop="articleBody" id="content">
              
                
                {{ if (.Params.share) }}
                {{ partial "share.html" }}
                {{ end }}
                
            </article>

最后,在你想开启分享功能的.md文章里面,添加:

share: true

即可。

updatedupdated2019-12-262019-12-26