Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

同时使用 MathJax 和 Pjax,首页公式渲染正确,点进文章后公式没有渲染 #1327

Open
raincity343 opened this issue Nov 6, 2024 · 6 comments
Labels
bug:extension Issues about widgets, comment, share, search, and plugins.

Comments

@raincity343
Copy link

raincity343 commented Nov 6, 2024

确保你在提交Bug反馈之前仔细阅读了Hexo文档Icarus用户指南,和GitHub issues来了解你的问题是否已经被他人提出过。

我确实读了文档,也没有找到相同 issue。

Bug描述

问题一:如标题。

问题二:在 Markdown 的加粗语法里面写 LaTeX 没有渲染。是不支持吗?(这不是很重要的需求,如果不支持我就删掉加粗里面的 LaTeX。)

系统与环境
列出你的Hexo和Icarus的版本和配置。

hexo-cli: 4.3.2
os: linux 5.15.0-124-generic Ubuntu 20.04.6 LTS (Focal Fossa)
node: 22.11.0
acorn: 8.12.1
ada: 2.9.0
amaro: 0.1.8
ares: 1.33.1
brotli: 1.1.0
cjs_module_lexer: 1.4.1
cldr: 45.0
icu: 75.1
llhttp: 9.2.1
modules: 127
napi: 9
nbytes: 0.1.1
ncrypto: 0.0.1
nghttp2: 1.63.0
nghttp3: 0.7.0
ngtcp2: 1.3.0
openssl: 3.0.15+quic
simdjson: 3.10.0
simdutf: 5.5.0
sqlite: 3.46.1
tz: 2024b
undici: 6.20.0
unicode: 15.1
uv: 1.48.0
uvwasi: 0.0.21
v8: 12.4.254.21-node.21
zlib: 1.3.0.1-motley-71660e1

_config.yml:

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

# Site
title: raincity's blog
subtitle: ''
description: ''
keywords:
author: raincity
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://raincity.vercel.app
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  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:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

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

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

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

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/raincity343/raincity343.github.io

_config.icarus.yml:

# Version of the configuration file
version: 5.1.0
# Icarus theme variant, can be "default" or "cyberpunk"
variant: default
# Path or URL to the website's logo
logo: /img/logo.svg
# Page metadata configurations
head:
    # URL or path to the website's icon
    favicon: /img/favicon.svg
    # Web application manifests configuration
    # https://developer.mozilla.org/en-US/docs/Web/Manifest
    manifest:
        # Name of the web application (default to the site title)
        name: 
        # The displayed name of the web application
        # when there is not enough space to display full name
        short_name: 
        # The start URL of the web application
        start_url: 
        # The default theme color for the application
        theme_color: 
        # A placeholder background color for the application page to display
        # before its stylesheet is loaded
        background_color: 
        # The preferred display mode for the website
        display: standalone
        # Image files that can serve as application icons for different contexts
        icons:
            -
                # The path to the image file
                src: ''
                # A string containing space-separated image dimensions
                sizes: ''
                # A hint as to the media type of the image
                type: 
    # Open Graph metadata
    # https://hexo.io/docs/helpers.html#open-graph
    open_graph:
        # Page title (og:title) (optional)
        # You should leave this blank for most of the time
        title: 
        # Page type (og:type) (optional)
        # You should leave this blank for most of the time
        type: blog
        # Page URL (og:url) (optional)
        # You should leave this blank for most of the time
        url: 
        # Page cover (og:image) (optional)
        # You should leave this blank for most of the time
        image: 
        # Site name (og:site_name) (optional)
        # You should leave this blank for most of the time
        site_name: 
        # Page author (article:author) (optional)
        # You should leave this blank for most of the time
        author: 
        # Page description (og:description) (optional)
        # You should leave this blank for most of the time
        description: 
        # Twitter card type (twitter:card)
        twitter_card: 
        # Twitter ID (twitter:creator)
        twitter_id: 
        # Twitter Site (twitter:site)
        twitter_site: 
        # Google+ profile link (deprecated)
        google_plus: 
        # Facebook admin ID
        fb_admins: 
        # Facebook App ID
        fb_app_id: 
    # Structured data of the page
    # https://developers.google.com/search/docs/guides/intro-structured-data
    structured_data:
        # Page title (optional)
        # You should leave this blank for most of the time
        title: 
        # Page description (optional)
        # You should leave this blank for most of the time
        description: 
        # Page URL (optional)
        # You should leave this blank for most of the time
        url: 
        # Page author (article:author) (optional)
        # You should leave this blank for most of the time
        author: 
        # Page publisher (optional)
        # You should leave this blank for most of the time
        publisher: 
        # Page publisher logo (optional)
        # You should leave this blank for most of the time
        publisher_logo: 
        # Page images (optional)
        # You should leave this blank for most of the time
        image: 
    # Additional HTML meta tags in an array
    meta:
        # Meta tag specified in <attribute>=<value> style
        # E.g., name=theme-color;content=#123456 => <meta name="theme-color" content="#123456">
        - ''
    # URL or path to the website's RSS atom.xml
    rss: 
# Page top navigation bar configurations
navbar:
    # Navigation menu items
    menu:
        Home: /
        Archives: /archives
        Categories: /categories
        Tags: /tags
        About: /about
    # Links to be shown on the right of the navigation bar
    # links:
    #     Download on GitHub:
    #         icon: fab fa-github
    #         url: https://github.com/ppoffice/hexo-theme-icarus
# Page footer configurations
# footer:
#     # Copyright text
#     copyright: © 2019
#     # Links to be shown on the right of the footer section
#     links:
#         Creative Commons:
#             icon: fab fa-creative-commons
#             url: https://creativecommons.org/
#         Attribution 4.0 International:
#             icon: fab fa-creative-commons-by
#             url: https://creativecommons.org/licenses/by/4.0/
#         Download on GitHub:
#             icon: fab fa-github
#             url: https://github.com/ppoffice/hexo-theme-icarus
# Article related configurations
article:
    # Code highlight settings
    highlight:
        # Code highlight themes
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        theme: atom-one-light
        # Show copy code button
        clipboard: true
        # Default folding status of the code blocks. Can be "", "folded", "unfolded"
        fold: unfolded
    # Whether to show estimated article reading time
    readtime: false
    # Whether to show updated time. For "auto", shows article update time only when page.updated is set and it is different from page.date
    update_time: false
    # Article licensing block
    licenses:
        Creative Commons:
            icon: fab fa-creative-commons
            url: https://creativecommons.org/
        'CC BY-NC-SA 4.0': 'https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans'
        # Attribution:
        #     icon: fab fa-creative-commons-by
        #     url: https://creativecommons.org/licenses/by/4.0/
        # Noncommercial:
        #     icon: fab fa-creative-commons-nc
        #     url: https://creativecommons.org/licenses/by-nc/4.0/
# Search plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search/
search:
    type: insight
    # Whether to include pages in the search results
    index_pages: true
# Comment plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment/
# comment:
#     type: disqus
#     # Disqus shortname
#     shortname: ''
# Donate plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation/
# donates:
#     # "Afdian.net" donate button configurations
#     -
#         type: afdian
#         # URL to the "Afdian.net" personal page
#         url: ''
#     # Alipay donate button configurations
#     -
#         type: alipay
#         # Alipay qrcode image URL
#         qrcode: ''
#     # "Buy me a coffee" donate button configurations
#     -
#         type: buymeacoffee
#         # URL to the "Buy me a coffee" page
#         url: ''
#     # Patreon donate button configurations
#     -
#         type: patreon
#         # URL to the Patreon page
#         url: ''
#     # Paypal donate button configurations
#     -
#         type: paypal
#         # Paypal business ID or email address
#         business: ''
#         # Currency code
#         currency_code: USD
#     # Wechat donate button configurations
#     -
#         type: wechat
#         # Wechat qrcode image URL
#         qrcode: ''
# Share plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/
# share:
#     type: sharethis
#     # URL to the ShareThis share plugin script
#     install_url: ''
# Sidebar configurations.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # Left sidebar configurations
    left:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: false
    # Right sidebar configurations
    right:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: false
# Sidebar widget configurations
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    # Profile widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: profile
        # Author name
        author: raincity
        # Author title
        # author_title: Your title
        # Author's current location
        # location: Your location
        # URL or path to the avatar image
        avatar: 
        # Whether show the rounded avatar image
        avatar_rounded: false
        # Email address for the Gravatar
        gravatar: 
        # URL or path for the follow button
        # follow_link: https://github.com/ppoffice
        # Links to be shown on the bottom of the profile widget
        # social_links:
        #     Github:
        #         icon: fab fa-github
        #         url: https://github.com/ppoffice
        #     Facebook:
        #         icon: fab fa-facebook
        #         url: https://facebook.com
        #     Twitter:
        #         icon: fab fa-twitter
        #         url: https://twitter.com
        #     Dribbble:
        #         icon: fab fa-dribbble
        #         url: https://dribbble.com
        #     RSS:
        #         icon: fas fa-rss
        #         url: /
    # Table of contents widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: true
        # Maximum level of headings to show (1-6)
        depth: 3
    # Recommendation links widget configurations
    # -
    #     # Where should the widget be placed, left sidebar or right sidebar
    #     position: left
    #     type: links
    #     # Names and URLs of the sites
    #     links:
    #         Hexo: https://hexo.io
    #         Bulma: https://bulma.io
    # Categories widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: categories
    # Recent posts widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: recent_posts
    # Archives widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: archives
    # Tags widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: tags
        # How to order tags. For example 'name' to order by name in ascending order, and '-length' to order by number of posts in each tags in descending order
        order_by: name
        # Amount of tags to show. Will show all if not set.
        amount: 
        # Whether to show tags count, i.e. number of posts in the tag.
        show_count: true
    # Google FeedBurner email subscription widget configurations
    # -
    #     # Where should the widget be placed, left sidebar or right sidebar
    #     position: left
    #     type: subscribe_email
    #     # Hint text under the email input
    #     description: 
    #     # Feedburner ID
    #     feedburner_id: ''
    # Google AdSense unit configurations
    # -
    #     # Where should the widget be placed, left sidebar or right sidebar
    #     position: left
    #     type: adsense
    #     # AdSense client ID
    #     client_id: ''
    #     # AdSense AD unit ID
    #     slot_id: ''
    # Follow.it email subscription widget configurations
    # -
    #     # Where should the widget be placed, left sidebar or right sidebar
    #     position: left
    #     type: followit
    #     # Hint text under the email input
    #     description: 
    #     # Subscription form action URL
    #     action_url: ''
    #     # Feed claiming verification code
    #     verification_code: ''
# Plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/
plugins:
    # Enable page startup animations
    animejs: true
    # Show the "back to top" button
    back_to_top: true
    # Baidu Analytics plugin settings
    # https://tongji.baidu.com
    baidu_analytics:
        # Baidu Analytics tracking ID
        tracking_id: 
    # Bing Webmaster Tools plugin settings
    # https://www.bing.com/toolbox/webmaster/
    bing_webmaster:
        # Bing Webmaster Tools tracking ID in the <meta> tag
        tracking_id: 
    # BuSuanZi site/page view counter
    # https://busuanzi.ibruce.info
    busuanzi: false
    # CNZZ statistics
    # https://www.umeng.com/web
    cnzz:
        # CNZZ tracker id
        id: 
        # CNZZ website id
        web_id: 
    # Alerting users about the use of cookies
    # https://www.osano.com/cookieconsent/
    # cookie_consent:
    #     # The compliance type. Can be "info", "opt-in", or "opt-out"
    #     type: info
    #     # Theme of the popup. Can be "block", "edgeless", or "classic"
    #     theme: edgeless
    #     # Whether the popup should stay static regardless of the page scrolls
    #     static: false
    #     # Where on the screen the consent popup should display
    #     position: bottom-left
    #     # URL to your site's cookie policy
    #     policyLink: https://www.cookiesandyou.com/
    # Enable the lightGallery and Justified Gallery plugins
    gallery: true
    # Google Analytics plugin settings
    # https://analytics.google.com
    google_analytics:
        # Google Analytics tracking ID
        tracking_id: 
    # Hotjar user feedback plugin
    # https://www.hotjar.com/
    hotjar:
        # Hotjar site id
        site_id: 
    # Enable the KaTeX math typesetting support
    # https://katex.org/
    katex: false
    # Enable the MathJax math typesetting support
    # https://www.mathjax.org/
    mathjax: true
    # Enable the Outdated Browser plugin
    # http://outdatedbrowser.com/
    outdated_browser: false
    # Enable PJAX
    pjax: true
    # Show a progress bar at top of the page on page loading
    progressbar: true
    # Statcounter statistics
    # https://statcounter.com/
    statcounter:
        # Statcounter project id
        project: 
        # Statcounter project security code
        security: 
    # Twitter conversion tracking plugin settings
    # https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
    twitter_conversion_tracking:
        # Twitter Pixel ID
        pixel_id: 
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
    # Name or URL template of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL template of the webfont CDN provider
    fontcdn: google
    # Name or URL of the fontawesome icon font CDN provider
    iconcdn: fontawesome

浏览器:Mozilla Firefox 131.0.3。

复现方式
列出复现这个Bug的步骤,如:

  1. 访问 https://raincity343.github.io/
  2. 点击文章「欧拉回路」
  3. 公式没有渲染

期望行为
文章内公式正确渲染

截图

首页

图片

点进文章

图片

额外上下文

这是我的博客的源码仓库:https://github.com/raincity343/raincity343.github.io

@raincity343
Copy link
Author

我把加粗语法里的 LaTeX 删掉了,原来的效果可以见截图

@ppoffice
Copy link
Owner

试试把pjax禁用?

@raincity343
Copy link
Author

我记得禁用后能正常渲染,但是得明天才能重新部署

@forgetfulengineer
Copy link
Contributor

試試看這個方法,應該可以不用關閉 pjax
找到 node_modules\hexo-component-inferno\lib\view\plugin\mathjax.js,並修改建立 script 的地方,加上 "data-pjax": true,變成以下這樣

  return _createClass(Mathjax, [{
    key: "render",
    value: function render() {
      var jsUrl = this.props.jsUrl;
      var js = "MathJax = {\n      tex: {\n        inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n      },\n      svg: {\n        fontCache: 'global'\n      },\n      chtml: {\n        matchFontHeight: false\n      }\n    };";
      return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "script", null, null, 1, {
        "type": "text/javascript",
        "id": "MathJax-script",
        "async": true,
        "data-pjax": true,
        "dangerouslySetInnerHTML": {
          __html: js
        }
      }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
        "data-pjax": true,
        "src": jsUrl
      })], 4);
    }
  }]);

@raincity343
Copy link
Author

关闭 pjax 可以正常渲染,使用 @forgetfulengineer 提到的方法也可以正常渲染,现在部署的版本是关闭 pjax 的

@ppoffice ppoffice added the bug:extension Issues about widgets, comment, share, search, and plugins. label Dec 14, 2024
@isHarryh
Copy link
Contributor

isHarryh commented Dec 18, 2024

我也遇到此问题,但是关闭 pjax 后可以正常渲染。

从已经加载 MathJax 的页面,点击含有 data-pjax-state 属性的 <a> 超链接后,新进入的页面未能加载 MathJax。

这是因为 pjax 导致的 MathJax 的相关资源未在新页面加载。

@forgetfulengineer 提到的解决方法,显式地消除了 pjax 对 MathJax 的相关资源的影响。


但是上述解决方法需要修改 hexo-component-inferno 模块的具体实现。

目前我已找到一种新的解决方法,稍后将提交 PR。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug:extension Issues about widgets, comment, share, search, and plugins.
Projects
None yet
Development

No branches or pull requests

4 participants