通过脚本修改语雀文章的模板样式

wwwwwllllk

为什么写这个脚本

想看语雀的某个博主的文章，感觉其写的文章可以学到东西。但是模板的设置我很难读进去他的文章。所以就想让脚本来修改样式。因为他的文章统一了模板，所以基本满足他的所有文章。

博主的语雀: https://www.yuque.com/jiaqiuqiu/garden/gd7ucd8od6qovzmy （感兴趣可关注）

看下面的代码似乎很简单，但是写的过程其实踩了好多坑。

// 获取所有 ne-heading-content 元素
const neHeadingContents = document.querySelectorAll('ne-heading-content');

// 遍历每个 ne-heading-content 元素
neHeadingContents.forEach(neHeadingContent => {
  // 获取所有 ne-text 元素
  const neTextElements = neHeadingContent.querySelectorAll('ne-text');

  // 获取第二个 ne-text 元素
  const secondNeText = neTextElements[1];
// 删除第二个 ne-text 元素以及其样式
  if (secondNeText) {
    //secondNeText.remove();
    secondNeText.removeAttribute('class');
    secondNeText.removeAttribute('style');
  }
   console.log(neTextElements.length)
  if (neTextElements.length == 3 || neTextElements.length == 5) {
       // 遍历除第二个元素以外的所有元素，并将其从DOM中删除
  neHeadingContent.querySelectorAll(':not(:nth-child(2))').forEach(element => {
    element.remove();
  }  );

  } 
});

下面的部分代码是我去除他的一些字体样式的文章的记录

// 删除粉红色
var elements = document.querySelectorAll('[style*="background-color: rgb(255, 244, 244)"]');
for (var i = 0; i < elements.length; i++) {
  elements[i].removeAttribute('style');
}

steven026

单纯改样式的话用CSS控制样式效果要比JS控制样式效率高很多，甚至连具体逻辑都不用写，只用写选择器

wwwwwllllk

steven026 发表于 2023-6-7 21:57
单纯改样式的话用CSS控制样式效果要比JS控制样式效率高很多，甚至连具体逻辑都不用写，只用写选择器 ...

好像我这个脚本用css不太容易实现

wwwwwllllk

steven026 发表于 2023-6-7 21:57
单纯改样式的话用CSS控制样式效果要比JS控制样式效率高很多，甚至连具体逻辑都不用写，只用写选择器 ...

不过期待哥哥可以实现一下，我学习一下

steven026

本帖最后由 steven026 于 2023-6-7 22:23 编辑

// ==UserScript==
// @name         New Userscript
// @version      1.0
// @description  try to take over the world!
// @author       You
// @match        https://www.yuque.com/jiaqiuqiu/garden/gd7ucd8od6qovzmy
// @icon         https://www.google.com/s2/favicons?sz=64&domain=yuque.com
// @grant        none
// ==/UserScript==

const css = `
ne-heading-content > ne-text {
    color: unset !important;
    background-color: unset !important;
}

ne-heading-content > ne-text:not(:nth-child(2)) {
    display: none !important;
}
`;

document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`);

大概就是这样
@match的这篇文章里面暂时没遇到neTextElements.length == 5的情况，
就单纯把标题样式改了，哥哥可以参考这种思路去应用

wwwwwllllk

steven026 发表于 2023-6-7 22:22
[md]```js
// ==UserScript==
// @name         New Userscript

哥哥太强了，我又学到了，这种比js写的好，我的还得刷新页面

chen466658854

你好 能做大麦抢票软件吗。。。。