魔改需谨慎,所列出配置仅测试完成后无问题发布,不代表您的最终效果

一个在 Hexo 页面中嵌入豆瓣个人主页的小插件.

实现效果

最初版本

安装

npm install hexo-douban --save

配置

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

douban:
  id: 您的豆瓣ID
  builtin: false
  item_per_page: 12  #这里也是可以设置每个页面显示的数量,为了好看,就是每个页面显示12个电影/游戏/书籍/音乐
  book:
    path: books/index.html
    title: 'This is my book title'
    quote: 'This is my book quote'
    option:
  movie:
    path: movies/index.html
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    option:
  game:
    path: games/index.html
    title: 'This is my game title'
    quote: 'This is my game quote'
    option:
  song:
    path: songs/index.html
    title: 'This is my song title'
    quote: 'This is my song quote'
    option:
  timeout: 10000 
  • user: 你的豆瓣ID(纯数字格式,不是自定义的域名)。获取方法可以参考怎样获取豆瓣的数字 ID ?
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持html语法。
  • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

这里id的获取提供一个比较简单的方式

打开豆瓣,选择右上角的个人主页,点击头像,然后图片另存为即可发现类似:up239549547-2.jpg的名称,其中239549547便是您的数字ID

使用

需要注意:如果不加参数,那么默认参数为-bgm【这里直接用 hexo douban -bgms即可】

$ hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
  -b, --books   Generate douban books only
  -g, --games   Generate douban games only
  -m, --movies  Generate douban movies only
  -s, --songs   Generate douban songs only

需要注意的是,通常大家都喜欢用hexo d来作为hexo deploy命令的简化,但是当安装了hexo douban之后,就不能用hexo d了,因为hexo doubanhexo deploy的前缀都是hexo d

第一次使用 hexo douban 时,后台会异步进行数据获取,一般需要等待一段时间才能查到数据(大约五分钟)。

由于数据是分阶段获取,当第一次成功生成页面时其实只获取了图书、电影或游戏的简略信息。后台会慢慢更新详细信息,如果有需要可以再多等等一段时间。时间视你的数据数量而定,平均一个资源会花6s。例如如果你有 100 个想读、100个已读、100个在读的图书,则大约需要等待 300*6/60= 30 分钟。

后续如果你的豆瓣数据更新了,hexo douban 同样也会自动进行更新(同样需要等待一段时间才会查到更新数据),不过一个用户id每天至多只会同步一次。

显示

如果上面的配置和操作都没问题,就可以在生成站点之后打开 //yourblog/books//yourblog/movies, //yourblog/games, 来查看结果.

进阶版

当你完成最初版本后,无需修改config.yml中配置,我也是在原作者的基础上稍微进行了改动,这里可以下载以下文件进行替换,再次提醒您需要注意的是:魔改需谨慎,效果仅改变本文章所涉及的相关页面,其他部分显示效果可能存在差异

点击此处下载进阶版的hexo-douban

找到博客存放路径的根路径的node_modules\整个替换hexo-douban文件夹即可(后面有时间在整npm方式的)

然后在css文件内新建一个css文件(下面会列出我的路径作为参考)


:root {
    --global-font-size: 16px;
    --global-bg: #fff;
    --font-color: #4c4948;
    --hr-border: #97bcfb;
    --hr-before-color: #6ea2f9;
    --search-bg: #f6f8fa;
    --search-input-color: #4c4948;
    --search-result-title: #4c4948;
    --preloader-bg: #37474f;
    --preloader-color: #fff;
    --tab-border-color: #f0f0f0;
    --tab-botton-bg: #f0f0f0;
    --tab-botton-color: #1f2d3d;
    --tab-button-hover-bg: #dcdcdc;
    --tab-button-active-bg: #fff;
    --card-bg: #fff;
    --sidebar-bg: #f6f8fa;
    --btn-hover-color: #ff7242;
    --btn-color: #fff;
    --btn-bg: #307af6;
    --text-bg-hover: #307af6;
    --light-grey: #eee;
    --white: #fff;
    --text-highlight-color: #1f2d3d;
    --blockquote-color: #6a737d;
    --blockquote-bg: rgba(73, 177, 245, 0.1);
    --reward-pop: #f5f5f5;
    --toc-link-color: #666261;
    --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.06);
    --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
}
/*颜色与数值编辑*/
:root {
	--sevene-white: #fff;
	--sevene-white-op:rgba(255,255,255,0.2);
	--sevene-black:#000;
	--sevene-black-op:rgba(0,0,0,0.2);
	--sevene-none: rgba(0, 0, 0, 0);
	--sevene-gray: #999999;
	--sevene-gray-op:#9999992b;
	--sevene-vip:#e5a80d;
	--sevene-main:var(--sevene-theme);
	--sevene-main-op:var(--sevene-theme-op);
	--sevene-main-op-deep: var(--sevene-theme-op-deep)!important;
	--sevene-shadow-theme:0 8px 12px -3px var(--sevene-theme-op);
	--sevene-shadow-blackdeep:0 2px 16px -3px rgba(0,0,0,.15);
	--sevene-shadow-main:0 8px 12px -3px var(--sevene-main-op);
	--sevene-shadow-blue:0 8px 12px -3px rgba(40,109,234,.20);
	--sevene-shadow-white:0 8px 12px -3px rgba(255,255,255,.20);
	--sevene-shadow-black:0 0 12px 4px rgba(0,0,0,.05);
	--sevene-shadow-yellow:0px 38px 77px -26px rgba(255,201,62,.12);
	--sevene-shadow-red:0 8px 12px -3px #ee7d7936;
	--sevene-shadow-green:0 8px 12px -3px #87ee7936;
	--sevene-shadow-border: 0 8px 16px -4px #2c2d300c;
	--sevene-white-acrylic1: #fefeff !important;
	--sevene-white-acrylic2: #fcfdff !important;
	--sevene-black-acrylic2: #08080a !important;
	--sevene-black-acrylic1: #0b0b0e !important;
	--style-border: 1px solid var(--sevene-card-border);
  	--sevene-blue-main: #425aef;
  	--style-border-hover: 1px solid var(--sevene-main);
  	--style-border-dashed: 1px dashed var(--sevene-theme-op);
  	--style-border-avatar: 4px solid var(--sevene-background);
  	--style-border-always: 1px solid var(--sevene-card-border);
	--sevene-logo-color:linear-gradient(215deg,#4584ff 0%,#cf0db9 100%);
	--sevene-snackbar-time:5s;
	--sevene-card-twikoo-bg:#ffff;
	--style-border:1px solid var(--sevene-card-border);
	--style-border-always:1px solid var(--sevene-card-border);
	--style-border-hover:1px solid var(--sevene-main);
	--style-border-hover-always:1px solid var(--sevene-main);
	--style-border-dashed:1px dashed var(--sevene-theme-op);
	--hover-border:2px solid var(--sevene-theme);
	--border:2px solid var(--sevene-card-border);
  	--sevene-border-radius: 8px;
  	--sevene-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
    

}
.page .layout, .post .layout {
    max-width: 1450px;
}
::selection {
	background:#0079ff;
	color:#f7f7f7
}
a {
	color:#99a9bf;
	text-decoration:none;
	transition:all .2s ease 0s;
	overflow-wrap:break-word
}
a:hover {
	color:#307af6
}
[data-theme=light] {
	--sevene-theme:#425AEF;
	--sevene-theme-op:#4259ef23;
	--sevene-blue:#425AEF;
	--sevene-red:#D8213C;
	--sevene-pink:#FF7C7C;
	--sevene-green:#28a63f;
	--sevene-yellow:#c28b00;
	--sevene-yellow-op:#d99c001a;
	--sevene-orange:#e38100;
	--sevene-fontcolor:#363636;
	--Sevene-background:#f7f9fe;
	--sevene-reverse:#000;
	--sevene-secondbg:  #f1f3f8;
	--sevene-theme-op-deep: #4259efdd;
	--Sevene-maskbg:rgba(255,255,255,0.6);
	--Sevene-maskbgdeep:rgba(255,255,255,0.85);
	--Sevene-ahoverbg:#F7F7FA;
	--Sevene-lighttext:var(--sevene-main);
	--Sevene-secondtext:rgba(60,60,67,0.6);
	--Sevene-scrollbar:rgba(60,60,67,0.4);
	--Sevene-card-btn-bg:#edf0f7;
	--Sevene-post-blockquote-bg:#fafcff;
	--Sevene-post-tabs-bg:#f2f5f8;
	--Sevene-secondbg:#f1f3f8;
	--sevene-shadow-nav:0 5px 12px -5px rgba(102,68,68,0.05);
	--Sevene-card-bg:rgb(0, 0, 0);
	--senvene--bg:white;
	--Sevene-card-bg-op:var(--sevene-black-op);
	--Sevene-card-bg-none:rgba(255,255,255,0);
	--sevene-shadow-lightblack:0 5px 12px -5px rgba(102,68,68,0.00);
  	--sevene-shadow-light2black:0 5px 12px -5px rgba(102,68,68,0.00);
 	--sevene-card-border:#e3e8f7;
  	--sevene-shadow-border:0 8px 16px -4px #2c2d300c;
  	--style-border-forever:2px solid var(--sevene-main);
  	--Sevene-sun-moon:#ff7242;
  	--sevene-card-twikoo-bg:#ffff;
  	--sevene-theme-op: #4259ef23;
  	--sevene-hovertext: var(--sevene-theme);;
  	--sevene-card-bg-white: #fff;
  	--sevene-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  	--sevene-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  	--sevene-card-border: #c0c6d8;
  	--sevene-footer-background: #f1f3f8;
	--sevene-rightmenu-color: #18171d;
}
[data-theme="dark"] {
	--sevene-theme:#0084FF;
	--sevene-theme-op:#0084FF23;
	--sevene-blue:#0084FF;
	--sevene-red:#FF3842;
	--sevene-pink:#FF7C7C;
	--sevene-green:#57bd6a;
	--sevene-yellow:#ffc93e;
	--sevene-yellow-op:#ffc93e30;
	--sevene-orange:#ff953e;
	--sevene-fontcolor:#F7F7FA;
	--Sevene-background:#18171d;
	--sevene-reverse:#fff;
	--sevene-secondbg: #ffffff00;
	--Sevene-maskbg:rgba(0,0,0,0.6);
	--Sevene-maskbgdeep:rgba(0,0,0,0.85);
	--Sevene-hovertext:#0A84FF;
	--Sevene-ahoverbg:#fff;
	--Sevene-lighttext:#f2b94b;
	--Sevene-secondtext:#a1a2b8;
	--Sevene-scrollbar:rgba(200,200,223,0.4);
	--Sevene-card-btn-bg:#30343f;
	--Sevene-post-blockquote-bg:#000;
	--Sevene-post-tabs-bg:#121212;
	--Sevene-secondbg:#00000000;
	--sevene-shadow-nav:0 5px 20px 0px rgba(28,28,28,0.4);
	--Sevene-card-bg:#ffffff;
	--Sevene-card-bg-op:var(--sevene-white-op);
	--Sevene-card-bg-none:#1d1b2600;
	--sevene-shadow-lightblack:0 5px 12px -5px rgba(102,68,68,0.0);
	--sevene-shadow-light2black:0 5px 12px -5px rgba(102,68,68,0.0);
	--sevene-card-border:#42444a;
	--sevene-shadow-border:0 8px 16px -4px #00000050;
	--style-border-forever:2px solid var(--Sevene-lighttext);
	--Sevene-sun-moon:var(--sevene-yellow);
	--sevene-card-twikoo-bg:rgb(0, 0, 0);
	--senvene--bg:rgb(0, 0, 0);
	--sevene-theme-op-deep: #0084ffdd;
	--sevene-theme: #0084ff;
	--sevene-theme-op: #0084ff23;
	--sevene-blue: #0084ff;
	--sevene-red: #ff3842;
	--sevene-pink: #ff7c7c;
	--sevene-green: #57bd6a;
	--sevene-fontcolor: #f7f7fa;
	--sevene-background: #18171d;
	--sevene-reverse: #fff;
	--Sevene-maskbg: rgba(0, 0, 0, 0.6);
	--Sevene-maskbgdeep: rgba(0, 0, 0, 0.85);
	--sevene-hovertext: #0a84ff;
	--Sevene-ahoverbg: #fff;
	--Sevene-lighttext: #f2b94b;
	--Sevene-secondtext: #a1a2b8;
	--Sevene-scrollbar: rgba(200, 200, 223, 0.4);
	--Sevene-card-btn-bg: #30343f;
	--Sevene-post-blockquote-bg: #000;
	--Sevene-post-tabs-bg: #121212;
	--sevene-secondbg: #30343f;
	--sevene-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
	--sevene-card-bg-white: #1d1b26;
	--sevene-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
	--sevene-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
	--sevene-card-border: #42444a;
	--sevene-footer-background: #30343f;
	--sevene-rightmenu-color: #ffffff;
}


  .hexo-douban-item{
	border-bottom:none!important;
	background:var(--heo-card-bg);
	border:var(--style-border);
	box-shadow:var(--heo-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:0!important;
	height:100%!important
  }
  .hexo-douban-tabs{
	display:none
  }
  .hexo-douban-title a{
	border-bottom:0!important
  }
  .hexo-douban-title{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
  }
  .hexo-douban-title a:hover{
	color:var(--heo-lighttext)!important;
	background:var(--heo-none)!important
  }
  .hexo-douban-paginati