Reward comment like 微信支付 is supposed to be central [solved]

Maples7 commented 5 years ago

I agree and want to create new issue

[x] Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
[x] Yes, I was on NexT Documentation Site.
[x] And yes, I already searched for current issues and this is not help to me.

Expected behavior

center reward comment:

Actual behavior

Link to demo site with this issue: http://maples7.com/2018/10/21/understand-concurrency/
Link(s) to source code or any usefull link(s): https://github.com/Maples7/blog, https://github.com/Maples7/Maples7.github.io

Node.js and NPM Information

v8.11.3
5.6.0

Package dependencies Information

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "dependencies": {
    "hexo": "^3.7.0",
    "hexo-all-minifier": "^0.5.2",
    "hexo-deployer-git": "^0.3.1",
    "hexo-filter-optimize": "^0.2.5",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-tag": "^0.2.0",
    "hexo-leancloud-counter-security": "^1.4.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.1",
    "hexo-symbols-count-time": "^0.4.4"
  }
}

Hexo Information

Hexo version

hexo: 3.8.0
hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

Hexo Configuration

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

# Site
title: Maples7's Blog
subtitle:
description: Forever young, forever on the road.
keywords: Maples7,个人博客,代码狗,浮生散记,一只代码狗的自我修养
author: Maples7
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://maples7.com/
root: /
permalink: :year/:month/:day/:subtitle/
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: :year-:month-:day-: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: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

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

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 5
  order_by: -date

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 20

category_generator:
  per_page: 20

# 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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    coding: git@git.coding.net:maples7/maples7.git
    github: git@github.com:Maples7/Maples7.github.io.git
  branch: master

#################################################
# New added settings by myself
#################################################

# Sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

# include files
include:
  - .nojekyll

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

filter_optimize:
  enable: true
  remove_query_string: true
  remove_comments: false
  css:
    enable: true
    bundle: true
    delivery: true
    inlines:
    excludes:
  js:
    bundle: true
    excludes:
  priority: 12

all_minifier: true

#################################################
# Theme Config starts from here...
#################################################

theme_config:
  scheme: Gemini
  favicon:
    small: favicon-16x16.png
    medium: favicon-32x32.png
    apple_touch_icon: apple-touch-icon.png
    safari_pinned_tab: safari-pinned-tab.svg
    android_manifest: site.webmanifest
    ms_browserconfig: browserconfig.xml
  avatar:
    url: https://i.loli.net/2018/08/06/5b67317dd4ba5.jpg
    rounded: true
  menu:
    home: / || home
    categories: /categories || th
    tags: /tags/ || tags
    archives: /archives/ || archive
    讲演: /slides || commenting
    about: /about/ || user
  menu_settings:
    icons: true
    badges: true
  scroll_to_more: false
  save_scroll: true
  mobile_layout_economy: true
  motion:
    enable: true
    async: true
    transition:
      post_block: fadeIn
      post_header: slideDownIn
      post_body: slideDownIn
      coll_header: slideLeftIn
      # Only for Pisces | Gemini.
      sidebar: slideUpIn
  codeblock:
    copy_button:
      enable: true
      show_result: true
  related_posts:
    enable: true
  sidebar:
    b2t: true
    scrollpercent: true
  seo: true
  index_with_subtitle: true
  baidu_push: true
  local_search:
    enable: true
    trigger: auto
    top_n_per_article: 1
    unescape: true

  github_banner: https://github.com/Maples7 || Follow me on GitHub
  reward:
    enable: true
    comment: 听说，你想请我喝杯咖啡？☕️
    wechatpay: https://i.loli.net/2018/08/06/5b6732ef0e7fe.gif
    alipay: https://i.loli.net/2018/08/06/5b6732ef1f148.gif
  post_copyright:
    enable: true
    license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>
  creative_commons:
    license: by-nc-sa
    sidebar: true
    post: true
  footer:
    since: 2016
    icon:
      name: heart
      animated: true
      color: '#DC143C'
    powered:
      enable: true
      version: true
    theme:
      enable: true
      version: true
    custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a> & <a href="https://pages.github.com/" class="theme-link" rel="noopener" target="_blank">Github Pages</a>
  wechat_subscriber:
    enabled: false
    qcode: /uploads/wechat-qcode.jpg
    description: 公众号会更新自己随手写的只言片语，欢迎来玩儿~
  social:
    GitHub: https://github.com/Maples7 || github
    知乎: https://www.zhihu.com/people/maples7 || globe
    豆瓣: https://www.douban.com/people/82391888/ || book
    微博: http://weibo.com/maples74lq/ || weibo
    邮箱: mailto:maples7@163.com || envelope
    简历: http://cv.maples7.com || file-text-o
  disqus:
    enable: true
    shortname: maples7
    count: true
    lazyload: true
  busuanzi_count:
    enable: true
    total_visitors: true
    total_visitors_icon: user
    total_views: true
    total_views_icon: eye
    post_views: false
    post_views_icon: eye

  fancybox: true
  bookmark:
    enable: true
    save: auto
  reading_progress:
    enable: true
    color: '#37c6c0'
    height: 2px
  pace: true
  fastclick: true
  lazyload: true
  han: true
  pangu: true
  vendors:
    jquery: //cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js
    fancybox: //cdn.jsdelivr.net/npm/fancybox@3.0.0/dist/js/jquery.fancybox.pack.js
    fancybox_css: //cdn.jsdelivr.net/npm/fancybox@3.0.0/dist/css/jquery.fancybox.min.css
    fastclick: //cdn.jsdelivr.net/npm/fastclick@1.0.6/lib/fastclick.min.js
    lazyload: //cdn.jsdelivr.net/npm/jquery_lazyload@1.9.3/jquery.lazyload.min.js
    velocity: https://cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.min.js
    velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.ui.min.js
    ua_parser: //cdn.jsdelivr.net/npm/ua-parser-js@0.7.17/src/ua-parser.min.js
    fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css
    # algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.js
    # algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.min.css
    pace: //cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js
    pace_css: //cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css
    # canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
    # canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.js
    # canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1.0.0/canvas-ribbon.js
    # three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three.min.js
    # three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js
    # canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js
    # canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js
    pangu: //cdn.jsdelivr.net/npm/pangu@3.3.0/dist/browser/pangu.min.js
    Han: //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css
    needmoreshare2_js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1.0.0/needsharebutton.min.js
    needmoreshare2_css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1.0.0/needsharebutton.min.css
    bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1.0.0/bookmark.min.js
    reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js
    # valine: //cdn.jsdelivr.net/npm/valine@1.3.3/dist/Valine.min.js
    # gitalk_js: https://cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.min.js
    # gitalk_css: https://cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.css
    # md5: https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js

NexT Information

NexT Version:

[X] Latest Master branch
[ ] Latest Release version
[ ] Old version

NexT Scheme:

[ ] All schemes
[ ] Muse
[ ] Mist
[ ] Pisces
[X] Gemini

NexT Configuration:

No changes~

Other Information

Chrome & Safari, macOS

stevenjoezhang commented 5 years ago

try this: han: false

Maples7 commented 5 years ago

@stevenjoezhang That helps! And it fixes other little bugs like wired italic words. I'll do that! Thank you!

ivan-nginx commented 5 years ago

@geekrainy seems bug with Han?

Maples7 commented 5 years ago

By the way, it seems that Han: //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css rather than han: //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css is the right way to load the vendor under configuration of vendors.

ivan-nginx commented 5 years ago

Of course Han is different from han. Are u use lowercase han?

https://github.com/theme-next/hexo-theme-next/blob/7a7681f188080b52a3a96817e9d95641f718589c/layout/_partials/head/head.swig#L30-L36

Maples7 commented 5 years ago

I mean it's lowercase han in doc: https://theme-next.org/docs/third-party-services/external-libraries/#Chinese-Typesetting, so maybe most users does not load it really to find this issue.

Maples7 commented 5 years ago

I found the loading error in page Console so changed han to Han and it helps.

ivan-nginx commented 5 years ago

Oh! Can u fix this in docs?

And add Attention about lowercase.

Maples7 commented 5 years ago

Yeah, I'll do that after confirmation.

Also, introducing this css lib causes the real issue mentioned above should be fixed.

ivan-nginx commented 5 years ago

@Maples7 how about use pangu instead of Han?

Maples7 commented 5 years ago

It seems pangu works well. I've turned on both of han and pangu as the _config.yml shows above, conflicts maybe?

ivan-nginx commented 5 years ago

Maybe...

I don't know, but i think what pangu and han have similar typo-functions, right?

maple3142 commented 5 years ago

@ivan-nginx The use of pangu is adding space between Chinese character and non-Chinese character. In comparison, han is a framwork to fix Chinese typesetting on web.

Maples7 commented 5 years ago

@maple3142 That's right. As I can see, pangu as a JavaScript lib works in compile-time but han as a CSS lib works in runtime, they should not conflict with each other in theory. Anyway, there should be somebody who knows them well enough to confirm where bugs are as I'm not so familiar with front-end knowledge.

ivan-nginx commented 5 years ago

And i'm not so familiar with CN services... =(

lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. It is possible issue was solved or at least outdated. Feel free to open new for related bugs.

theme-next / hexo-theme-next