今天是大年初五，祝大家新的一年“兔”然发财，“兔”飞猛进。

前段时间实现了静态的电影推荐，书籍推荐页面，刚好有人问起这个怎么实现。其实这个butterfly作者制作了一个相关的插件，可以实现自动获取豆瓣的影音等，当然，你也可以像我一样搞成静态滴。

引用站外地址
hexo-butterfly-douban
jerry

新建页面

在themes/butterfly/layout/includes/page文件下新建movies.pug文件

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//- movie page
#article-container
    .author-content-item.like-movie.single.share
        .card-content
            .author-content-item-tips=_p('电影')
            span.author-content-item-title=_p('静下来慢慢')
              span.inline-word=_p('感受着，')
            span.author-content-item-title=_p('流淌的')
              span.inline-word=_p('故事。')
            .content-bottom
                .tips=_p('跟 Jayhrn 查看更多书影音')
            .banner-button-group
                a.banner-button(href="https://www.douban.com/")
                    i.fas.fa-circle-chevron-right
                    span.banner-button-text=_p('感受更多')
    blockquote
      p 静下来，感受电影的魅力
    //- 样式文件
    style.
        .hexo-douban-item {
            padding-bottom: 10px;
            position: relative;
            clear: both;
            min-height: 170px;
            padding: 10px 0;
            border-bottom: 1px #ddd solid;
        }

        @media screen and (max-width: 600px) {
            .hexo-douban-item {
                width: 100%;
            }
        }

        .hexo-douban-picture {
            position: absolute;
            left: 0;
            top: 10px;
            width: 100px;
        }

        .hexo-douban-info {
            padding-left: 120px;
        }

        .hexo-douban-meta {
            font-size: 12px;
            padding-right: 10px;
        }

        .hexo-douban-comments {
            font-size: 12px;
        }
    div
        if site.data.movies
            .hexo-douban-show#hexo-douban-item3
                each i in site.data.movies
                    each item in i.movie_list
                        .hexo-douban-item
                            .hexo-douban-picture(title=item.name)
                                a(target='_blank', href=url_for(item.link), rel='external nofollow')
                                    img(src=url_for(item.cover), data-src=url_for(item.cover), referrerpolicy='no-referrer')
                            .hexo-douban-info
                                .hexo-douban-title(title=item.name)
                                    a(target='_blank', href=url_for(item.link), rel='external nofollow')=item.name
                                .hexo-douban-meta=item.date_grade
                                .hexo-douban-comments=item.comment

具体的文字可以自行修改。

引入

在themes/butterfly/layout/page.pug文件中引入创建的页面，注意对齐。

1
2
3
4
5
6
7
8
9
    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
+      when 'movies'
+        include includes/page/movies.pug

这里的作用是为了引入刚刚创建的页面。

添加资源

由于这里是静态资源，我们需要自行添加推荐的作品，这里我们使用的是yml格式。

在博客根目录新建source/_data/movies.yml文件，如果_data文件夹也没有的话需要自己创建，当然其实如果看了官方文档的话，创建过友链页面的肯定有的。

在页面中按照如下格式填写内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 电影推荐
# name：电影名称
# link：电影链接
# cover: 封面图，可以从豆瓣页面右键复制图片链接
# date_grade: 电影评分与观看日期 ★☆
# comment: 评论
- class_name: 电影推荐
  movie_list:
    - name: 人生大事
      link: https://movie.douban.com/subject/35460157/
      cover: https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp
      date_grade: 2022-07-05 / ★★★★★ 力荐
      comment: 非常的感人，是一部非常值得看的电影
    - name: 长津湖之水门桥
      link: https://movie.douban.com/subject/35613853/
      cover: https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2846021991.jpg
      date_grade: 2022-07-04 / ★★★☆☆ 一般
      comment: 怎么说呢，和一直以来拍的都差不多，有的镜头还可以，不过看的还是有点生气

添加样式

这里会给出一些样式，如有遗漏，可以自行f12获取

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
.author-content-item.single.like-movie {
    height: 19rem;
    background: url(https://自行补充图片背景链接) no-repeat top;
    background-size: cover;
    color: var(--Jay-white);
    overflow: hidden;
}
.hexo-douban-item {
    border-bottom: none !important;
    background: var(--Jay-card-bg);
    border: var(--style-border);
    box-shadow: var(--Jay-shadow-border);
    border-radius: 12px;
    margin: 8px 0;
    height: 160px;
    min-height: 160px !important;
    width: 49%;
    overflow: hidden;
}

@media screen and (min-width: 1300px) {
    .hexo-douban-item {
        width: 32%;
    }
}

#hexo-douban-item3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hexo-douban-item .hexo-douban-picture a {
    padding: 0 !important;
}

.hexo-douban-item .hexo-douban-picture img {
    margin: 0px !important;
    height: 100% !important;
}

.hexo-douban-tabs {
    display: none;
}

.hexo-douban-title a {
    border-bottom: 0px !important;
}

.hexo-douban-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hexo-douban-title a:hover {
    color: var(--Jay-lighttext) !important;
    background: var(--Jay-none) !important;
}

.hexo-douban-pagination {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

span.hexo-douban-pagenum {
    margin: 0 0.5rem;
}

.hexo-douban-title {
    font-size: 1rem;
    line-height: 1;
}

.hexo-douban-title a {
    padding: 0 !important;
}

.hexo-douban-info {
    padding-left: 130px !important;
    margin-right: 0.5rem;
}

.hexo-douban-meta {
    font-size: 0.7rem !important;
    color: var(--Jay-secondtext);
    margin-top: 0.3rem;
    line-height: 1.05;
}

.hexo-douban-comments {
    line-height: 1.2;
    margin-top: 0.5rem;
    font-size: 0.8rem !important;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.hexo-douban-picture {
    height: 100%;
    top: 0 !important;
    padding: 10px 0 10px 10px;
}

.hexo-douban-picture a img {
    border-radius: 8px !important;
}

.hexo-douban-button {
    width: 4rem;
    height: 2rem;
    line-height: 1.9rem;
    border-radius: 8px !important;
    background: var(--Jay-card-bg);
    box-shadow: var(--Jay-shadow-lightblack);
    border: var(--style-border);
    margin: 0 0.2rem;
    border-bottom: var(--style-border) !important;
}

最后

其实包括书籍推荐页面也可以按照这个来进行改进，基本上都没有什么区别。