目錄

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

前端小試身手(2)--it幫跳轉到最佳解答

前端小試身手(3)--增添系列文目錄

前端小試身手(4)--it幫發文「一眼全覽」

前端小試身手(5)-備份it幫的發問！

前端小試身手(6)--IMG複製大師，懶人專用小腳本

前端小試身手(7)--迷片靜音神隊友，讓你尷尬不再有！

前端小試身手(8)--教你寫出「思想審查警衛」，過濾垃圾雜訊的利器！

前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

前題：

根據上次寫的文章，我們已經幫鐵人賽加了預覽。
相同的原理、功能，其實可以延伸到發文，除此之外，這次任務我們還要把上次的選單美化。

效果圖：

如此一來當遇到一個文章有料的作者，我們就可以一次觀看他的文章主題範圍。
不需要一頁一頁的翻閱，太浪費時間與精神。

tampermonkey外掛的原始碼：

// ==UserScript==
// @name         it幫發文一覽
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  preview all article
// @author       You
// @match        https://ithelp.ithome.com.tw/users/*
// @require      https://code.jquery.com/jquery-3.6.3.min.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw
// @grant        none
// ==/UserScript==

(function() {
const AllUrl=[];
let Id=location.href.split('/')[4]
let URL=`https://ithelp.ithome.com.tw/users/${Id}/articles`


function MakeSelect(Page){
        Select=$('<select>')

        Select[0].style=`
        margin-top: 0.7px;
        margin-bottom: 1px;
        width: 100%;
        font-size: 16px;
        height: 46px;
        border: 2px solid dimgray;
        border-radius: 5px;
        padding: 10px;
        margin-left: 0;
        color: black;
        background: lightblue;
        opacity: .7;
        box-shadow: 1px 1px 5px #383a3f;
        font-weight: 900;`


        for (i=1;i<Page;i++){

        URL=`https://ithelp.ithome.com.tw/users/${Id}/articles?page=${i}`


        $.ajax({
            url:URL,
            async: false,
            success:function(response){
                let Chunks=$(response).find('h3 > a');
                len=Chunks.length;

                for (j=0;j<len;j++){
                    let Item=Chunks[j];
                    AllUrl.push(Item.href);
                    Option=$('<option>').html(Item.innerText);
                    Select[0].appendChild(Option[0]);
                }
        },
            error:function(xhr){alert("發生錯誤: " + xhr.status + " " + xhr.statusText);}
            });
        }


        Select.on("change",() => {
            window.open(AllUrl[Select[0].selectedIndex]);
        });

        $('.board').eq(0).append(Select)};

$.ajax({
        url:URL,
        async: false,
        success:function(response){
            let Items=$(response).find('.profile-main__badge').html();
            let Page=Math.ceil(Items/10)+1;
            MakeSelect(Page);
            },
        error:function(xhr){alert("發生錯誤: " + xhr.status + " " + xhr.statusText);}
        });
})();

後紀

可以注意到我們更新了很多地方，不只是優化程式碼、引入jquery、還美化了CSS呢！
選單這招的確滿好用的，延伸的話還有很多地方可以做。
例如追蹤的文章、問題、回答，這些都能添加選單。