wwwwwllllk 发表于 2023-6-7 21:49:40

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

# 为什么写这个脚本

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

!(data/attachment/forum/202306/07/214400cmlkpq5pk9k30qge.png)

!(data/attachment/forum/202306/07/214846a5b4fx9i4m5ixsxb.png)

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

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


```javascript
// 获取所有 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;
// 删除第二个 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();
});
      
}
});
```



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

```javascript
// 删除粉红色
var elements = document.querySelectorAll('');
for (var i = 0; i < elements.length; i++) {
elements.removeAttribute('style');
}
```


steven026 发表于 2023-6-7 21:57:41

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

wwwwwllllk 发表于 2023-6-7 22:17:10

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

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

wwwwwllllk 发表于 2023-6-7 22:18:47

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

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

steven026 发表于 2023-6-7 22:22:46

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

```js
// ==UserScript==
// @name         New Userscript
// @version      1.0
// @descriptiontry 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 发表于 2023-6-8 09:04:07

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


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

chen466658854 发表于 2023-6-14 10:51:02

你好 能做大麦抢票软件吗。。。。
页: [1]
查看完整版本: 通过脚本修改语雀文章的模板样式