theme-shoka-x / hexo-theme-shokaX

a hexo theme based on shoka
https://docs-hexo.shokax.top
GNU Affero General Public License v3.0
321 stars 43 forks source link

note 提醒塊無法正常顯示 #257

Closed ThanatosDi closed 7 months ago

ThanatosDi commented 7 months ago

在开始之前......

问题发生位置

前端渲染不正确(CSS错位或JS报错等)

问题描述

當使用 note 提醒塊語法時在前端無法正常渲染

:::warning
測試 warning 提醒
:::

在前端顯示為 image

正常應顯示為 image

复现步骤

No response

相关配置

blog
├── @algolia/client-search@4.22.1
├── @waline/client@3.0.1
├── algoliasearch@4.22.1
├── esbuild@0.20.0
├── hexo-algoliasearch@2.0.1
├── hexo-feed@1.1.2
├── hexo-fs@4.1.1
├── hexo-lightning-minify@0.1.5
├── hexo-pagination@3.0.0
├── hexo-renderer-multi-next-markdown-it@0.2.1
├── hexo-renderer-pug@3.0.0
├── hexo-theme-shokax@0.4.2
├── hexo-util@3.2.0
├── hexo@7.0.0
├── instantsearch.js@4.64.2
├── js-yaml@4.1.0
├── mouse-firework@0.0.5
├── quicklink@2.3.0
├── shokax-cli@0.1.0
├── theme-shokax-anime@0.0.6
├── theme-shokax-pjax@0.0.3
├── twikoo@1.6.31
├── unlazy@0.10.4
└── vue@3.4.15

注意事项

D-Sketon commented 7 months ago

image 无法复现

ThanatosDi commented 7 months ago

在本地開發環境的時候會噴出大量 404 錯誤

image

image

config.yaml

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

# Site
title: ...
subtitle: ''
description: '...'
keywords:
author: ...
language: zh-TW
timezone: 'Asia/Taipei'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.kawai.moe
permalink: :category/:post_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:
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: false
  hljs: false
prismjs:
  preprocess: false
  line_number: 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:
  Python 程式語言: python
  Linux 相關: linux
  Windows: windows
  Synology NAS: synology
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: shokax

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: 'git@github.com:....'
  branch: 'main'
  message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

markdown:
  render: # 渲染器設定
    html: false # 過濾 HTML 標籤
    xhtmlOut: true # 使用 '/' 來閉合單標籤 (比如 <br />)。
    breaks: true # 轉換段落裡的 '\n' 到 <br>。
    linkify: true # 將類似 URL 的文字自動轉換為連結。
    typographer:
    quotes: "“”‘’"
  plugins: # markdown-it 外掛設定
    - plugin:
        name: markdown-it-toc-and-anchor
        enable: true
        options: # 文章目錄以及錨點應用的 class 名稱,shoka 系主題必須設定成這樣
          tocClassName: "toc"
          anchorClassName: "anchor"
    - plugin:
        name: markdown-it-multimd-table
        enable: true
        options:
          multiline: true
          rowspan: true
          headerless: true
    - plugin:
        name: ./markdown-it-furigana
        enable: true
        options:
          fallbackParens: "()"
    - plugin:
        name: ./markdown-it-spoiler
        enable: true
        options:
          title: "你知道得太多了"

autoprefixer:
  exclude:
    - "*.min.css"

minify:
  js:
    enable: true # ShokaX 自帶 esbuild 最佳化,不建議開啟,其他主題建議開啟
    exclude: # 排除文件,接受 string[],需符合 micromatch 格式
  css:
    enable: true # 開啟 CSS 最佳化
    options:
      targets: ">= 0.5%" # browserslist 格式的 target
    exclude: # 排除文件,接受 string[],需符合 micromatch 格式
      - '**/*.min.css'
  html:
    minifier: html-minifier
    enable: true # 開啟 HTML 最佳化
    options:
      comments: false # 是否保留註釋內容
    exclude: # 排除文件,接受 string[],需符合 micromatch 格式
      - '**/json.ejs'
      - '**/atom.ejs'
      - '**/rss.ejs'
  image:
    enable: true # 開啟圖片預處理和自動 WebP 化
    options:
      avif: false
      webp: true # 預留組態項,現版本無作用
      quality: 80 # 質量,支援1-100的整數、lossless或nearLossless
      effort: 2 # CPU 工作量,0-6之間的整數(越低越快)
      replaceSrc: true # 自動替換生成html中的本地圖片連結為webp連結
      # 我們更建議使用 Service Worker 來在使用者側實現 replaceSrc 的功能,這將能夠以一種侵入式更小的方式實現連結替換
    exclude:

feed:
  limit: 20
  order_by: "-date"
  tag_dir: false
  category_dir: false
  rss:
    enable: true
    template: "themes/shokaX/layout/_alternate/rss.ejs"
    output: "rss.xml"
  atom:
    enable: true
    template: "themes/shokaX/layout/_alternate/atom.ejs"
    output: "atom.xml"
  jsonFeed:
    enable: true
    template: "themes/shokaX/layout/_alternate/json.ejs"
    output: "feed.json"

algolia:
  appId: 
  apiKey: 
  adminApiKey: 
  chunkSize: 5000
  indexName: blog
  fields:
    - title #必須組態
    - path #必須組態
    - categories #推薦組態
    - content:strip:truncate,0,2000
    - gallery
    - photos
    - tags

sitemap:
  path: sitemap.xml

nofollow:
  enable: true
  field: site
  exclude: # 不加上 nofollow 的連結放在這邊

_config.shokaX.yml

alternate:

# 靜態資源
statics: "/" # 靜態文件根目錄,可用於 CDN 加速
assets: "assets" # 圖片資源存放目錄
css: "css" # css 存放目錄 (不建議改動)
js: "js" # js 存放目錄 (不建議改動)

# 自訂網站圖片

# 側邊欄
sidebar:
  # Sidebar Position.
  position: right
  # position: right
  # Replace the default avatar image under <root>/source/_data/assets/ and set the url here.
  avatar: avatar.jpg

darkmode: false

styles:
  postprocess: true # 啟用後處理器
  modules:
    mermaid: false

auto_scroll: false

loader:
  start: false # When entering the page
  switch: false # When switching to another page

pangu: false

fireworks:
  enable: true
  color:
    - "rgba(255,182,185,.9)"
    - "rgba(250,227,217,.9)"
    - "rgba(187,222,214,.9)"
    - "rgba(138,198,209,.9)"

font:
  enable: true
  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

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

  # Font settings for alternate title.
  logo:
    external: true
    family: Fredericka the Great
    size: 3.5

  # Font settings for site title.
  title:
    external: true
    family: Noto Serif JP
    size: 2.5

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts.
  posts:
    external: true
    family:

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

menu:
  home: / || home
  about: /about/ || user
  posts:
    default: / || feather
    # archives: /archives/ || list-alt
    categories: /categories/ || th
    tags: /tags/ || tags

social:
  github: ... || github || "#191717"
  #google: https://plus.google.com/yourname || google
  twitter: ... || twitter || "#00aff0"
  #zhihu: https://www.zhihu.com/people/yourname || zhihu || "#1e88e5"
  #music: https://music.163.com/#/user/home?id=yourid || cloud-music || "#e60026"
  #weibo: https://weibo.com/yourname || weibo || "#ea716e"
  #about: https://about.me/yourname || address-card || "#3b5998"
  #email: mailto:yourname@mail.com || envelope || "#55acd5"
  #facebook: https://www.facebook.com/yourname || facebook
  #stackoverflow: https://stackoverflow.com/yourname || stack-overflow
  youtube: ... || youtube
  #instagram: https://instagram.com/yourname || instagram
  #skype: skype:yourname?call|chat || skype
  #douban: https://www.douban.com/people/yourname/ || douban

widgets:
  # if true, will show random posts
  random_posts: true
  # if true, will show recent comments
  recent_comments: true

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2010
  icon:
    name: sakura rotate
    # Change the color of icon, using Hex Code.
    color: "#ffc0cb"
  # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
  count: false
  powered: true

post:
  # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
  count: false

# Reward (Donate)
reward:
  # If true, reward will be displayed in every article by default.
  enable: true
  account:
    綠界科技: /ecpay.png
    wechatpay:
    alipay:
    paypal:

# TagCloud settings for tags page.
tagcloud:
  # All values below are same as default, change them by yourself.
  min: 16 # Minimun font size in px
  max: 22 # Maxium font size in px
  start: "#72cecf" # Start color (hex, rgba, hsla or color keywords)
  end: "#ffbac3" # End color (hex, rgba, hsla or color keywords)
  amount: 200 # Amount of tags, change it if you have more than 200 tags

iconfont: "4415496_59g1326wajd"
D-Sketon commented 7 months ago

有些奇怪,请问其他文章也会大量报404错误吗?我这里使用给的配置仍然无法复现,

ThanatosDi commented 7 months ago

目前測試的結果是

可是還是沒辦法正常顯示 note block 😭

FidStyle commented 7 months ago

重新SXC试试呢,或者再新创一个环境 换用npm安装:

npm -g install hexo-cli
hexo init
npm -g install shokax-cli
SXC install shokaX -pm npm # 尝试指定npm。

复制原配置到新环境即可,以排除依赖问题

ThanatosDi commented 7 months ago

重新 SXC 試試呢,或者再新創一個環境 換用 npm 安裝:

npm -g install hexo-cli
hexo init
npm -g install shokax-cli
SXC install shokaX -pm npm # 嘗試指定npm。

複製原組態到新環境即可,以排除依賴問題

開新環境執行該內容後就正常顯示了