search

ppoffice / hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.
https://ppoffice.github.io/hexo-theme-icarus/
MIT License
6.41k stars 1.55k forks source link

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

Open raincity343 opened 3 weeks ago

raincity343 commented 3 weeks ago

确保你在提交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 commented 3 weeks ago

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

ppoffice commented 2 weeks ago

试试把pjax禁用？

raincity343 commented 2 weeks ago

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

forgetfulengineer commented 2 weeks ago

試試看這個方法，應該可以不用關閉 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 commented 2 weeks ago

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