Hexo NexT 테마에 ShareSDK 공유 추가

9408 단어 Blog
오늘 공유된 sdk를 발견했습니다. 각 플랫폼에서 사용할 수 있습니다.주제가 제공하는 몇 가지 공유 스타일을 별로 좋아하지 않기 때문이다.그냥 해봤어요.그래도 괜찮은 것 같아..다음은 공유 버튼과 공유 스타일: 효과는 아래 - 전송문:ShareSDK 웹 통합 공식 문서
다음은 웹 페이지에서 단추를 공유하는 코드입니다. 표시하고자 하는 위치에 다음 코드를 추가하면 됩니다.appkey는 당신의 앱키입니다.

<div class="-mob-share-ui-button -mob-share-open">  div>
<div class="-mob-share-ui" style="display: none">
    <ul class="-mob-share-list">
        <li class="-mob-share-weibo"><p>    p>li>
        <li class="-mob-share-tencentweibo"><p>    p>li>
        <li class="-mob-share-qzone"><p>QQ  p>li>
        <li class="-mob-share-qq"><p>QQ  p>li>
        <li class="-mob-share-renren"><p>   p>li>
        <li class="-mob-share-kaixin"><p>   p>li>
        <li class="-mob-share-douban"><p>  p>li>
        <li class="-mob-share-facebook"><p>Facebookp>li>
        <li class="-mob-share-twitter"><p>Twitterp>li>
    ul>
    <div class="-mob-share-close">  div>
div>
<div class="-mob-share-ui-bg">div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=  appkey">script>
            

NexT에 추가


그럼 넥스트 테마에 어떻게 추가하죠?단계는 다음과 같다.

1. 파일 만들기


테마 폴더 아래의 layout 폴더에서 _partials 아래의 share 폴더를 먼저 찾은 다음 sharesdk.swig 라는 파일을 추가해야 합니다.우리는 알아차릴 수 있다.이 폴더 아래에 놓인 것은 모두 공유된 프로필입니다.추가된 내용은 위의 큰 코드입니다.일부분만 수정하면 됩니다.수정된 부분은 다음과 같습니다.
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}">script>

테마 설정 파일에 appkey를 추가할 수 있도록 수정하기 위해서입니다.테마의 프로필에 shareSDKappkey를 추가하고 값을 첨부하면 됩니다.

2 옵션 구성 추가


sharesdk의 공유 버튼을 추가했지만 언젠가 사용하고 싶지 않은 날이 오면요.물론 간단합니다.프로파일만 수정하면 됩니다.그렇다면 어떻게 실현될까?우선 테마 폴더 아래 layout 폴더 아래 post.swig 를 찾으면 16줄 정도에 추가됩니다.
    <div class="post-spread">
      {% if theme.jiathis %}
        {% include '_partials/share/jiathis.swig' %}
      {% elseif theme.baidushare %}
        {% include '_partials/share/baidushare.swig' %}
      {% elseif theme.add_this_id %}
        {% include '_partials/share/add-this.swig' %}
      {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
        {% include '_partials/share/duoshuo_share.swig' %}
        {% elseif theme.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}
      {% endif %}
    div>

코드 추가
{% elseif theme.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}

이 코드는 테마 파일의 설정에 따라 문서에 해당하는 swig 파일을 추가합니다.프로필에서 선택적으로 공유 기능을 사용하려면 프로필에서 수정하면 된다.

수정config.yml


다음은 프로젝트의 프로필을 수정하는 것입니다.주제의 구성 파일에 추가하려면 다음과 같이 하십시오.
#Share
sharesdk: true
shareSDKappkey: appkey

사용하려면true로 설정하고 appkey를 추가할 수 있습니다.물론 사용하고 싶지 않아요.직접 주석을 달면 됩니다.

좋은 웹페이지 즐겨찾기