✨ 增加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

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
@@ -24,3 +25,5 @@ if isComment
       include ./valine.pug
     else if u
       include ./utterances.pug
+    else if fb
+      include ./facebook_comments.pug