iT邦幫忙

4

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~

  • 分享至 

  • xImage
  •  

目錄

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~
前端小試身手(2)--it幫跳轉到最佳解答
前端小試身手(3)--增添系列文目錄
前端小試身手(4)--it幫發文「一眼全覽」
前端小試身手(5)-備份it幫的發問!
前端小試身手(6)--IMG複製大師,懶人專用小腳本
前端小試身手(7)--迷片靜音神隊友,讓你尷尬不再有!
前端小試身手(8)--教你寫出「思想審查警衛」,過濾垃圾雜訊的利器!
前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

2023/1/3:新增怎麼把發文頁也弄出編輯鈕了(見留言)
2023/1/19:新增可以放上去(未更動)

正文開始

完成效果:

使用油猴腳本(Tampermonkey)掛載

若各位
有多次修改發問內容的需求
ie.把已經選出最佳解答的文章改成"已解答"的標題

那麼就會發現IT幫編輯文章都要先點進去 才能編輯
因此我就簡單做個button來新增edit按鈕

編寫過程很簡單 就僅是createElement以及addEventListener加url而已
主要原理是:
編輯的url就是文章本身url前面加上edit

所以代碼如下



function myFunction() {
g=document.createElement('button');
g.innerText="Edit";
g.className = 'card';
g.style.float="right";
g.style.color="black";
g.style.borderRadius="6px";
g.style.padding="5.5px";
g.style.fontSize="12px";
g.style.margin="5px 0px"
g.style.border="1.5px solid"
}

//找到所有發文的文章
let artcles=document.getElementsByClassName('qa-list__title');
artLen=artcles.length;


//迴圈把編輯的url加進去

for (i=0;i<artLen;i++){
	myFunction()
	Number=artcles[i].getElementsByTagName('a')[0].href.split('/')[4];
	let url="https://ithelp.ithome.com.tw/questions/edit/"+Number;
	g.addEventListener('click',function(){window.open(url)});
	artcles[i].appendChild(g);
}

油猴的標籤可以這樣寫
// @match https://ithelp.ithome.com.tw/users/你的id編碼/questions*

值得特別注意的是一個小地方
let url="https://ithelp.ithome.com.tw/questions/edit/"+Number;
一開始寫的時候沒有把這個let加進去
導致網址都被覆蓋掉 每篇文章的edit都是最後一篇的url

所以這個點是我們值得注意的 我修了這個BUG大概快兩小時....冏|||


有興趣的可以進一步延伸到發文 回答等頁面的編輯
甚至是延伸到ajax 不用切分頁就在原頁面編輯完成的功能等等
以上 給各位參考


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
Oo_花之舞__oO
iT邦新手 1 級 ‧ 2023-01-03 21:46:49

更新:
加上一個發文頁面也可以編輯的功能

其實只要稍微改一下就可以了


先把油猴的腳本匹配網址 改成所有使用者
// @match https://ithelp.ithome.com.tw/users/*

然後程式碼就加上一個比對自己姓名跟發文者姓名的判斷

if (document.querySelector("body > div.container.index-top > div > div > div:nth-child(1) > div.profile-header.clearfix > div.profile-header__content > div.profile-header__name").innerText.split(" ")[0]==document.querySelector("#dLabel > span.menu__account").innerText){

//原本的code

}

迴圈的部分改成 先判斷網址是article還是question
用search判斷有沒有question在裡面 如果有就是>0
執行原本代碼
else的話
就開始寫article的編輯網址
(去觀察一下就發現只是question變成article 以及edit變成在後面)

邏輯講完 以下是全code:

// ==UserScript==
// @name         edit顯示-IT幫
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://ithelp.ithome.com.tw/users/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw
// @grant        none
// ==/UserScript==

(function() {
if (document.querySelector("body > div.container.index-top > div > div > div:nth-child(1) > div.profile-header.clearfix > div.profile-header__content > div.profile-header__name").innerText.split(" ")[0]==document.querySelector("#dLabel > span.menu__account").innerText){

let chose=location.href

function myFunction() {
g=document.createElement('button');
g.innerText="Edit";
g.className = 'card';
g.style.float="right";
g.style.color="black";
g.style.borderRadius="6px";
g.style.padding="5.5px";
g.style.fontSize="12px";
g.style.margin="5px 0px"
g.style.border="1.5px solid"
}

//找到所有發文的文章
let artcles=document.getElementsByClassName('qa-list__title');
artLen=artcles.length;


//迴圈把編輯的url加進去
if (chose.search('question')>0){
for (i=0;i<artLen;i++){
	myFunction()
	Number=artcles[i].getElementsByTagName('a')[0].href.split('/')[4];
	let url="https://ithelp.ithome.com.tw/questions/edit/"+Number;
	g.addEventListener('click',function(){window.open(url)});
	artcles[i].appendChild(g);
}
}else{
    for (i=0;i<artLen;i++){
	myFunction()
	Number=artcles[i].getElementsByTagName('a')[0].href.split('/')[4];
	let url="https://ithelp.ithome.com.tw/articles/"+Number+"/edit";
	g.addEventListener('click',function(){window.open(url)});
	artcles[i].appendChild(g);
}

}}
})();

我要留言

立即登入留言