跳至主要内容

分享按鈕

網站一開始是想要用來記錄生活，但因為每週固定和好友聚餐，嘗試很多新店家，漸漸主軸就放在吃喝玩樂部分，後來因為同事常常不知道要吃什麼，想說不然網站文章打完後就分享給同事參考。

分享按鈕功能​

在還沒有分享按鈕前，要先複製網址，再貼到LINE上按傳送，想想都覺得有點麻煩，所以決定要放上分享按鈕，除了工作上會用到的LINE，因為只有1個看起來有點空，又加上FB和Twitter。

原本以為會很難，後來看了LINE官方有關建立「LINE分享」按鍵，發現可以直接使用自訂圖示就可以建立分享按鈕，只要設定連結網址https://social-plugins.line.me/lineit/share?url=分享頁面網址。

FB和Twitter也可以用同樣的方式分享。

設置分享按鈕​

基本上和添加留言功能的方法差不多。

圓形分享按鈕​

icon部分是用fontawesome。

src/theme/blogPostComponent.tsx
 export default function BlogPostPage(props: Props): JSX.Element {
   const BlogPostContent = props.content;

   return (
     <BlogPostProvider content={props.content} isBlogPostPage>
       <HtmlClassNameProvider
         className={clsx(
           ThemeClassNames.wrapper.blogPages,
           ThemeClassNames.page.blogPostPage,
         )}>
         <BlogPostPageMetadata />
         <BlogPostPageContent sidebar={props.sidebar}>
           <BlogPostContent />
           //分享按鈕
           <div className='socialShareButton'>
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossOrigin="anonymous"></link>
            <hr/>
            <ul>
              <li>分享</li>
                <li>
                <a title ='分享到FB' href={'https://www.facebook.com/sharer/sharer.php?u='+config.url+BlogPostContent.metadata.permalink} target="_blank">
                <i className="fab fa-facebook-f icon"></i></a>
              </li>
              <li>
                <a title ='分享到Line' href={'https://social-plugins.line.me/lineit/share?url='+config.url+BlogPostContent.metadata.permalink} target="_blank">
                <i className="fab fa-line icon"></i></a>
              </li> 
              <li>
                <a title ='分享到Twitter' href={'https://twitter.com/share?text='+BlogPostContent.metadata.title+'&url='+config.url+BlogPostContent.metadata.permalink} target="_blank">
                <i className="fab fa-twitter icon"></i></a>
              </li>
            </ul>
            <hr/>
           </div>
         </BlogPostPageContent>
       </HtmlClassNameProvider>
     </BlogPostProvider>
   );
 }
src/css/custom.css
.socialShareButton ul{
  display: flex;
  justify-content:center;
  text-align: center;
  margin: -10px 0;
}
.socialShareButton li {list-style: none;}
.socialShareButton li:nth-child(1){margin: 12px 10px 0 -20px;}
.socialShareButton a {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 25px;
  margin: 0 5px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.socialShareButton a .icon {
  position: relative;
  transition: .5s;
  z-index: 3;
}
.socialShareButton a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}
.socialShareButton a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .5s;
  z-index: 2;
}
.socialShareButton a:hover:before {top: 0;}
.socialShareButton li:nth-child(3) a{font-size: 35px;}
.socialShareButton li:nth-child(2) a:before{background: #3b5999;}
.socialShareButton li:nth-child(3) a:before{background: #06C755;}
.socialShareButton li:nth-child(4) a:before{background: #55acee;}

長方形分享按鈕​

為了和標籤的樣式一致，有一陣子使用的樣式。

分享按鈕

src/theme/BlogPostPage/index.tsx
export default function BlogPostPage(props: Props): JSX.Element {
  const BlogPostContent = props.content;
  const blogurl = 'https://from8to8.com'+BlogPostContent.metadata.permalink;

  return (
    <BlogPostProvider content={props.content} isBlogPostPage>
      <HtmlClassNameProvider
        className={clsx(
          ThemeClassNames.wrapper.blogPages,
          ThemeClassNames.page.blogPostPage,
        )}>
        <BlogPostPageMetadata />
        <BlogPostPageContent sidebar={props.sidebar}>
          <BlogPostContent />
            <ul className='socialShareButton margin-top--lg'>
              <li><b>分享：</b></li>
              <li><a href={'https://www.facebook.com/sharer/sharer.php?u='+blogurl} target="_blank" rel="noreferrer noopenner" className="share-btn facebook">Facebook</a></li>
              <li><a href={'https://social-plugins.line.me/lineit/share?url='+blogurl} target="_blank" rel="noreferrer noopenner" className="share-btn line">Line</a></li>
              <li><a href={'https://twitter.com/share?text='+BlogPostContent.metadata.title+'&url='+blogurl} target="_blank" rel="noreferrer noopenner" className="share-btn twitter">Twitter</a></li>
              <li><a href={'https://wa.me/?text='+blogurl} target="_blank" rel="noreferrer noopenner" className="share-btn whatsapp">WhatsApp</a></li>
            </ul>
        </BlogPostPageContent>
      </HtmlClassNameProvider>
    </BlogPostProvider>
  );
}
src/css/custom.css
.socialShareButton{text-align: right;}
.socialShareButton li {
  list-style: none;
  display: inline-block;
}
.share-btn,.share-btn:hover{color: white;}
.share-btn {
  background: var(--ifm-color-primary-light);
  padding: 5px 8px;
  margin-left:8px;
  border-radius: 5px;
  font-weight: 600;
}
.share-btn:hover {text-decoration: none;}
.share-btn.twitter:hover{background: #55acee;}
.share-btn.facebook:hover{background: #3B5998;}
.share-btn.line:hover{background: #06C755;}
.share-btn.whatsapp:hover{background: #25d366;}