詢問如何移除 CATEGORIES 中略縮圖的漸層設定

[wastu01]

位置：https://wastu01.github.io/archives/
body > div > main > header > div > div > article:nth-child(1) > a > div.article-details

[wastu01]

查看 css 只找到

    article {
        margin-right: 15px;
        flex-shrink: 0;
        overflow: hidden;
        width: 250px;
        height: 150px;

        .article-title {
            font-size: 1.8rem;
            margin: 0;
        }

        &.has-image {
            .article-details {
                padding: 20px;

                
            }
        }
    }

themes/hugo-theme-stack/assets/scss/partials/layout/article.scss

搜尋 gradient 找到此檔案，themes/hugo-theme-stack/assets/ts/main.ts

        /**
         * Add linear gradient background to tile style article
         */
        const articleTile = document.querySelector('.article-list--tile');
        if (articleTile) {
            let observer = new IntersectionObserver(async (entries, observer) => {
                entries.forEach(entry => {
                    if (!entry.isIntersecting) return;
                    observer.unobserve(entry.target);

                    const articles = entry.target.querySelectorAll('article.has-image');
                    articles.forEach(async articles => {
                        const image = articles.querySelector('img'),
                            imageURL = image.src,
                            key = image.getAttribute('data-key'),
                            hash = image.getAttribute('data-hash'),
                            articleDetails: HTMLDivElement = articles.querySelector('.article-details');

                        const colors = await getColor(key, hash, imageURL);

                        articleDetails.style.background = `
                        linear-gradient(0deg, 
                            rgba(${colors.DarkMuted.rgb[0]}, ${colors.DarkMuted.rgb[1]}, ${colors.DarkMuted.rgb[2]}, 0.5) 0%, 
                            rgba(${colors.Vibrant.rgb[0]}, ${colors.Vibrant.rgb[1]}, ${colors.Vibrant.rgb[2]}, 0.75) 100%)`;
                    })
                })
            });

            observer.observe(articleTile)
        }

不太懂上述語法，還請大大解惑

[CaiJimmy]

你好，

你引用的那段 JavaScript 代码负责的就是生成分类和相关文章缩略图的渐变层，如果不需要可以直接删掉的。

[wastu01]

                     articles.forEach(async articles => { 
                        const image = articles.querySelector('img'),
                            imageURL = image.src,
                            key = image.getAttribute('data-key'),
                            hash = image.getAttribute('data-hash'),
                            articleDetails = articles.querySelector('.article-details');
                    
                        const colors = await getColor(key, hash, imageURL);
                    
                        // 調整透明度值
                        const gradientStartOpacity = 0.4; // 深色起始透明度
                        const gradientEndOpacity = 0.4; // 鮮豔終止透明度
                    
                        // 應用更淡的背景漸變
                        articleDetails.style.background = `
                        linear-gradient(0deg, 
                            rgba(${colors.DarkMuted.rgb[0]}, ${colors.DarkMuted.rgb[1]}, ${colors.DarkMuted.rgb[2]}, ${gradientStartOpacity}) 0%, 
                            rgba(${colors.Vibrant.rgb[0]}, ${colors.Vibrant.rgb[1]}, ${colors.Vibrant.rgb[2]}, ${gradientEndOpacity}) 100%)`;
                    });