LouisBarranqueiro / hexo-theme-tranquilpeak

:lipstick: A gorgeous responsive theme for Hexo blog framework
https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/
GNU General Public License v3.0
1.85k stars 484 forks source link

Disqus setting problem #136

Closed silent-tan closed 8 years ago

silent-tan commented 8 years ago

sorry to bother you again...

as the title, because there is no more detail to set disqus, and it seems i just have to fill my disqus shortname in theme config, but it doesn't work.

the browers console show

image

and i had saw the html code, i not found some code like what i found in

image

also

image

of course, i set the front-matter comments to true.

and anything else i should do?

LouisBarranqueiro commented 8 years ago

Normally, you just have to fill the disqus_shortname, page must be a post and comments is set to true and this portion of code do the job :

<% if (theme.disqus_shortname && is_post() && post.comments) { %>
    <script type="text/javascript">
        var disqus_shortname = '<%= theme.disqus_shortname %>';
        (function() {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
<% } %>

I recommend you to read and follow carefully the Tranquilpeak docs to configure the theme. I think your problem can be solve with.

silent-tan commented 8 years ago

I reinstall your theme with production utilisation, but the disqus does still not work.

and the problem still is

image

I'm not sure weather I set the disqus basic setting correctly.

i enage it:

image

image

the hexo config is :

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Show me code
subtitle:
description:
author: Hie Tan
language: zh_cn
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://showmecode.cc
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
# theme: landscape
theme: tranquilpeak

# tranquilpeak config
feed:
    type: atom
    path: atom.xml
    limit: 20

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/futurefeeling/futurefeeling.github.io.git
  branch: master

and your theme config:

# Tranquilpeak Hexo theme
# Version : 1.4.3
# Author : Louis Barranqueiro

# I STRONGLY recommend you to use a CDN to speed up loading of pages.
# There is many free CDN like Cloudinary or you can also use indirectly
# by using services like Google Photos.

# If you want to store images yourself, please read this guidelines:
# For users, if you only use this theme, put your images directly in `source/assets/images` folder
# But if you want to add local images, you can put your images directly in `source/assets/images` folder
# For developpers, if you modify this theme, put your images in `source/_images` folder and
# use grunt task `build` to synchronize assets

# Image directory (default: images)
image_dir: assets/images

# Sidebar Configuration
#    You can add groups of links and links much as you want
#    You just have to respect the indentation : `groups of links` -> `link` -> `title, link, icon`
#    E.g:
#    -------------
#    sidebar:                   # DON'T modify this variable name
#         menu:                 # Name of your groups of links (changeable)
#             home:             # Name of your link (changeable)
#                title: Home    # Title of your link displayed
#                url: /         # URL of the link. If the URL is internal, domain name is not necessary
#                icon: home     # Name of the font awesome icon class without the `fa-`
#                               # Go to http://fontawesome.io/icons/ to find class name of icon
sidebar:
    menu:
        home:
            title: global.home
            url: /
            icon: home
        categories:
            title: global.categories
            url: /all-categories
            icon: bookmark
        tags:
            title: global.tags
            url: /all-tags
            icon: tags
        archives:
            title: global.archives
            url: /all-archives
            icon: archive
        search:
            title: global.search
            url: /#search
            icon: search
            # `st-search-show-outputs` classes are used to open swiftype search window
            class: st-search-show-outputs
        about:
            title: global.about
            url: /#about
            icon: question
    author_links:
        # github:
        #     title: global.github
        #     url: https://github.com/
        #     icon: github
        # stack_overflow:
        #     title: global.stack_overflow
        #     url: http://stackoverflow.com/users
        #     icon: stack-overflow
        # twitter:
        #     title: global.twitter
        #     url: https://twitter.com/
        #     icon: twitter
        # facebook:
        #     title: global.facebook
        #     url: https://facebook.com/
        #     icon: facebook
        # google_plus:
        #     title: global.google_plus
        #     url: https://plus.google.com/
        #     icon: google-plus
        # linked_in:
        #     title: global.linkedin
        #     url: https://www.linkedin.com/profile/
        #     icon: linkedin
        # mail:
        #     title: global.mail
        #     url: mailto:
        #     icon: envelope-o
    rss:
        rss:
            title: global.rss
            url: /atom.xml
            icon: rss

# Header configuration
# The link at the right of the header is customizable
# You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture.
# By default, author's gravatar or author's picture is displayed if `icon` is empty
# DON'T edit `header`, `right_link`, `url`, `icon` and `class` variable name
# E.g to display a shortcut to open swiftype search window :
#     url: /#search
#     icon: search
#     class: st-search-show-outputs
header:
    right_link:
        url: /#about
        icon:
        class:

# Author
# Your biography and your job is editable in each languages files in `languages` folder
author:
    email: 
    location: 
    # Your profile picture located in folder `source/_images/` (development)
    # or in `source/assets/images/` (production)
    # or you can use an external url
    # Overwritten by your gravatar image if `gravatar_email` is filled
    picture: 
    # Your Twitter username without the @. E.g : `tranquilpeak`
    twitter:
    # Your google plus profile id. E.g : `+Tranquilpeak` or `123812884128439`
    google_plus: 

# Customization
# Define the behavior of the sidebar
# 1: Display large sidebar on large screen, medium sidebar on medium screen and header bar on small screen
# and large sidebar is swiped
# 2: Display medium sidebar on large and medium screen and header bar on small screen and medium sidebar is swiped (default)
# 3: Display header bar on all screens and large sidebar is swiped
# 4: Display header bar on all screens and medium sidebar is swiped
sidebar_behavior: 2
# Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable)
clear_reading: true
# Head title displayed at the top of the table of contents.
toc_title: Table of contents
# Display thumbnail image of each post on index pages (false: disabled, true: enabled)
thumbnail_image: true
# Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`)
# Set this value to `right` if you have old posts to keep the old style on them
# and define `thumbnailImagePosition` on a post to overwrite this setting
thumbnail_image_position: right
# Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image
# Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image
# and set `autoThumbnailImage` to `false` on a post to overwrite this setting
auto_thumbnail_image: true
# Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages.
# There is many free CDN like Cloudinary or you can also use indirectly
# by using services like Google Photos.
# Current image is on AWS S3 and delivered by AWS CloudFront.
# Otherwise put your image in folder `source/_images/` (development)  or in `source/assets/images/` if you can't or don't want to build the theme,
# and use relative url : `your-image.png`
cover_image: cover.jpg
# Your favicon located in folder `source/_images/` (development) or in `source/assets/images/` (production)
favicon:
# Display an image gallery at the end of a post which have photos variables (false: disabled, true: enabled)
image_gallery: true
# Pagination behavior of archive, category and tag pages (false: pagination disabled, true: pagination enabled)
archive_pagination: true
category_pagination: true
tag_pagination: true

# Integrated services
# Your Disqus shortname
disqus_shortname: hietan
# Your Google analystics web property ID : UA-XXXXX-X
google_analytics_id:
# Your Gravatar email. Overwrite `author.picture` everywhere in the blog
gravatar_email:
# Your swiftype install key
swiftype_install_key: 
# Your Facebook user ids used to connect your blog with your facebook user accounts (Facebook Insights). Separate ids with comma. e.g : 9830047,1003342
fb_admin_ids:
# Your Facebook app id used to connect your blog with your facebook app account (Facebook Insights). E.g : 9841307
fb_app_id:

and this is my article front-matter

title: 正式开始写博客
date: 2015-10-31 21:35:45
tags: 日记
categories: 随笔
clearReading: true
thumbnailImage: image-1.png
thumbnailImagePosition: right
autoThumbnailImage: false
metaAlignment: center
comments: true
---

except above, I do nothing...

LouisBarranqueiro commented 8 years ago

It doesn't come from the theme. where your blog is hosted?

LouisBarranqueiro commented 8 years ago

ok. I saw that your blog is on GitHub : futurefeeling.github.io and redirect with the CNAME file. try to remove the CNAME and check if the problem persist with futurefeeling.github.io domain name. Don't forget to edit the configuration file : url and root variable with http://futurefeeling.github.io and /.

silent-tan commented 8 years ago

I tried it, but it makes no use

silent-tan commented 8 years ago

I don't know why? But it works after I reinstall more than four times

LouisBarranqueiro commented 8 years ago

good news. :D re-install what? npm dependencies?

silent-tan commented 8 years ago

.... hexo init and use your theme.

here is a demo of your theme.