为你的博客添加目录索引

SwordFly 发布于2019-08-26 12:18 / 2134人阅读

摘要：我采用了遍历树，然后找到文章的标签暂时只对标签建立索引，为其添加的方式建立索引。初始化文章锚点和目录数据结构找到属于文章内容的标签添加标签文本内容记录当前标签的偏移量，方便后面计算滚动距离。

一、前言 演示图例

需求

这个目录索引应该包含以下功能：

点击目录项跳转到对应锚点

屏幕滚动时，对应目录项样式变化

话不多说，开始干！

二、点击目录项跳转到对应锚点 hash模式的路由下的锚点

说到文章的目录索引，首先想到的就是锚点了。然而在hash模式的路由下，如果使用原始的锚点方案会造成下面这样的问题。

// 文章url链接,hash模式下
www.rychou.xyz/#/article/70 

// 如果采用传统的锚点方式，比如有个锚点：anchor-1，点击之后，url会变成

www.rychou.xyz/#anchor-1

很明显，在hash模式下，就不能采用这种方式锚点了。我采用了自定义锚点的方式。

参考：vue2.0中怎么做锚点定位

添加锚点和初始化目录的数据结构

方法有了，然后就是怎么给文章加添加锚点了。

我采用了遍历dom树，然后找到文章的h1标签（暂时只对h1标签建立索引），为其添加id的方式建立索引。

// 初始化文章锚点和目录数据结构
getDirectories() {
      let directories = document.querySelectorAll(".article-content h1"); //找到属于文章内容的h1标签
      directories.forEach((element, index) => {
        element.id = "anchor-" + index;//添加id
        this.directories.push({
          title: element.innerText, //h1标签文本内容
          offsetTop: element.offsetTop, //记录当前h1标签的偏移量，方便后面计算滚动距离。
          isActive: false //是否被选中
        });
      });

实现点击跳转到对应锚点


   
     {{item.title}}
   



methods:{
  goAnchor(index) {
      document.documentElement.scrollTop = this.directories[index].offsetTop;
    },
}

三、屏幕滚动时，对应目录项样式变化

注意我们前面初始化目录数据结构中，包含了一个叫isActive的状态位，就是根据这个状态位来进行相应的渲染

动态绑定class


    
      目录
      
        
          {{item.title}}

添加滚动监听

// 挂载页面时，添加滚动监听
mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
// 退出页面时，应该取消监听
destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
},

计算状态位isActive

handleScroll(e) {
      let scrollTop = document.documentElement.scrollTop //当前滚动距离
      this.directories.forEach((element,index)=>{
        if((scrollTop)>=element.offsetTop){//当前滚动距离大于某一目录项时。
          for(let i=0;i
css样式
// scss
.directories-container {
  width: 15vw;
  transition: all 0.5s;
  margin-left: 10px;
  .highlight-title {
    border-left: 3px solid rgb(15, 105, 223);
    background-color: rgb(243, 243, 243);
    z-index: -1;
    a{
      color: rgb(15, 105, 223)
    }
  }
  .directories-list {
    position: -webkit-sticky;
    position: sticky; 
    top: 0;
    word-wrap: break-word;
    background-color: #fff;
    border-left: 1px solid rgb(236, 236, 236);
    z-index: 999;
    a {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
原文链接： 为你的博客添加目录索引

欢迎关注公众号：开源学院

GPU云服务器云服务器目录索引显示目录索引 python添加索引 php 添加目录权限

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108439.html

为你的站点插上ElasticSearch的翅膀

摘要：下载并安装目前的最新稳定版为，如果之后版本有升级，请将相应的版本号替换掉上面的。在实现的过程中，貌似对中文的支持不是那么好，所以接下来会尝试使用一下中文分词器来看看效果，顺利的话会再出一篇文章。原文来自：https://jellybool.com/post/setup-slasticsearch-on-your-website 在我的博客按Shift+S就可以呼出搜索框，可...

JouyPub 2019-06-27 11:23 评论0 收藏0
为你的博客添加搜索功能吧!

摘要：提供个人博客文章搜索服务只需要配置个人博客地址载入博客数据开启服务即可开启文章搜索服务。对配置文件监控修改后服务及时地更新博客数据。 Search-Spider-Blog 提供个人博客文章搜索服务, 只需要配置个人博客地址, 载入博客数据, 开启Server服务, 即可开启文章搜索服务。对blogconfig.json配置文件监控, 修改后服务及时地更新博客数据。本人用的为Hexo...

vboy1010 2019-08-22 10:35 评论0 收藏0
为你的文章生成目录索引

摘要：使用可以快速为你的页面生成目录的结构，拥有较强的可定制性，并且并不会擅自为你做太多的事情，以便你更容易地把应用到你的项目中。引言为页面中的标题元素建立目录索引，这是一个不起眼却很实用的功能，特别是对于那些含有篇幅很长的文章的页面，拥有一个目录可以让读者对文章的结构一目了然，更重要的是，读者可以很轻松地在文章的各个章节之间来回快速跳转，极大地提高了用户体验。 toc.js 使用 to...

魏宪会 2019-08-22 15:10 评论0 收藏0
现代后端开发者必备技能-2018版

摘要：现在开始创建一个包并分发给其他人使用，并确保遵循你迄今为止学到的标准和最佳实践。第步实践对于练习，继续编写单元测试，以完成目前为止所做的实际任务，特别是你在步骤中所做的练习。今天的Web开发与几年前完全不同，有很多不同的东西可以很容易地阻止任何人进入Web开发。这是我们决定制作这些循序渐进的视觉指南的原因之一，这些指南展示了更大的图景，并让任何人清楚了解他们在网页开发中扮演的角色。 ...

eternalshallow 2019-07-01 12:27 评论0 收藏0