Solitude另一位开发者@王卓Sco询问我这么一个问题：下面这段Pug模版代码的第一个 +todayCardContent() 没有正确混入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
- var filteredPosts = site.posts.data.filter(item => item.recommend === true).slice(0,6)
each post in filteredPosts
    .recent-post-item
        .post_cover.left_radius
            a(href=url_for(post.path), title=post.title)
                span.recent-post-top-text 荐
                img.post_bg(alt=post.title, src=post.cover)
        .recent-post-info
            a.article-title(href=url_for(post.path), title=post.title)= post.title

mixin todayCardContent
    .todayCard-info
        .todayCard-tips= theme.hometop.recommendList.sup
        .todayCard-title= theme.hometop.recommendList.title
    .todayCard-cover.nolazyload(style=`background: url('${theme.hometop.recommendList.img}') no-repeat center /cover`)
    .banner-button-group
        a.banner-button(onclick="window.event.cancelBubble=true;sco.hideTodayCard();")
            i.scoicon.sco-add-fill
            span.banner-button-text 更多推荐

case theme.hometop.recommendList.url.startsWith('/')
    when true
        .todayCard#todayCard(onclick=`pjax.loadUrl('${theme.hometop.recommendList.url}')`)
            +todayCardContent()
    when false
        script.
            function GoTodayCard() {
                window.open("#{theme.hometop.recommendList.url}", "_blank");
            }
        .todayCard#todayCard(onclick="GoTodayCard()")
            +todayCardContent()

具体分析下这段混入结构。

推荐卡片使用mixin定义名为 todayCardContent 的混入。接着判断 theme.hometop.recommendList.url 的值是否以斜杠开始，并使用布尔值实现不同事件。

解决方法

在这整个的结构里并没有写法、格式错误，+todayCardContent()应该在两个条件分支中都是被调用的。没有达到预期的效果，Hexo一键三连后查看F12的元素结构。

在控制台并没有警示提醒以及报错，可以尝试在Pug模版处更改或添加元素类名等，以便进行进一步排错。在改完类名后重新调试发现类名没有改变，就已经大概知道问题出现在哪里了。

重新定位父级元素后，在hometop.pug里找到了目前引用的是另外一个Pug模版，将其修改成正确的Pug模版名即可

1
2
3
4
5
···

        .topGroup
            //- 修改前
            include ./rencentPost.pug
1
2
3
4
5
···

        .topGroup
            //- 修改后
            include ./topGroup.pug

长时间的编写会导致记忆混乱，在copy备份后往往会漏掉更改回正确的内容。

注意用眼，合理开发。

贡献

引用站外链接
Hexo-theme-solitude | GitHub
🐞 Bug Repair：首页顶部推荐卡片修复