✨ 增加facebook comments

_config.yml

@@ -280,6 +280,17 @@ utterances:
   light_theme: github-light
   dark_theme: photon-dark
 
+# Facebook Comments Plugin
+# https://developers.facebook.com/docs/plugins/comments/
+facebook_comments:
+  enable: false
+  app_id:
+  user_id: # optional
+  pageSize: 10 # The number of comments to show
+  order_by: social # social/time/reverse_time
+  lang: en_US # Language en_US/zh_CN/zh_TW and so on
+  count: true
+
 #####     Footer Settings    ####
 # ------------------------------------
 since: 2020
@@ -518,7 +529,7 @@ aside:
   enable: true
   mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
   position: right # left or right
-  card_author: 
+  card_author:
     enable: true
     description:
   card_announcement:
@@ -670,7 +681,7 @@ fragment_cache: true
 # 插入代码到头部</head>之前 和 尾部</body>之前
 inject:
   head:
-    # - <link rel="stylesheet" href="xxxxx">
+  # - <link rel="stylesheet" href="xxxxx">
   bottom:
     # - <script src="xxxx"></script>
 

layout/includes/comments/facebook_comments.pug

@@ -0,0 +1,12 @@
+#fb-root
+script(async defer crossorigin="anonymous" src=`https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v6.0`)
+.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
+            data-href=urlNoIndex() 
+            data-numposts= theme.facebook_comments.pageSize || 10
+            data-order-by= theme.facebook_comments.order_by || 'social'
+            data-width="100%")
+
+if theme.darkmode.enable
+  script.
+    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow)

layout/includes/comments/index.pug

@@ -4,7 +4,8 @@
 - var gt = theme.gitalk && theme.gitalk.enable
 - var v = theme.valine && theme.valine.enable
 - var u = theme.utterances && theme.utterances.enable
-- var isComment = d || dj || l || gt || v || u
+- var fb = theme.facebook_comments && theme.facebook_comments.enable
+- var isComment = d || dj || l || gt || v || u || fb
 
 if isComment
   hr
@@ -23,4 +24,6 @@ if isComment
     else if v
       include ./valine.pug
     else if u
-      include ./utterances.pug
+      include ./utterances.pug
+    else if fb
+      include ./facebook_comments.pug

layout/includes/head.pug

@@ -17,7 +17,6 @@
 - else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','):  ([]).join(',') || config.keywords
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
-- var without_html = url.replace('index.html', '')
 
 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
@@ -72,7 +71,7 @@ if (theme.snackbar && theme.snackbar.enable)
   link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
 
 if theme.canonical
-  link(rel="canonical" href=without_html)
+  link(rel="canonical" href=urlNoIndex())
 
 if is_post()
   if(page.prev)

layout/includes/head/Open_Graph.pug

@@ -11,7 +11,7 @@ if theme.twitter_meta
 if theme.Open_Graph_meta
   meta(property="og:type" content=contentType)
   meta(property="og:title" content=pageTitle)
-  meta(property="og:url" content=without_html)
+  meta(property="og:url" content=urlNoIndex())
   meta(property="og:site_name" content=config.title)
   meta(property="og:description" content!=pageDescription)
   meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))

layout/includes/head/comment.pug

@@ -1,3 +1,9 @@
+if (theme.facebook_comments.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+  if theme.facebook_comments.app_id
+    meta(property="fb:app_id" content=theme.facebook_comments.app_id )
+  if theme.facebook_comments.user_id
+    meta(property="fb:admins" content=theme.facebook_comments.user_id)
+
 if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
   link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))
 

layout/includes/header/header.pug

@@ -8,8 +8,7 @@
         a.site-page.social-icon.search
           i.fa.fa-search.fa-fw
           span=' '+_p('search')
-    .menus_items
-      include ./menu_item.pug
+    !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
 
     span.toggle-menu.close
       a.site-page

layout/includes/header/index.pug

@@ -33,7 +33,7 @@ if theme.douban
         span#subtitle
       if(theme.social)
         #site_social_icons
-          !=partial('includes/header/social', {}, {cache:theme.fragment_cache})
+          !=fragment_cache('social', function(){return partial('includes/header/social')})
     #scroll_down
       i.fa.fa-angle-down.scroll-down-effects
   else if is_post()

layout/includes/header/menu_item.pug

@@ -1,18 +1,19 @@
-each value, label in theme.menu
-  if !Array.isArray(value)
-    .menus_item
-      a.site-page(href=url_for(trim(value.split('||')[0])))
-        i.fa-fw(class=trim(value.split('||')[1]))
-        span=' '+label
-  else
-    .menus_item
-      a.site-page
-        i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true")
-        span=' '+ trim(label.split('||')[0])
-        i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
-      ul.menus_item_child
-        each i in value
-          li
-            a.site-page(href=url_for(trim(i.split('||')[1])))
-              i.fa-fw(class=trim(i.split('||')[2]))
-              span=' '+trim(i.split('||')[0])
+.menus_items
+  each value, label in theme.menu
+    if !Array.isArray(value)
+      .menus_item
+        a.site-page(href=url_for(trim(value.split('||')[0])))
+          i.fa-fw(class=trim(value.split('||')[1]))
+          span=' '+label
+    else
+      .menus_item
+        a.site-page
+          i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true")
+          span=' '+ trim(label.split('||')[0])
+          i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
+        ul.menus_item_child
+          each i in value
+            li
+              a.site-page(href=url_for(trim(i.split('||')[1])))
+                i.fa-fw(class=trim(i.split('||')[2]))
+                span=' '+trim(i.split('||')[0])

layout/includes/header/post-info.pug

@@ -82,3 +82,10 @@
           span= _p('post.comments') + ':'
           a(href=url_for(page.path) + '#post-comment')
             span.gitalk-comment-count.comment-count
+        else if theme.facebook_comments.enable && theme.facebook_comments.count && page.comments !== false
+          if (postWordcount || theme.busuanzi.page_pv)
+            span.post-meta__separator |
+          i.post-meta__icon(class=commentCount aria-hidden="true")
+          span= _p('post.comments') + ':'
+          a.comment-count(href=url_for(page.path) + '#post-comment')
+            span.fb-comments-count(data-href=urlNoIndex())

layout/includes/mobile-sidebar/mobile-menus.pug

@@ -23,5 +23,4 @@
             .headline= _p('aside.categories') 
             .length_num= site.categories.length
   hr
-  .menus_items
-    include ../header/menu_item.pug
+  !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

layout/includes/widget/card_author.pug

@@ -31,4 +31,4 @@
 
     if(theme.social)
         .card-info-social-icons.is-center
-          include ../header/social.pug
+          !=fragment_cache('social', function(){return partial('includes/header/social')}) 

scripts/helpers/page.js

@@ -42,3 +42,12 @@ hexo.extend.helper.register('cloudTags', function (source, minfontsize, maxfonts
   })
   return result
 })
+
+hexo.extend.helper.register('urlNoIndex', function () {
+  const { permalink } = hexo.config
+  let url = this.url.replace(/index\.html$/, '')
+  if (!permalink.endsWith('.html')) {
+    url = url.replace(/\.html$/, '')
+  }
+  return url
+})

source/css/_layout/head.styl

@@ -43,7 +43,7 @@
       margin: 0 .5rem
       color: $light-grey
       text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
-      font-size: .9rem
+      font-size: 1rem
       cursor: pointer
 
   #scroll_down

source/css/_search/local-search.styl

@@ -51,6 +51,7 @@
 
     .search-result
       margin: 0 0 .4rem
+      word-break: break-all
 
     .search-keyword
       color: $search-keyword-highlight