求助优化Blogger精选文章小工具，匹配热门文章组件样式

针对你遇到的三个样式问题，逐一调整代码如下：

1. 统一图片尺寸（匹配热门文章） #

先通过浏览器开发者工具查看Blogger热门文章组件的图片CSS属性，将精选文章图片的尺寸、圆角、间距等属性完全对齐。示例中假设热门文章图片高度为120px，带4px圆角：

.featured-post-image {
  width: 100%;
  height: 120px; /* 替换为热门文章图片的实际高度 */
  object-fit: cover;
  border-radius: 4px; /* 匹配热门文章图片圆角 */
  margin-bottom: 8px; /* 图片与标题的间距，对齐热门文章 */
}

2. 统一字体样式（继承热门文章） #

通过继承全局样式或直接复制热门文章标题的字体属性，确保文字风格一致：

.featured-post-title {
  font-family: inherit;
  font-size: 14px; /* 替换为热门文章标题的字号 */
  font-weight: 500; /* 匹配热门文章字重 */
  color: #333; /* 匹配热门文章文字颜色 */
  line-height: 1.4;
  display: block;
}

.featured-post a {
  text-decoration: none; /* 去掉下划线，对齐热门文章 */
  color: inherit;
  display: block;
}

3. 优化文章间距（提升排版美观度） #

为列表项添加底部间距，同时清除默认列表样式，对齐热门文章的排版：

.featured-posts-list {
  padding: 0;
  margin: 0;
}

.featured-post {
  list-style: none;
  margin-bottom: 16px; /* 每个精选文章之间的间距，匹配热门文章 */
}

修改后的完整代码 #

<div class="featured-posts-column">
    <ul class="featured-posts-list">
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2023/09/wikipedate-questo-blog-parte-2.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Wikipedate (Questo blog Parte 2)</b></span>  
            </a>
        </li>
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2023/11/kirk-lalba-delluomo.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Kirk. L'alba dell'uomo</b></span>  
            </a>
        </li>
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2024/03/appunti-sullantirecentismo-parte-2-la.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Appunti sull'antirecentismo, Parte 2. La cipolla</b></span>  
            </a>
        </li>
    </ul>
</div>

<style>
/* 对齐热门文章图片样式 */
.featured-post-image {
  width: 100%;
  height: 120px; /* 替换为热门文章图片的实际高度 */
  object-fit: cover;
  border-radius: 4px; /* 匹配热门文章图片圆角 */
  margin-bottom: 8px; /* 图片与标题的间距 */
}

/* 对齐热门文章字体样式 */
.featured-post-title {
  font-family: inherit;
  font-size: 14px; /* 替换为热门文章标题的字号 */
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: block;
}

.featured-post a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* 优化文章间距 */
.featured-posts-list {
  padding: 0;
  margin: 0;
}

.featured-post {
  list-style: none;
  margin-bottom: 16px; /* 文章间的间距 */
}
</style>

<script>
function getFeaturedPostImage(postUrl) {
    const postLink = document.querySelector(`a[href="${postUrl}"]`);
    if (postLink) {
        const img = postLink.querySelector('.featured-post-image');
        if (img) {
            fetch(postUrl)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    // Image Selectors 
                    let postImage;
                    if (postUrl.includes('wikipedate-questo-blog-parte-2')) {
                        postImage = doc.querySelector('.separator a img'); // First Post
                    } else if (postUrl.includes('kirk-lalba-delluomo')) {
                        postImage = doc.querySelector('.tr-caption-container a img'); // Second Post
                    } else if (postUrl.includes('appunti-sullantirecentismo-parte-2-la')) {
                        postImage = doc.querySelector('.tr-caption-container a img'); // Third Post (same as second)
                    }

                    if (postImage) {
                        img.src = postImage.src;
                        img.alt = postImage.alt || 'Immagine dal post in vetrina';
                    } else {
                        console.error("Opening image not found for:", postUrl);
                    }
                })
                .catch(error => console.error("Error fetching post:", postUrl, error));
        }
    }
}

document.querySelectorAll('.featured-post a').forEach(link => {
    getFeaturedPostImage(link.href);
});
</script>

注意事项 #

• 请根据你博客中热门文章组件的实际样式，调整CSS中的height、font-size、margin-bottom等数值。
• 可通过浏览器右键“检查元素”查看热门文章的CSS类和属性，确保完全匹配。

内容的提问来源于stack exchange，提问作者Gitz