在博客上展示你的豆瓣书单、豆瓣影单

前言

在找 Typecho 的时候无意之间被一个插件吸引，也就是本文所要介绍的——豆瓣书单、豆瓣影单。本人也是一个特别爱看电影的人，基本上每天都会关注一些最新上映的院线电影，如果发现有自己感兴趣的电影也会偶然花钱买票去电影院欣赏一番，并将自己的观影感受分享给身边的人。从记事起至今也不知道看过多少部电影（电影院看的屈指可数，电视上的或者碟片或者网上上的真心数不过来）。本想记录自己的观影清单无奈一直没有找到适合的契机，直到我发现了这个插件。好了言归正传，本插件的作用就是记录自己的观影点滴。

由于原作者写的教程本人有点看不懂（原谅本人是个网络小白），于是自己摸索了一个自己能懂的方法。

以下是原博主的使用方式：

食用方式

去 GitHub 上下载或者 Clone 这个 Typecho-Plugin-DoubanBoard，将解压后的文件夹改名为 DoubanBoard，上传至站点插件目录启用，并在插件设置面板进行必要的设置。设置项有：

豆瓣 ID：你的豆瓣 ID，一般可以从你的个人主页的 URL 里找到。
每次加载的数量：从速度和节省流量的考虑，书单和影单不会一次全部加载。你可以填写每次加载的数量。不填默认为 10。
缓存过期时间：插件对数据做了本地缓存以提高访问速度，你可以在这里填写缓存过期时间，单位为秒。两次访问时间间隔超过该时间则会重新拉取数据，不填默认 24 小时。注意，不建议设置得过短，否则豆瓣可能判定你的 IP 存在异常流量。
是否加载 JQuery：如果你的主题没有引入则勾选它来引入，否则取消勾选。
注意：要保证 插件目录 /cache 这个文件夹可写！

插入书单与影单

想读清单：

<div data-status="wish" class="douban-book-list doubanboard-list"></div>

已读清单：

<div data-status="read" class="douban-book-list doubanboard-list"></div>

在读清单：

<div data-status="reading" class="douban-book-list doubanboard-list"></div>

电影已看清单：

<div id="douban-movie-list" class="doubanboard-list"></div>

注意，在某些 Typecho 版本中你可能需要使用 !!! 来包裹住 HTML 代码。

插入单部电影、书籍

插入单部电影：

<div class="douban-single" data-type="movie" data-id=" 电影 ID" data-rating=" 你的评分 "></div>

其中电影 ID 可以在豆瓣电影页面的 URL 中找到。你的评分修改为你自己的评分，10 分制，可带小数。

插入单部书籍

<div class="douban-single" data-type="book" data-id=" 书籍 ID" data-rating=" 你的评分 "></div>

其中书籍 ID 可以在豆瓣书籍页面的 URL 中找到。你的评分修改为你自己的评分，10 分制，可带小数。

注意，在某些 Typecho 版本中你可能需要使用 !!! 来包裹住 HTML 代码。

前台实现

插件是安装好了，可是如何实现我折腾了半天都不知所以然，于是又在另外一个博客上找到了灵感

以下是另个博主的方法，接上面的步骤，安装好插件，也设置好之后

接下来需要在自己用的模板目录下找到平日发文章的模板。
这里我以 Typecho 模板默认的 page.php 文件为例子。
我们将文件复制一份命名为 page-moive.php

在文件的头部增加

<?php
 /**
 * 归档页面 影单
 *
 * @package custom
 */
 ?>

然后在输出文章的部分
（我这里是 <?php $this->content(); ?>）
的下面添加以下想要呈现的一条或者几条代码

插入书单与影单

想读清单：

<div data-status="wish" class="douban-book-list doubanboard-list"></div>

已读清单：

<div data-status="read" class="douban-book-list doubanboard-list"></div>

在读清单：

<div data-status="reading" class="douban-book-list doubanboard-list"></div>

电影已看清单：

<div id="douban-movie-list" class="doubanboard-list"></div>

插入单部电影：

<div class="douban-single" data-type="movie" data-id=" 电影 ID" data-rating=" 你的评分 "></div>

插入单部书籍

<div class="douban-single" data-type="book" data-id=" 书籍 ID" data-rating=" 你的评分 "></div>

其中书籍 ID 可以在豆瓣书籍页面的 URL 中找到。你的评分修改为你自己的评分，10 分制，可带小数

修改完之后我的模板文件就变成了

<?php
 /**
 * 归档页面 影单
 * 
 * @package custom
 */
 ?>
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 <?php $this->need('header.php'); ?>
 <div id="main" class="col-mb-12 col-8 col-offset-2">
 <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
    <div class="post-header">
        <h3 class="post-title"><a href="<?php $this->permalink() ?>" class="post-link"><?php 
   $this->title() ?></a></h3>
        <div class="post-meta">
            <span class="post-meta-label post-meta-views"><?php Contents::getPostView($this); ?> 次
     阅读 </span>
            <span class="post-meta-label post-meta-date"><?php $this->date(); ?></span>
        </div> 
    </div>
    <div class="post-body">
        <div class="post-content">
            <?php $this->content(); ?>             
           <div class="douban-single" data-type="movie" data-id="1652592" data-rating="9"></div>
           <div id="douban-movie-list" class="doubanboard-list"></div>
        </div>
        <?php Contents::getPostOther($this); ?>
        <div class="post-update"><i class="iconfont icon-aria-date"></i>&nbsp; 最后一次更新于 <?php 
     echo date($this->options->postDateFormat,$this->modified) ?></div>
    </div>
    </article>
     <?php $this->need('comments.php'); ?>

   </div><!-- end #main-->
   <?php if($this->fields->showTOC) $this->need('TOC.php'); ?>
   <?php $this->need('footer.php'); ?>

接下来在后台→管理→独立页面中新增一个独立页面。
此时应该会在右侧【自定义模板】中找到【影单】二个字，使用它。
内容和标题自己适当写一下发布即可大功告成！
访问下这个页面看看效果吧！

访问看看效果

以上教程结合两个博客分别是：无文字 | 三无计划 和wiki