資訊專欄INFORMATION COLUMN
摘要：我采用了遍歷樹，然后找到文章的標(biāo)簽暫時(shí)只對標(biāo)簽建立索引，為其添加的方式建立索引。初始化文章錨點(diǎn)和目錄數(shù)據(jù)結(jié)構(gòu)找到屬于文章內(nèi)容的標(biāo)簽添加標(biāo)簽文本內(nèi)容記錄當(dāng)前標(biāo)簽的偏移量，方便后面計(jì)算滾動(dòng)距離。
一、前言 演示圖例 需求
這個(gè)目錄索引應(yīng)該包含以下功能：
點(diǎn)擊目錄項(xiàng)跳轉(zhuǎn)到對應(yīng)錨點(diǎn)
屏幕滾動(dòng)時(shí)，對應(yīng)目錄項(xiàng)樣式變化
話不多說，開始干！
二、點(diǎn)擊目錄項(xiàng)跳轉(zhuǎn)到對應(yīng)錨點(diǎn) hash模式的路由下的錨點(diǎn)說到文章的目錄索引，首先想到的就是錨點(diǎn)了。然而在hash模式的路由下，如果使用原始的錨點(diǎn)方案會造成下面這樣的問題。
// 文章url鏈接,hash模式下 www.rychou.xyz/#/article/70 // 如果采用傳統(tǒng)的錨點(diǎn)方式，比如有個(gè)錨點(diǎn)：anchor-1，點(diǎn)擊之后，url會變成 www.rychou.xyz/#anchor-1
很明顯，在hash模式下，就不能采用這種方式錨點(diǎn)了。我采用了自定義錨點(diǎn)的方式。
參考：vue2.0中怎么做錨點(diǎn)定位添加錨點(diǎn)和初始化目錄的數(shù)據(jù)結(jié)構(gòu)
方法有了，然后就是怎么給文章加添加錨點(diǎn)了。
我采用了遍歷dom樹，然后找到文章的h1標(biāo)簽（暫時(shí)只對h1標(biāo)簽建立索引），為其添加id的方式建立索引。
// 初始化文章錨點(diǎn)和目錄數(shù)據(jù)結(jié)構(gòu)
getDirectories() {
let directories = document.querySelectorAll(".article-content h1"); //找到屬于文章內(nèi)容的h1標(biāo)簽
directories.forEach((element, index) => {
element.id = "anchor-" + index;//添加id
this.directories.push({
title: element.innerText, //h1標(biāo)簽文本內(nèi)容
offsetTop: element.offsetTop, //記錄當(dāng)前h1標(biāo)簽的偏移量，方便后面計(jì)算滾動(dòng)距離。
isActive: false //是否被選中
});
});
實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)到對應(yīng)錨點(diǎn)
methods:{ goAnchor(index) { document.documentElement.scrollTop = this.directories[index].offsetTop; }, }三、屏幕滾動(dòng)時(shí)，對應(yīng)目錄項(xiàng)樣式變化
注意我們前面初始化目錄數(shù)據(jù)結(jié)構(gòu)中，包含了一個(gè)叫isActive的狀態(tài)位，就是根據(jù)這個(gè)狀態(tài)位來進(jìn)行相應(yīng)的渲染
動(dòng)態(tài)綁定class添加滾動(dòng)監(jiān)聽
// 掛載頁面時(shí)，添加滾動(dòng)監(jiān)聽
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
// 退出頁面時(shí)，應(yīng)該取消監(jiān)聽
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
},
計(jì)算狀態(tài)位isActive
handleScroll(e) {
let scrollTop = document.documentElement.scrollTop //當(dāng)前滾動(dòng)距離
this.directories.forEach((element,index)=>{
if((scrollTop)>=element.offsetTop){//當(dāng)前滾動(dòng)距離大于某一目錄項(xiàng)時(shí)。
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;
}
}
}
}
原文鏈接： 為你的博客添加目錄索引
歡迎關(guān)注公眾號：開源學(xué)院
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108439.html
摘要：下載并安裝目前的最新穩(wěn)定版為，如果之后版本有升級，請將相應(yīng)的版本號替換掉上面的。在實(shí)現(xiàn)的過程中，貌似對中文的支持不是那么好，所以接下來會嘗試使用一下中文分詞器來看看效果，順利的話會再出一篇文章。 原文來自：https://jellybool.com/post/setup-slasticsearch-on-your-website 在我的博客按Shift+S就可以呼出搜索框，可...
摘要：提供個(gè)人博客文章搜索服務(wù)只需要配置個(gè)人博客地址載入博客數(shù)據(jù)開啟服務(wù)即可開啟文章搜索服務(wù)。對配置文件監(jiān)控修改后服務(wù)及時(shí)地更新博客數(shù)據(jù)。 Search-Spider-Blog 提供個(gè)人博客文章搜索服務(wù), 只需要配置個(gè)人博客地址, 載入博客數(shù)據(jù), 開啟Server服務(wù), 即可開啟文章搜索服務(wù)。 對blogconfig.json配置文件監(jiān)控, 修改后服務(wù)及時(shí)地更新博客數(shù)據(jù)。 本人用的為Hexo...
摘要：使用可以快速為你的頁面生成目錄的結(jié)構(gòu)，擁有較強(qiáng)的可定制性，并且并不會擅自為你做太多的事情，以便你更容易地把應(yīng)用到你的項(xiàng)目中。 引言 為頁面中的標(biāo)題元素建立目錄索引，這是一個(gè)不起眼卻很實(shí)用的功能，特別是對于那些含有篇幅很長的文章的頁面，擁有一個(gè)目錄可以讓讀者對文章的結(jié)構(gòu)一目了然，更重要的是，讀者可以很輕松地在文章的各個(gè)章節(jié)之間來回快速跳轉(zhuǎn)，極大地提高了用戶體驗(yàn)。 toc.js 使用 to...
摘要：現(xiàn)在開始創(chuàng)建一個(gè)包并分發(fā)給其他人使用，并確保遵循你迄今為止學(xué)到的標(biāo)準(zhǔn)和最佳實(shí)踐。第步實(shí)踐對于練習(xí)，繼續(xù)編寫單元測試，以完成目前為止所做的實(shí)際任務(wù)，特別是你在步驟中所做的練習(xí)。 今天的Web開發(fā)與幾年前完全不同，有很多不同的東西可以很容易地阻止任何人進(jìn)入Web開發(fā)。這是我們決定制作這些循序漸進(jìn)的視覺指南的原因之一，這些指南展示了更大的圖景，并讓任何人清楚了解他們在網(wǎng)頁開發(fā)中扮演的角色。 ...
閱讀 1593·2023-04-25 19:51
閱讀 1993·2019-08-30 15:55
閱讀 1860·2019-08-30 15:44
閱讀 2749·2019-08-30 13:58
閱讀 2754·2019-08-29 16:37
閱讀 1132·2019-08-29 15:34
閱讀 4108·2019-08-29 11:05
閱讀 2715·2019-08-28 17:51
