同时使用 MathJax 和 Pjax,首页公式渲染正确,点进文章后公式没有渲染
确保你在提交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的步骤,如:
- 访问 https://raincity343.github.io/
- 点击文章「欧拉回路」
- 公式没有渲染
期望行为 文章内公式正确渲染
截图
首页
点进文章
额外上下文
这是我的博客的源码仓库:https://github.com/raincity343/raincity343.github.io
我把加粗语法里的 LaTeX 删掉了,原来的效果可以见截图
试试把pjax禁用?
我记得禁用后能正常渲染,但是得明天才能重新部署
試試看這個方法,應該可以不用關閉 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);
}
}]);
关闭 pjax 可以正常渲染,使用 @forgetfulengineer 提到的方法也可以正常渲染,现在部署的版本是关闭 pjax 的
我也遇到此问题,但是关闭 pjax 后可以正常渲染。
从已经加载 MathJax 的页面,点击含有 data-pjax-state 属性的 <a> 超链接后,新进入的页面未能加载 MathJax。
这是因为 pjax 导致的 MathJax 的相关资源未在新页面加载。
@forgetfulengineer 提到的解决方法,显式地消除了 pjax 对 MathJax 的相关资源的影响。
但是上述解决方法需要修改 hexo-component-inferno 模块的具体实现。
目前我已找到一种新的解决方法,稍后将提交 PR。