专注于ruanyifeng.com博客生成标题导航

针对阮大神的博客没有标题导航制作

// ==UserScript==
// @name			专注于ruanyifeng.com博客生成标题导航
// @version			1.0.0
// @description		针对阮大神的博客没有标题导航制作
// @author			@leo
// @match        *://www.ruanyifeng.com/blog/*
// @grant        GM_notification
// @grant        GM_addStyle
// @namespace https://greasyfork.org/users/810117
// ==/UserScript==

;(() => {
	// 样式注入
	GM_addStyle(`
	.myImportNav {
    position: fixed;
    top: 100px;
    right: 50px;
    width: 300px;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
.myImportNav .text {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}
`)

	window.onload = () => {
		// 查找页面中的所有标题
		const titles = document.querySelectorAll('#alpha-inner article h2')
		console.log(titles)
		// 遍历 titles 为每个 DOM 节点附加一个唯一id，并且将 title 的文字和 唯一id 输出到新数组
		const arr = Array.from(titles).map((item, index) => {
			item.id = `title-${index}`
			return { title: item.innerText, id: item.id }
		})
		console.log(arr)
		// 遍历 arr 在页面中注入悬浮在右上角的导航
		const nav = document.createElement('div')
		nav.className = 'myImportNav'
		arr.forEach((item, index) => {
			const a = document.createElement('a')
			a.className = 'text'
			a.href = `#${item.id}`
			a.innerText = `${index + 1}. ${item.title}`
			nav.appendChild(a)
		})
		document.body.appendChild(nav)
	}
})()