word目录链接无法跳转_怎样跳转网页

word目录链接无法跳转_怎样跳转网页概述目前使用的next版本是5.1.4,文章左侧的目录一直不能跳转也不能展开,按网上的办法一直没法解决,今天自己琢磨了一阵总算搞定了。由于发现遇到这个问题的人不少,特此总结一下。一般分为

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

概述

目前使用的 next 版本是 5.1.4 ,文章左侧的目录一直不能跳转也不能展开,按网上的办法一直没法解决,今天自己琢磨了一阵总算搞定了。

由于发现遇到这个问题的人不少,特此总结一下。

一般分为两种情况:渲染错误和超链接乱码。

一、渲染错误

1.问题描述

最典型的特征就是目录上的超链接为 undefined,或者点击的时候报错: Cannot read property 'replace' of null

前一情况 GitHub 中已有相应的 Issues:根据 markdown 生成的 TOC 锚点的内容是 undefined

这个情况一般是 markdown-it 渲染出错,渲染时候把应该加在标题的锚点加到了标题内的 sapn 标签里,导致生成目录的时候获取不到对应的锚点。

比如原本 ##一级标题 应该是渲染成 <h2 id="一级标题">一级标题</h2>,然后生成目录的时候扫描所有 h2 标签获取 id 作为链接,但是实际上 marked-it 渲染出来的是这样的: <h2><span id="一级标题">一级标题</span></h2>

2.解决方案

方案一:调整渲染引擎

最直白的解决方案就是更换渲染引擎。

如果一定要使用 markdown-it 的话,可以为 markdown-it 安装 markdown-it-named-headings插件。具体的过程可以参考 markdown-it的 Issues:Cannot render headings with ids?

方案二:修改代码

如果安装插件仍然不行,那就只能手动更改目录渲染的 js 代码,具体过程可以参考这个大佬的:Hexo 博客踩坑

二、超链接乱码

1.问题描述

这个问题的特征是渲染没问题,也就是不会有上面那种情况,但是点击目录链接会在控制台报错:Cannot read property 'top' of undefined

我们打开控制台,查看目录的的超链接标签,会看到 href 是一串乱码:

image-20201217163920205

我们去找他对应的标题:

image-20201217164207627

实际上直接点击这个超链接是可以跳转的,但是点目录却不行。这是因为标题 id 是中文,但是目录的连接是中文乱码,代码里头的 JQuery 选择器拿着乱码是没法找到对应 id 的标题的。

2.解决方案

这个错误很明显,因为控制台已经告诉我错误代码在 post-details.js里了,顺着提示找到 themes\next\source\js\src\post-details.js,找到第 73 行为目录绑定点击事件的方法,会看到:

image-20201217170155109

targetSelector就是对应标题的 id,我们在他被塞到选择器之前重新编码一下:

// 对获取到的url进行重编码
targetSelector = decodeURI(this.getAttribute('href'))

然后 hexo clean && hexo g && hexo s 重新跑一下,发现目录就正常了。

另外,在next6 里这个问题被修复了:点击文章中文目录跳转无法实现 #1547

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170773.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • jni 头文件_java.io.file

    jni 头文件_java.io.file1,cmd切换到应用工程目录下如示例中的D:\zxy\IDCardQualityLib2,执行javah命令,红色部分为sdk平台android.jar路径,蓝色部分为生成的jni类名 D:\zxy\IDCardQualityLib>javah-classpath bin/classes;d:\tool\adt-bundle-windows-x86-20131030\adt-b

  • vue(15)vue-cli介绍与安装「建议收藏」

    vue(15)vue-cli介绍与安装「建议收藏」前言vue-cli是和vue进行深度组合的工具,可以快速帮我们创建vue项目,并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目,都是用vue-cli来创建项目的。vue-cli介绍

  • idea下载及汉化

    idea下载及汉化安装软件和汉化插件下载地址 链接:https://pan.baidu.com/s/1ftvTcFvx0ett7IQhU7Hltg 提取码:b43t 复制这段内容后打开百度网盘手机App,操作更方便哦 现在安装idea–>基本大家都会 汉化: 不是很建议使用汉化版本的.但是原界面对新手不是很友好,也有人说汉化后的界面有的按钮会报错,算了..开始正题吧 先把汉化文件夹…

  • 数学函数图像处理_matlab基本图像处理

    数学函数图像处理_matlab基本图像处理文章目录1.imdilate2.imresize3.imfinfo4.imcomplement总结1.imdilate功能:进行膨胀操作介绍用法:IM2=imdilate(IM,SE)对灰度图像或二值图像IM进行膨胀操作,返回结果图像IM2。SE为由strel函数生成的结构元素对象。IM2=imdilate(IM,NHOOD)对灰度图像或二值图像IM进行膨胀操作,返回结果图像IM2。参量NHOOD是一个由O和1组成的矩阵,指定邻域。IM2=imdilate(…,SHAPE)对图

  • java integer最大值_java int型最大值/最小值,最大值+1,最小值-1

    java integer最大值_java int型最大值/最小值,最大值+1,最小值-1java中,int型变量是有符号整形变量。int型变量占用4个字节(32bit位)。int型变量采用补码形式来表示数值。对于一个二进制数,正数的补码是其本身,负数的补码是所有二进制位取反再加一。int变量中,第一位是符号位(0表示正数,1表示负数)。我们下面来实际分析int型中正数和负数是怎么表示的。5数字为正数,第一位符号为是0,正数5的二进制码是000000000000101,补码还是…

  • eWebEditor漏洞[通俗易懂]

    eWebEditor漏洞[通俗易懂]各位站长在使用eWebEditor的时候是否发现,eWebEditor配置不当会使其成为网站中的隐形炸弹呢?第一次发现这漏洞源于去年的一次入侵,在山穷水尽的时候发现了eWebEditor,于是很简单就

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号