TinyMCE主题的文章目录没法点击页内跳转

我想改一下reacg这个粉嫩博客的配置:TinyMCE主题的文章目录没法点击页内跳转。
小菜鸟,思路:去学习BNDong大神

怀疑是这两个和文章目录有关

Cnblogs-Theme-SimpleMemory/src/script/marvin.nav2.js /

$(document).ready(function () {
    var b = $('body'),
        c = 'cnblogs_post_body',
        d = 'sideToolbar',
        e = 'sideCatalog',
        f = 'sideCatalog-catalog',
        g = 'sideCatalogBtn',
        h = 'sideToolbar-up',
        i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:230px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',
        j = '',
        k = 200,
        l = 0,
        m = 0,
        n = 0,
        o, p = 18,
        q = true,
        r = false,
        s = $('#' + c);

    if (s.length === 0) { return };
    b.append(i);

    o = s.find(':header');

    o.each(function () {
        var u = $(this),
            v = u[0];
        if ($.inArray((v.tagName.toLowerCase()), ["h1", "h2"]) === -1) return true;

        var lserialNum   = u.find('.dev__fe').text(),
            rserialNum   = u.find('.dev__ux').text(),
            titleContent = u.find('.dev__developer').text(),
            titleId      = u.attr('id');

        if (!titleId) {
            titleId = (new myTools).randomString(8);
            u.attr('id', titleId);
        }

        if (v.localName === 'h1') {
            l++; m = 0; r = true;
            if(titleContent.length>26) titleContent=titleContent.substr(0,26) + "...";
            titleContent = HTMLEncode(titleContent);

            j += '<li h="1" g="'+ lserialNum +'"><a href="#' + titleId + '">' + lserialNum + '.' + rserialNum + '&nbsp;&nbsp;' + titleContent + '</a><span class="sideCatalog-dot"></span></li>';
        } else if (r && v.localName === 'h2') {
            m++; n = 0;
            if(q){

                if(titleContent.length>30) titleContent = titleContent.substr(0,30) + "...";
                titleContent = HTMLEncode(titleContent);

                j += '<li h="2" g="'+ lserialNum +'" class="h2Offset ceg'+lserialNum+'"><a href="#' + titleId + '">' + lserialNum + '.' + rserialNum + '&nbsp;&nbsp;' + titleContent + '</a></li>';
            }
        }
    });

    /**
     * @return {string}
     */
    function HTMLEncode(html) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }

    $('#' + f + '>ul').html(j);
    b.data('spy', 'scroll');
    b.data('target', '.sideCatalogBg');

    b.scrollspy({
        target: '.sideCatalogBg'
    });
    $sideCatelog = $('#' + e);

    $('#' + g).on('click', function () {
        if ($(this).hasClass('sideCatalogBtnDisable') && $sideCatelog.css('visibility') === 'visible') {
            $sideCatelog.css('visibility', 'hidden');
            $(this).removeClass('sideCatalogBtnDisable');
        } else {
            $sideCatelog.css('visibility', 'visible');
            $(this).addClass('sideCatalogBtnDisable');
        }
    });

    $('#' + h).on('click', function () {
        $("html,body").animate({

在看代码的时候,还发现了BNdong大神设置了打赏,但是文档里却没有说,不知道为什么,我也没机会去尝试了

// 添加打赏
            if (window.cnblogsConfig.reward.enable && (window.cnblogsConfig.reward.alipay || window.cnblogsConfig.reward.wechatpay)) {
                var rightDashangHtml = '<div id="rightDashang" clickflg="false"><span class="rightMenuSpan rightDanshanSpan"><div class="ds-pay">' +
                    (window.cnblogsConfig.reward.alipay ? '<div class="ds-alipay"><img src="'+window.cnblogsConfig.reward.alipay+'"><span>Alipay</span></div>' : '') +
                    (window.cnblogsConfig.reward.wechatpay ? '<div class="ds-wecat"><img src="'+window.cnblogsConfig.reward.wechatpay+'"><span>WeChat</span></div>' : '') +
                    '</div></span><i class="iconfont icon-shang"></i></div>';
                rightMenu.prepend(rightDashangHtml);
                bndongJs.rightMenuMous('#rightDashang', '.rightDanshanSpan');
            }

DIV狂魔的目录设置代码

// 设置随笔目录
    setCatalog() {
      const options = this.defaultOptions.catalog
      if (!options.enable) return
      if (!this.hasPostTitle) return
      if (this.pageName !== 'post') return
      if (this.userAgent !== 'pc') return

      const $post = $($('#cnblogs_post_body'))
      const $catalogContainer = $('<div>')
      const $ulContainer = $('<ul>')
      const titleReg = /^h[1-3]$/

      $catalogContainer.attr('id', 'catalog').append($(`<div class='catListTitle'><h3>目录</h3></div>`))

      $post.children().each(function() {
        if (titleReg.test(this.tagName.toLowerCase())) {
          $(this).append("<a href='#catalog' class='title_back'></a>")
          let aEle = $('<a></a>')
          let hEle = $('<li></li>')
          const text = this.childNodes.length === 3 ? this.childNodes[1].nodeValue : this.childNodes[0].nodeValue
          aEle.attr('href', '#' + this.id).text(text)
          hEle.attr('class', this.nodeName.toLowerCase() + '-list').append(aEle)
          $ulContainer.append(hEle)
        }
      })

      $($catalogContainer.append($ulContainer)).appendTo('#sideBar')
      this.setCatalogPosition()
    }

原文地址:https://www.cnblogs.com/guoxinyu/p/12543842.html

时间: 2024-09-30 10:48:22

TinyMCE主题的文章目录没法点击页内跳转的相关文章

Hexo+yilia主题实现文章目录和添加视频

一.说明 也可以点击这里查看此文章 文章目录功能效果可以点击这里查看 视频页面效果可以点击这里查看 粗略实现,有问题可以在下方评论区留言,或者留言板留言 二.文章目录功能 1.添加CSS样式 打开themes\yilia\source下的main.234bc0.css文件,添加如下代码: css样式我也放到了github上:https://raw.githubusercontent.com/lawlite19/Blog-Back-Up/master/css/main.234bc0.css 使用的

vue+element 点击页面内跳转按钮 导航菜单选中

<template> <el-menu router theme="dark" :default-active="activeIndex" class="el-menu-demo" active-text-color="rgb(250,83,83)" mode="horizontal" @select="handleSelect" > <el-menu-it

github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)

使用的yilia主题之后,还需要进行自己的定制配置 1.图片的位置 比如打赏的支付宝二维码图片,是在当前博客的source/assets/img/下 (不是当前主题) 配置:(在yilia主题下文件里themes\yilia文件夹下的_config.yml) # 打赏基础设定:0-关闭打赏: 1-文章对应的md文件里有reward:true属性,才有打赏: 2-所有文章均有打赏 reward_type: 1 # 打赏wording reward_wording: '谢谢你请我吃糖果' # 支付宝

使用office添加文章目录

当我们用word录入完文章,文章里有段落,段落里又有小标题,每一种标题的格式不尽相同,word为我们提供了相当丰富的标题格式,如:正文,无间隔,标题1,标题2,标题3,标题4,副标题,强调,要点......我们在书写文章的时候可以将标题附上相应的格式以方便生成文章目录,一个有目录的文章显示更加有清晰的结构层次,美观又有条理.制作目录并不难,它只是将已有信息进行整理,关键还在于文章录入的时候要理清哪些做为标题,哪些个为副标题,子标题,这样在生成目录的时候便无须做任何修改即可完成.首先,点击"插入&

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

CSDN中根据文章自动生成文章目录

概述 CSDN中有根据文件内容中H标签在文章中自动生成文章目录,看起来比较专业,就想把它搬到自己的博客园中.类似下图 提取JS脚本 通过浏览器开发者工具(IE/Chrome)找到产生文章目录javascript脚本(我直接用IE开发工具中搜索相关字符串”系统根据文章中H1到H6标签自动生成文章目录”搜索到的), 并把其中文章内容ID修改成博客园的ID(#cnblogs_post_body) 产生脚本如下脚本如下: $(document).ready(function() { buildCTabl

ASP.NET文章目录导航

ASP.NET文章目录导航 ASP.NET-[读书笔记]-原创:ASP.Net状态管理读书笔记--思维导图 (2013-12-25 10:13) ASP.NET-[潜在危险]-从客户端中检测到有潜在危险的Request.Form值的解决方法 (2014-07-17 14:52) ASP.NET-[HTTP错误]-HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置 (2014-07-17 14:51) ASP.N

C#泛型专题系列文章目录导航

[C#泛型系列文章] 目录导航 第一部分:O'Reilly 出版的<C# Cookbook>泛型部分翻译 第一回:理解泛型 第二回:获取泛型类型和使用相应的泛型版本替换ArrayList 第三回:使用相应的泛型版本替换Stack和Queue 第四回:链表的实现和可空类型 第五回:反转SortedList里的内容 第六回:使用泛型创建只读集合及使用相应的泛型版本替换Hashtable 第七回:在泛型字典类中使用foreach及泛型约束 第八回:初始化泛型类型变量为它们的默认值 第二部分:O'Re

SQL Server系列文章目录

这里整理了我学习SQL Server的所有文章,包括从基础到高级的. 一,SQL Server数据类型 1,SQL Server中开发常用的数据类型 二,单表查询和多表查询   三,增,删,改   四,表和视图   五,存储过程   六,事务和并发   七,临时表   八,动态SQL   九,错误处理   十,SQL Server常用函数 SQL Server系列文章目录