写在前面：主题将在 1.8.10 版本后不再内置豆瓣页样式，如需使用请自行添加。

介绍

通过豆瓣页展示你的豆瓣信息

教程

  1. 使用命令安装插件
    1
    npm i hexo-douban --save
  2. 在站点配置文件 _config.yml 中添加豆瓣配置，具体可以参照项目文档
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    douban:
        id: 270559401
        builtin: true
        item_per_page: 10
        meta_max_line: 4
        customize_layout: page
        book:
            path: books/index.html
            title: '我的书单'
            quote: '读书之乐，无穷无尽。'
            option:
            cover: ''
            type: banner # 这里选择banner可以添加顶部banner，不填则不添加
            desc: '记录了我读过的书籍。'
            leftend: '与书为伴，与书为友。'
            rightbtn: '部署项目'
            rightbtnlink: ''
        timeout: 10000
  3. 使用 hexo douban 命令生成豆瓣页
  4. 运行 hexo server 查看效果
  5. 使用自定义样式，添加到自定义样式文件中
    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
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    .hexo-douban-items {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        flex-direction: row;
    }
    .hexo-douban-items .hexo-douban-comment {
        display: none;
    }
    .hexo-douban-items .hexo-douban-item {
        position: relative;
        width: calc(100% / 4 - 9px);
        border-radius: 12px;
        border: var(--style-border);
        box-shadow: var(--efu-shadow-border);
        background: var(--efu-card-bg);
        transition: 0.3s;
        animation: slide-in 0.6s 0.3s backwards;
        border: var(--style-border);
        margin: 8px 0;
        height: 160px;
        min-height: 160px !important;
        overflow: hidden;
    }
    @media screen and (max-width: 1200px) {
        .hexo-douban-items .hexo-douban-item {
            width: calc(100% / 3 - 9px);
        }
    }
    @media screen and (max-width: 899px) {
        .hexo-douban-items .hexo-douban-item {
            width: calc(100% / 2 - 9px);
        }
    }
    @media screen and (max-width: 600px) {
        .hexo-douban-items .hexo-douban-item {
            width: 100%;
        }
    }
    .hexo-douban-items .hexo-douban-item:hover {
        border-color: var(--efu-main);
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-picture {
        width: 120px;
        height: 100%;
        top: 0;
        padding: 10px;
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-picture img {
        margin: 0;
        height: 100%;
        max-width: 100%;
        border-radius: 6px;
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-info {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 100%;
        position: relative;
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-rating {
        position: absolute;
        bottom: 5px;
        line-height: 16px;
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-meta {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }
    @media screen and (max-width: 1300px) {
        .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-meta {
            -webkit-line-clamp: 3 !important;
        }
    }
    @media screen and (max-width: 899px) {
        .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-meta {
            -webkit-line-clamp: 4 !important;
        }
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-title {
        transition: all 0.2s ease 0s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-title a {
        border-bottom: 0;
    }
    .hexo-douban-items .hexo-douban-item .hexo-douban-info .hexo-douban-title a:hover {
        background: none;
        color: var(--efu-main);
    }
    .hexo-douban-pagination {
        margin-top: 1.25rem;
        animation: slide-in 0.6s 0.3s backwards;
    }
    .hexo-douban-pagination .hexo-douban-button {
        background: var(--efu-card-bg);
        height: 2rem;
        line-height: calc(2rem - 2px);
        border-radius: 8px !important;
        margin: 0 0.3rem;
        padding: 6px 12px;
        box-shadow: var(--efu-shadow-border);
        border: var(--style-border);
        transition: 0.3s;
        display: inline-flex;
        align-items: center;
    }
    .hexo-douban-pagination .hexo-douban-button:hover {
        background: var(--efu-main);
    }
    .hexo-douban-tabs {
        white-space: nowrap;
        overflow: hidden;
        display: flex;
        padding: 0.4rem 1rem 0.4rem 1rem;
        background: var(--efu-card-bg);
        border-radius: 12px;
        border: var(--style-border);
        animation: slide-in 0.6s 0.3s backwards;
    }
    .hexo-douban-tabs:hover {
        border-color: var(--efu-main);
    }
    .hexo-douban-tabs a {
        padding: 0.1rem 0.5rem;
        margin-right: 6px;
        font-weight: 700;
        border-radius: 8px !important;
        border-bottom: 0;
    }
    .hexo-douban-tabs .hexo-douban-tab-active {
        background: var(--efu-main);
    }
  6. 添加到页面
    1
    2
    3
    extends:
        head: # 在head中插入 / Insert in head
            - <link rel="stylesheet" href="/css/custom.css">

寻找豆瓣ID

  1. 注册并登录豆瓣
  2. 拖拽这张照片到浏览器地址栏，可在地址后缀中看到你的豆瓣ID
  3. 地址栏ID即为你的豆瓣ID

预览