Blog Building III: comment system selection

Because of the Internet , Depending on GitHub Of gitment and gitalk The effect of using the comment system is not ideal , The following uses Valine Comment framework , At the end of the article is attached gitment and gital Configuration method of .

Valine Comment on system configuration

register LeanCloud

Address ：https://leancloud.cn/

To configure LeanCloud

Create a new app

Copy App ID and App Key

Click Settings > Security Center Add your blog URL to the Security Center , Ensure the security of data call .

Modify the configuration file

In the theme themes There are theme configuration files provided by a third party under the directory \themes\next_config.yml
Open theme profile add to appid and appkey:

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active: gitalk
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any navs, here are some examples.
  nav:
    valine:
    #gitment:
    #gitalk:
      order: -1

# Valine
valine:
  enable: true
  appid: rhS1TWjCwvxj9w6rJwsqyAKK-gzGzoHsz # Your leancloud application appid
  appkey: ez9QTNyYE6XgmWP7A7xlkb7k # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-CN # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

design sketch

The yellow line drawing area can be customized , No account registration .

gitment and gitalk Configuration method of

# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: false
  github_id: https://github.com/c2h5oc2h5 # GitHub repo owner
  repo: changyan # Repository name to store issues
  client_id: f746246d77ace376eeaa # GitHub Application Client ID
  client_secret: 4c3b254274da2db241ff98c55ecf865bb67e25e4 # GitHub Application Client Secret
  admin_user: c2h5oc2h5 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: false # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

# gitment  Out of commission 
gitment:   
  enable: false
  mint: true  
  count: true
  lazy: false  						
  # Comment lazy loading , If true, By default, comments are not displayed , Click the button to view the comments 
  cleanly: false  	
  language: zh-CN		
  github_user: c2h5oc2h5					
  # github name 
  github_repo: changyan			
  # In the previous step, create a new warehouse name for storing comments 
  client_id: f746246d77ace376eeaa			
  # The above registration  OAuth Application  Of  Client ID
  client_secret: 4c3b254274da2db241ff98c55ecf865bb67e25e4
  # The above registration  OAuth Application  Applied  Client Secret
  proxy_gateway:
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint