Tampermonkey

Ts 教程优化脚本

此脚本用于将阮一峰大佬的TypeScript 教程网页进行基于个人习惯的部分样式优化。

version	description
1.0.0	将教程目录、章节目录固定至屏幕右侧，便于阅览及分屏查看（屏幕一边看文档，一边记笔记的习惯）。
1.1.0	提供了黑夜模式。

// ==UserScript==
// @name         Ts-阮一峰教程-目录优化、黑夜模式
// @namespace    http://tampermonkey.net/
// @version      1.1.0
// @description  try to take over the world!
// @author       zhiyu
// @match        https://wangdoc.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict'
    function setStyle(element, styleObj) {
        if (!element) return
        for (const [key, val] of Object.entries(styleObj)) {
            element.style[key] = val
        }
    }
    // 目录优化
    const menuCss = `
        .column.is-3.is-offset-1 {
            position: fixed;
            top: 90px;
            right: 300px;
            z-index: 100;
            max-width: 300px;
            background: #fff;
            padding: 0;
            border-radius: 0.75rem;
            overflow: hidden;
        }
        .panel-menu .panel-block {
            padding: 0;
            border-radius: var(--oe);
        }
        .panel-support {
            display: none;
        }
        .panel:not(:last-child) {
            margin-bottom: 0;
        }
        .panel-menu .menu {
            width: 300px !important;
            max-height: 630px;
            overflow-y: scroll;
            overscroll-behavior: contain;
        }
        .markdownIt-TOC {
            max-height: 545px;
            overflow-y: scroll;
            overscroll-behavior: contain;
        }
        .menu-list li a:hover {
            background: #27292B !important;
        }
        .panel-info {
            display: none;
        }
        .article-toc {
            position: fixed;
            top: 90px;
            right: 10px;
            max-width: 300px;
            z-index: 10000;
        }
    `
    const menuStyleTag = document.createElement('style')
    document.head.appendChild(menuStyleTag)
    menuStyleTag.innerHTML = menuCss
    const toggleTocSpan = document.createElement('span')
    toggleTocSpan.className = 'toggle-tocr'
    toggleTocSpan.innerHTML = '<a>隐藏教程目录</a>/'
    let colum
    setTimeout(() => {
        const tocElement = document.querySelector('.toc-controller')
        tocElement.parentNode.insertBefore(toggleTocSpan, tocElement)
        colum = document.querySelector('.column.is-3.is-offset-1')
        toggleTocSpan.addEventListener('click', toggleToc)
    }, 1000)
    function toggleToc() {
        if (colum.style.display === 'none') {
            colum.style.display = ''
            toggleTocSpan.innerHTML = `<a>隐藏教程目录</a>/`
        } else {
            colum.style.display = 'none'
            toggleTocSpan.innerHTML = `<a>显示教程目录</a>/`
        }
    }
    // 黑夜模式
    const darkModeCSS = `
        html, body, div, section, article, main, header, footer, nav, aside, form, input, textarea, button, select, option, table, th, td, ul, ol{
            --background: #232526;
            --codeBackground: #27292C;
            --title: #DFD9D2;
            background: var(--background) !important;
            color: #D0CAC0 !important;
            border-color: #555C5F !important;
        }
        img, video, iframe, canvas, svg {
            filter: brightness(0.8) !important;
        }
        li > a {
            background: #242728 !important;
        }
        h1, h2, h3 {
            color: var(--title) !important;
        }
        a {
            color: #7db4e6 !important;
        }
        input, textarea, select {
            background: var(--background) !important;
            border-color: #555 !important;
        }
        .input::placeholder {
            color: var(--title) !important;
        }
        code, pre {
            background: var(--codeBackground) !important;
        }
        .panel-heading {
            background: #061BBA !important;
            color: #fff !important;
        }
        .is-active {
            background: #27292C !important;
        }
        .post-body-inner > * {
            color: #fff !important;
        }
        nav {
            background: var(--codeBackground) !important;
        }
        nav > div {
            background: var(--codeBackground) !important;
        }
    `
    const darkStyleTag = document.createElement('style')
    document.head.appendChild(darkStyleTag)
    darkStyleTag.innerHTML = darkModeCSS
})();