Yue-plus / hexo-theme-arknights

明日方舟罗德岛阵营的 Hexo 主题,支持数学公式、Valine&Gitalk&Waline评论系统、Mermaid图表
https://arknights.theme.hexo.yue.zone/
MIT License
658 stars 71 forks source link

仍然没有代码块折叠 #85

Closed TTsdzb closed 1 year ago

TTsdzb commented 1 year ago

如题,虽然是最新版本,但是现在代码块还是这样的:
代码块截图

另外浏览器控制台会报两个错误:
控制台报错
一旦报这个错,跟着鼠标走的圈圈和左侧栏折叠之类的靠 js 的功能也就一起失效了。我看了一下好像你那里(https://ark.theme.yueplus.ink/)也会报这个错。只有有代码块的文章会报错

package.json

{
  "name": "ttsdzb-hexo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.2.0"
  },
  "dependencies": {
    "hexo": "^6.0.0",
    "hexo-blog-encrypt": "^3.1.6",
    "hexo-browsersync": "^0.3.0",
    "hexo-filter-mathjax": "^0.8.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-searchdb": "^1.4.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^5.0.0",
    "hexo-renderer-pug": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^0.0.3"
  }
}

_config.yml

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

# Site
title: 'TTsdzb'
subtitle: 'blog'
description: '一些笔记或是知识分享。'
keywords:
author: Dr.TTsdzb
language: zh
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://blog.ttsdzb.monster
permalink: :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
auto_spacing: true
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: true
marked:
  prependRoot: true
  postAsset: true
relative_link: true
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: true
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: arknights

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

# Search
search:
  enable: true
  preload: true # 非必要
  path: search.json # 非必要,缩小文件用
  format: striptags # 非必要,缩小文件用(该选项能极大缩小搜索数据文件大小,建议开启)

# Mathjax
mathjax:
  tags: none # 或 'ams' 或 'all'
  single_dollars: true # 启用单个美元符号作为内联(行内)数学公式定界符
  cjk_width: 0.9 # 相对 CJK 字符宽度
  normal_width: 0.6 # 相对正常(等宽)宽度
  append_css: true # 将 CSS 添加到每个页面
  every_page: false # 如果为 true,那么无论每篇文章的前题中的 `mathjax` 设置如何,每页都将由 mathjax 呈现

_config.arknights.yml

# html lang
language: zh

# canvas 动态背景
canvas_dust: false

# <body> 背景图片链接
background_image: https://ak.hypergryph.com/assets/index/images/ak/pc/bk.jpg # /img/bg.jpg

# 侧边栏
aside:
  in_left: false # 侧边栏在左 true / false
  logo: https://ak.hypergryph.com/assets/index/images/ak/pc/faction/1.png # 图片链接,建议 1:1 比例
  dr: / # 侧边栏 Dr. 链接
  copyright: # 版权声明、备案号等,可自定义键值,不想显示则留空

# post 文章页面配置;true / false
post:
  date: true # 是否显示发布日期
  updated: true # 是否显示修改日期
  source: false # 是否显示源文件路径
  word_count: false # 是否显示字数统计
  reading_time: false # 是否显示预计阅读时长
  excerpt: false # 是否在文章中显示摘要内容(<!-- more--> 以上的内容)
  reward: false # 文章末显示打赏二维码
# 文章内目录
toc:
  list_number: true # true / false ;是否显示编号
  max_depth: 6 # 最大目录深度
  min_depth: 1 # 最小目录深度
# 归档页;true / false
archives:
  categories_count: true # 是否显示分类总数
  tags_count: true # 是否显示标签总数

# 搜索框
search:
  enable: true

# Valine 无后端评论系统
valine:
  enable: false
  app_id: # APP ID
  app_key: # APP KEY
  server_url: # APP DOMAIN(LeanCloud 国际版)

gitalk:
  enable: false
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  repo: # GitHub repository
  owner: # GitHub repository owner
  admin: [] # GitHub repository owner and collaborators (Users who having write access to this repository)
            # Example: [adminA,adminB]
  id: # (optional) The unique id of the page
      # Example: location.pathname

# 图表支持
mermaid:
  enable: false
  version: '8.13.5'

# pjax 支持 —— 实验性测试阶段,请谨慎开启
pjax:
  enable: false
  version: '0.2.8'

mathjax:
  enabled: false

# main menu navigation
menu:
  Home: ''
#  Contact: contact/
  Archives: archives/
  About: about/

# stylesheets loaded in the <head>
stylesheets:
- //unpkg.com/@highlightjs/cdn-assets@11.4.0/styles/atom-one-dark-reasonable.min.css

# scripts loaded in the end of the body
scripts:
- //unpkg.com/@highlightjs/cdn-assets@11.4.0/highlight.min.js
ToUNVRSe commented 1 year ago

请您执行 hexo clean

hexo 不会监听 script 中的变化,而新版折叠的 DOM 修改被放入了 script 中。

TTsdzb commented 1 year ago

请您执行 hexo clean

hexo 不会监听 script 中的变化,而新版折叠的 DOM 修改被放入了 script 中。

这个试过了,没有影响。
我推测应该跟那个报错有关,script 在尝试修改 DOM 时遇到错误终止了,这也能解释为什么菜单之类的也用不了。

ToUNVRSe commented 1 year ago

所以是 hexo g 的时候就报错了?

TTsdzb commented 1 year ago

所以是 hexo g 的时候就报错了?

不是,是访问的时候报错,在 DevTools 控制台。
hexo serve 然后随便访问一个有代码块的文章就报这个错。
貌似部署了也会报。

ToUNVRSe commented 1 year ago

我分析一下,后端没问题, 但是前端寄了, 这说明后端根本没 work 阿西,不懂

TTsdzb commented 1 year ago

我刚看了一下报错是 getElement 找不到 .code-copy 元素
(虽然但是还是不知道为什么会没有这个元素 o_o ....

ToUNVRSe commented 1 year ago

前端报的错误根本没用,问题出在后端没有 work

ToUNVRSe commented 1 year ago

您可以试试在 themes\arknights\scripts\filters\codes.js 的第 24 行下添加点东西:

function doAsCode(item) {
  console.log("!")
  // ......
}

执行 hexo cl && hexo g 看是否有输出

TTsdzb commented 1 year ago

是有输出的

TTsdzb commented 1 year ago

您可以试试在 themes\arknights\scripts\filters\codes.js 的第 24 行下添加点东西:

function doAsCode(item) {
  console.log("!")
  // ......
}

执行 hexo cl && hexo g 看是否有输出

这个函数本身应该没问题,我试了在生成的页面里手动替换是有折叠的

TTsdzb commented 1 year ago
hexo.extend.filter.register('after_post_render', data => {
  const mermaid = hexo.theme.config.mermaid.enable
  let codeBlocks = data.content.match(
    mermaid?
      /<figure[\S\s]*?highlight[\S\s]*?\/figure>/g:
      /<figure[\S\s]*?highlight(?! mermaid)[\S\s]*?\/figure>/g);
  if (codeBlocks !== null) {
    let processed = Array.from(codeBlocks, item => {
      if (item.match('.mermaid') !== null) {
        return doAsMermaid(item);
      } else {
        return doAsCode(item);
      }
    })
    for (let i in processed) {
      data.content = data.content.replace(codeBlocks[i], processed[i])
    }
    console.log(data.content);  // 此处可以看出替换成功了
  }
});

可能是这里的问题,替换了以后替换完的 data 没返回上层

ToUNVRSe commented 1 year ago

我去查了 hexo 文档,

草真的要返回

鉴定为 JS 特性 我这边不返回没事…… /kk

TTsdzb commented 1 year ago

我照着文档加了返回,但是还是不行……

hexo.extend.filter.register('after_post_render', data => {
  const mermaid = hexo.theme.config.mermaid.enable
  let codeBlocks = data.content.match(
    mermaid?
      /<figure[\S\s]*?highlight[\S\s]*?\/figure>/g:
      /<figure[\S\s]*?highlight(?! mermaid)[\S\s]*?\/figure>/g);
  if (codeBlocks !== null) {
    let processed = Array.from(codeBlocks, item => {
      if (item.match('.mermaid') !== null) {
        return doAsMermaid(item);
      } else {
        return doAsCode(item);
      }
    })
    for (let i in processed) {
      data.content = data.content.replace(codeBlocks[i], processed[i])
    }
+    return data;
  }
});

可能别的哪里还有问题……

TTsdzb commented 1 year ago

调好了…优先级要设为 9 否则就不生效