IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    butterfly主题如何新建电影推荐，书籍推荐页面，快速学会

    JayHrn发表于 2023-12-19 09:35:28
    love 0

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

    前段时间实现了静态的电影推荐，书籍推荐页面，刚好有人问起这个怎么实现。其实这个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;
    }

    最后

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



沪ICP备19023445号-2号
友情链接