通过脚本修改语雀文章的模板样式
# 为什么写这个脚本想看语雀的某个博主的文章,感觉其写的文章可以学到东西。但是模板的设置我很难读进去他的文章。所以就想让脚本来修改样式。因为他的文章统一了模板,所以基本满足他的所有文章。
!(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');
}
```
单纯改样式的话用CSS控制样式效果要比JS控制样式效率高很多,甚至连具体逻辑都不用写,只用写选择器 steven026 发表于 2023-6-7 21:57
单纯改样式的话用CSS控制样式效果要比JS控制样式效率高很多,甚至连具体逻辑都不用写,只用写选择器 ...
好像我这个脚本用css不太容易实现 steven026 发表于 2023-6-7 21:57
单纯改样式的话用CSS控制样式效果要比JS控制样式效率高很多,甚至连具体逻辑都不用写,只用写选择器 ...
不过期待哥哥可以实现一下,我学习一下 本帖最后由 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`的情况,
就单纯把标题样式改了,哥哥可以参考这种思路去应用 steven026 发表于 2023-6-7 22:22
```js
// ==UserScript==
// @name New Userscript
哥哥太强了,我又学到了,这种比js写的好,我的还得刷新页面 你好 能做大麦抢票软件吗。。。。
页:
[1]