theme-shoka-x / hexo-theme-shokaX

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

页面查看大图渲染错位、文章标题H1\2\3未渲染 #145

Closed yuan-uyume closed 1 year ago

yuan-uyume commented 1 year ago

在开始之前......

问题发生位置

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

问题描述

  1. 查看大图渲染错位 image image

  2. 文章标题未渲染,是否为配置不当 正常效果 image 我的效果 image

复现步骤

No response

相关配置

win11

Chrome 已是最新版本 版本 116.0.5845.111(正式版本) (64 位)

image

package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "esbuild": "^0.19.2",
    "hexo": "^6.3.0",
    "hexo-algoliasearch": "^1.0.0",
    "hexo-autoprefixer": "^2.0.0",
    "hexo-deployer-git": "^4.0.0",
    "hexo-feed": "^1.1.1",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-multi-next-markdown-it": "^0.1.9",
    "hexo-renderer-pug": "^3.0.0",
    "hexo-renderer-stylus": "^3.0.0",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^1.0.0",
    "hexo-theme-shokax": "^0.3.5",
    "lozad": "^1.16.0",
    "theme-shokax-anime": "^0.0.4",
    "theme-shokax-pjax": "^0.0.2"
  }
}

_config.shoka.yml

darkmode: true
auto_scroll: true
experiments:
  optimizeLongPosts: false

alternate: 'Yuan u Yume'
# title: uyume的记录本
# subtitle: '没有记录的记录本'
# description: '记录想法和闲言碎语'
# keywords:
# author: uyume
# language: zh-CN
# timezone: 'Asia/Shanghai'

category_map:
  指北: zhibei

categories:
- [指北]

sidebar:
  position: right
  avatar: avatar.jpg

widgets: 
  random_posts: true  # 随机文章
  recent_comments: false  # 显示最近评论

# 页尾全站统计
footer:
  since: 2023  # 开始时间
  count: true  # 开启
# 文章界面统计
post:
  count: true   # 开启

performance:
  # 使用preconnect预加载的网址(不建议超过三个)
  preConnect:
    - "https://lf9-cdn-tos.bytecdntp.com"
  # 使用dns-prefetch预解析的网址
  dnsPrefetch:
    - "https://cdn.jsdelivr.net"
    - "https://unpkg.com"

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:
  html:
    enable: true
    exclude: # 排除 hexo-feed 用到的模板文件
      - '**/json.ejs'
      - '**/atom.ejs'
      - '**/rss.ejs'
  css:
    enable: true
    exclude:
      - '**/*.min.css'
  js:
    enable: true
    mangle:
      toplevel: true #如果js压缩错误请删除此行
    output:
    compress:
      ecma: 2018
    exclude:
      - '**/*.min.js'

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

_config.yml

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

# Site
title: uyume的记录本
subtitle: '没有记录的记录本'
description: '记录想法和闲言碎语'
keywords:
author: uyume
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: http://yuan-uyume.github.io
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
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  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: shokax

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: 
  branch: master

algolia:
  appId: 
  apiKey: 
  adminApiKey: 
  chunkSize: 5000
  indexName: uyume
  fields:
    - title
    - path
    - categories
    - content:strip:truncate,0,2000
    - gallery
    - photos
    - tags

注意事项

zkz098 commented 1 year ago

image 您用的是shoka还是ShokaX,配置文件名称是打错了还是确实是错的

zkz098 commented 1 year ago

图片错位和 #13 可能是一个情况,确认控制台没有网络报错吗 我看你网站没问题,应该是你的网络问题

zkz098 commented 1 year ago

H1不显示这个需要排查,是特性还是Bug暂不确定

yuan-uyume commented 1 year ago

image 您用的是shoka还是ShokaX,配置文件名称是打错了还是确实是错的

这个是打错了 image

yuan-uyume commented 1 year ago

图片错位和 #13 可能是一个情况,确认控制台没有网络报错吗 我看你网站没问题,应该是你的网络问题

是的。厉害啊。一下就发现了问题所在。 image 应该是这个css未加载导致的问题 谢谢你的解答

yuan-uyume commented 1 year ago

图片错位和 #13 可能是一个情况,确认控制台没有网络报错吗 我看你网站没问题,应该是你的网络问题

通过将加载失败css直接本地导入,恢复正常。确认为网络问题css未加载导致问题。再次感谢你的帮助

zkz098 commented 1 year ago

image image 根据配置文件可以判断,你把 https://docs.kaitaku.xyz/guide/config.html 的内容放在了_config.shokax.yml中,应放在_config.yml中