Hexo-theme-next: Figcaption is not rendered normally

[nirvana6]

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

The caption of figure should be centered and the color of it should be grey. Actually, just several days ago, the appearance of figcaption looked normally.

Actual behavior

As you can see in 保持Mathematica中3D模型的原始风貌, the figcaption of the first picture, i.e. Figure 1: 想象中的3D图形, is not rendered correctly.

P.S. my browser is firefox 58.

Steps to reproduce the behavior

1. N/A
2. N/A
3. N/A

• Link to demo site with this issue: http://bitwan.net/2016/09/28/exportMathematica/
• Link(s) to source code or any usefull link(s): N/A

Node.js and NPM Information

v9.5.0
5.6.0

Package dependencies Information

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.5.0"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-browsersync": "^0.3.0",
    "hexo-deployer-rsync": "^0.1.3",
    "hexo-filter-optimize": "^0.2.5",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-pandoc": "^0.2.2",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}% 

Hexo Information

Hexo version

hexo: 3.5.0
hexo-cli: 1.0.4
os: Linux 4.15.0-1-amd64 linux x64
http_parser: 2.7.0
node: 9.5.0
v8: 6.2.414.46-node.18
uv: 1.19.1
zlib: 1.2.11
ares: 1.13.0
modules: 59
nghttp2: 1.29.0
napi: 2
openssl: 1.0.2n
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: bitWan's Blog
subtitle: 
description: The Road Not Taken(未选之路)
author: bitWan
language: en
timezone:

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

# 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: 10
  order_by: -date

# 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: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: rsync
  host: 1111111111111
  user: demo
  root: //////////////
  port: 11

# hexo-renderer-pandoc
pandoc:
  filters:
    - pandoc-crossref
    - pandoc-citeproc
  extra:
    #bibliography: "/home/nirvana/workspace/blog/blog.bib"
  meta:
    - bibliography: "/home/nirvana/workspace/blog/blog.bib"
    - link-citations: true

# hexo-generator-sitemap 
sitemap:
    path: sitemap.xml

# hexo-generator-baidu-sitemap
baidusitemap:
    path: baidusitemap.xml



# swiftype search engine
#swiftype_key: symE3mcjGdXM7UEPimL5

# 百度统计
baidu_analytics: 44444444444444444444444444444444

# Local Search 
search:
    path: search.xml
    field: post
    format: more
    limit: 10000

# hexo-filter-optimize: A hexo plugin that optimize the pages loading speed.
# https://github.com/theme-next/hexo-filter-optimize
filter_optimize:
    enable: false
    # remove static resource query string
    #   - like `?v=1.0.0`
    remove_query_string: false
    # remove the surrounding comments in each of the bundled files
    remove_comments: false
    css:
      enable: true
      # bundle loaded css file into the one
      bundle: true
      # use a script block to load css elements dynamically
      delivery: true
      # make specific css content inline into the html page
      #   - only support the full path
      #   - default is ['css/main.css']
      inlines:
      excludes:
    js:
      # bundle loaded js file into the one
      bundle: true
      excludes:
    # set the priority of this plugin,
    # lower means it will be executed first, default is 10
    priority: 12

NexT Information

NexT Version:

[x] Latest Master branch.
[] Latest Release version.
[] Old version -

NexT Scheme:

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

NexT Configuration:

font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  host: //fonts.proxy.ustclug.org

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: xx`. Use `px` as unit.

  # Global font settings used for all elements in <body>.
  global:
    external: true
    family: Lato
    size:

  # Font settings for Headlines (H1, H2, H3, H4, H5, H6).
  # Fallback to `global` font settings.
  headings:
    external: true
    family:
    size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  posts:
    external: true
    family:

  # Font settings for Logo.
  # Fallback to `global` font settings.
  logo:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:
    size:

# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# Math Equations Render Support
math:
  enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: false

  engine: mathjax
  #engine: katex

  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  mathjax:
    # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    # For newMathJax CDN (cdnjs.cloudflare.com) with fallback to oldMathJax (cdn.mathjax.org).

# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
  enable: true
  # if auto
  #   - save the reading position when closing the page
  #   - or clicking the bookmark-icon
  # if manual, only save it by clicking the bookmark-icon
  save: auto

I enable some third-party service, however, this should not affect the appearance of the figcaption.

Other Information

My browser is firefox 58. I guesstimate the error is caused by something with html5, since several days ago, some embed html tag <div align='center'> some fig </div> lost its style. After I looked up the w3cSchool, I know this html4 is not supported by html5.

Thanks for your debugging.

[nirvana6]

I can determine that this problem is caused by the difference between html4 and html5

---

When I output the markdown as html4, some figure with caption says:

<div class="figure">
    <img src="/img/mathematicaX3DFedoras.jpeg" alt="Figure 1: 想象中的3D图形" id="fig:good3D">
    <p class="caption">Figure 1: 想象中的3D图形</p>
</div>

While if I transfer the markdown into html5, the same figure with caption says:

<figure>
    <img src="/img/mathematicaX3DFedoras.jpeg" alt="Figure 1: 想象中的3D图形" id="fig:good3D">  
    <figcaption>Figure 1: 想象中的3D图形</figcaption>
</figure>

the later html5 code is not rendered correctly. And this problem is caused by _some workaround_ made by @iissnan within issue pandoc图片的caption出现了两次.

---

@iissnan has explained the reason. I will translate it briefly.

The syntax to define a image is `![alt](img "title")`.

Generally, NexT detects the figure with javascript. If the figure has `title` \
 attribute, NexT will generate `caption` automatically. Meanwhile, \ 
`pandoc markdown` also generate a `caption` using `alt` attribute.

......

As a result, If you want to use `hexo-renderer-pandoc` as markdown \
 renderer, I  ( @iissnan ) suggest you delete `title` attribue, and instead \ 
keep the `alt`. After all,  this is the default behaviour of pandoc, which \ 
we couldn't change.

A Workaround:  I have applied the stylesheet of `generated NexT caption` \ 
to the `caption produced by pandoc markdown`. You'd better not write \
 `title` and only use `alt`

---

I hope that some similar workaround could be made, because a lot of people use hexo-renderer-pandoc as the backend. And I can't leave pandoc because I heavily rely on it to write scientific paper in company with pandoc-crossref filter.

Thanks for your kind consideration.

[nirvana6]

I give out solution. Please edit the following file:

themes/next/source/css/_common/components/post/post.styl

Change the original codes:

.post-body .figure .caption {
  @extend .post-body .image-caption;
}

into

.post-body .figure .caption, figcaption {
  @extend .post-body .image-caption;
}

Please help to edit the related file in this repository because I don't know how to edit file in official repository.

[sli1989]

Make a pull request.
figcaption only supported by hexo-renderer-pandoc ? i haven't use this function. just add sth in ![sth](url) ? U blog seems not detail. Can u lists some instructions website about pandoc citing/crossref/bibfile in next?

---

i have found big surprise in Tex form. 😀

[nirvana6]

@sli1989 you put forward two questions. My response speak as follows:

1. Both default render of NexT and hexo-renderer-pandoc can generate figcaption normally. But the original NexT theme css does not beautify figcaption.

2. You could use my configuration for hexo-renderer-pandoc. Besides, you should also install pandoc, pandoc-crossref, pandoc-citeproc in addition. Some recommended tutorials are:

   • hexo-renderer-pandoc. But there seems some confusion in its readme.md, and you could investigate more deeply by my blog.
   • pandoc. You just need to install it if you only use hexo-renderer-pandoc.
   • pandoc-citeproc. You just need to install it if you only use hexo-renderer-pandoc.
   • pandoc-crossref. And its syntax usage when writing your markdown.

Attention
(1) Do not use Haskell within windows operation system;
(2) Do not mess up the order of the filters, i.e. pandoc-crossref and pandoc-citeproc, as well as --bibliography. At least when use pandoc in shell, if you mess up the order of them, it won't work as you expect. ( refer to: pandoc, multiple filter)

[sli1989]

it's really helpful.
thanks.

[nirvana6]

@sli1989 A tested configuration for hexo-renderer-pandoc is:
~~~~shell

hexo-renderer-pandoc

pandoc:
filters:
- pandoc-crossref
- pandoc-citeproc
extra:
meta:
- bibliography: "/home/nirvana6/workspace/blog/blog.bib"
- link-citations: true
~~~~

I supply it here just for completeness.

[sli1989]

thanks, i have been noted in your blog.

but

• pandoc-citeproc and pandoc-crossref cannot be installed with npm? what's the location file in hexo?
• what's the path of /home/nirvana6/workspace/blog/blog.bib in hexo ?
• all the posts with one bibfile or one post with one bibfile?

[nirvana6]

@sli1989

• All of pandoc-citeproc, pandoc-crossref and pandoc are Haskell packages. They do not belong to nodejs.
• /home/nirvana6/workspace/blog/blog.bib is my own bibtex file, where I store all the references.
• all the posts share the same bibfile, not that each post has its own bibfile.

[sli1989]

Got it, but i have nothing about Haskell. Maybe learn sth. later.
thanks very mush.

[nirvana6]

@sli1989 you needn't learn Haskell. Instead, you only need learning how to install Haskell package.

In fact, I do not know Haskell either. 囧rz

[sli1989]

Maybe your solution is just useful in pandoc-crossref and pandoc-citeproc circumstance. It's not a general situation and there is no need to take a PR.

i have no problem in figure caption with pandoc render.

[nirvana6]

@sli1989 you decide it. maybe we can close this issue. Anyway, my PR is an improvement for the people who also use pandoc-crossref and pandoc-citeproc, meanwhile the ones who don't use pandoc-crossref and pandoc-citeproc lose nothing.

[sli1989]

does .post-body .figure .caption .figcaption perform as well as .post-body .figure .caption, figcaption?

[nirvana6]

@sli1989 other css attributes are ok. Besides, my NEXT version is 6.04. The edition pre 6 works normally.