為你的博客添加目錄索引

SwordFly 發布于2019-08-26 12:18 / 2139人閱讀

摘要：我采用了遍歷樹，然后找到文章的標簽暫時只對標簽建立索引，為其添加的方式建立索引。初始化文章錨點和目錄數據結構找到屬于文章內容的標簽添加標簽文本內容記錄當前標簽的偏移量，方便后面計算滾動距離。

一、前言 演示圖例

需求

這個目錄索引應該包含以下功能：

點擊目錄項跳轉到對應錨點

屏幕滾動時，對應目錄項樣式變化

話不多說，開始干！

二、點擊目錄項跳轉到對應錨點 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 添加目錄權限

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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