Hugo | 在博文中显示豆瓣条目
因为过段时间会放一篇生存报告上来所以想先搞搞样式，做得我头昏眼花，今天就先把参考链接放上来，下次再工，下次再工啦！
功能实现
省去千字哭诉
总之最后搞定了，学会了一些有用技巧，收获了一些代码教训，以及大量过程中的绝望惨叫和求亲问友，但结局是好的就是好的，55555555555
TL上新认识的一位朋友找到了决定性的问题还给写了详细步骤说明，我一定要单开一句以示感激之情！他的Blog是：CHENMU’S BLOG
整体流程
对比后用了文章内显示豆瓣条目的办法（因为对比而言这个办法链接更好写一些），总体是分三步：加入Meta，引用基于 jQuery 的功能代码，引用CSS。
……这不啥也没说嘛！！
加入META
Stack主题的位置在layouts\partials\head\head.html，随便找了个位置丢进去了
<meta name="referrer" content="never">
引用JS
位置在layouts\partials\footer\custom.html，将文章中的代码以<script>标签对包裹然后塞进去。需要注意的两点是Stack主题没有事先引用jQuery库，所以需要在前面先加一句jquery库的CDN引用，可以用jQuery加速这个链接的，也可以用猫云提供的加速
之后还要对源代码进行一点修改，首先源代码里给的API似乎已经不能用了，找了下文中提到的牧风API，似乎是这个？布克牧为同时也是一个豆瓣标记平台，沉目给的是这个CDN里的豆瓣图书电影条目部分
暂时还没搞明白API这块怎么后期维护修改，先记在这里。
另外的修改是作者提供的JS中一部分和Stack主题并不匹配，需要修改$(".post-content a[href*='douban.com/subject/']").each(function ()，把.post-content修改成.article-content
<script>
jQuery(document).ready(function ($) {
//豆瓣图书电影条目
$(".article-content a[href*='douban.com/subject/']").each(function () {
var _this = $(this);
var str = _this.attr("href");
var db_reg = /^https\:\/\/(movie|book)\.douban\.com\/subject\/([0-9]+)\/?/;
if (db_reg.test(str)) {
var db_type = str.replace(db_reg, "$1");
var db_id = str.replace(db_reg, "$2").toString();
var db_api = "https://api.weajs.com/v1/";
if (db_type == 'movie') {
var ls_item = 'movie' + db_id;
var url = db_api + "movie/" + db_id + "/";
if (localStorage.getItem(ls_item) == null || localStorage.getItem(ls_item) == 'undefined') {
$.ajax({
url: url,
type: 'GET',
dataType: "json",
success: function (data) {
localStorage.setItem(ls_item, JSON.stringify(data));
moiveShow(_this, ls_item)
}
});
} else {
moiveShow(_this, ls_item)
}
} else if (db_type == 'book') {
var ls_item = 'book' + db_id;
var url = db_api + "book/" + db_id;
if (localStorage.getItem(ls_item) == null || localStorage.getItem(ls_item) == 'undefined') {
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function (data) {
localStorage.setItem('book' + db_id, JSON.stringify(data));
bookShow(_this, ls_item)
}
});
} else {
bookShow(_this, ls_item)
}
}
}
});
function moiveShow(_this, ls_item) {
var storage = localStorage.getItem(ls_item);
var data = JSON.parse(storage);
var str = _this.attr("href");
//console.log(data)
var db_star = Math.ceil(data.rating);
$("<div class='post-preview'><div class='post-preview--meta'><div class='post-preview--middle'><h4 class='post-preview--title'><a target='_blank' href='" + str + "'>《" + data.title + "》</a></h4><div class='rating'><div class='rating-star allstar" + db_star + "'></div><div class='rating-average'>" + data.rating + "</div></div><time class='post-preview--date'>导演：" + data.directors + " / 类型：" + data.genres + " / " + data.pubdate + "</time><section style='max-height:75px;overflow:hidden;' class='post-preview--excerpt'>" + data.intro + "</section></div></div><img loading='lazy' class='post-preview--image' src=" + data.cover + "></div>").replaceAll(_this);
}
function bookShow(_this, ls_item) {
var storage = localStorage.getItem(ls_item);
var data = JSON.parse(storage);
var str = _this.attr("href");
///console.log(data)
var db_star = Math.ceil(data.rating);
$("<div class='post-preview'><div class='post-preview--meta'><div class='post-preview--middle'><h4 class='post-preview--title'><a target='_blank' href='" + str + "'>《" + data.title + "》</a></h4><div class='rating'><div class='rating-star allstar" + db_star + "'></div><div class='rating-average'>" + data.rating + "</div></div><time class='post-preview--date'>作者：" + data.author + " </time><section style='max-height:75px;overflow:hidden;' class='post-preview--excerpt'>" + data.intro + "</section></div></div><img loading='lazy' class='post-preview--image' src=" + data.cover + "></div>").replaceAll(_this);
}
});
</script>
引入CSS
CSS放在了layouts\partials\head\custom.html的位置。
作者给的CSS是压缩过的，随便搜了一个CSS解压工具解压看了一下，加深了卡片阴影效果，另外如果直接用这个CSS，书目/电影标题前的样式会和文章标题样式一样有一条竖线，需要在post-preview--title的位置把它删掉，我是加了句--heading-border-size: 0;
<style>
.post-preview{max-width:780px;height:210px;margin:1em auto;position:relative;display:flex;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.25);}.post-preview--meta{width:75%;padding:25px;overflow:hidden;}.post-preview--middle {line-height:28px;}.post-preview--title {font-size:18px;margin:0!important;--heading-border-size: 0;}.post-preview--title a{text-decoration:none;}.post-preview--date{font-size:14px;color:#999;}.post-preview--excerpt{font-size:14px;line-height:1.825;}.post-preview--excerpt p{margin-bottom:0;} .post-preview--image {height:210px!important;width:auto;float:right;border-top-right-radius: 2px!important;border-bottom-right-radius:2px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;}
@media (max-width:550px) {.post-preview {width:95%;}.post-preview--excerpt{display:none;}.post-preview--middle {line-height:19px;}}
.rating{display:block;line-height:15px;}.rating-star{display:inline-block;width:75px;height:15px;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAClCAYAAAAUAAAYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5xJREFUeNrs3T9rFEEcxvG7qEQIglaCICKkin9AUEtBKxU7wS61VlYivgWj70TtNFj5BqzE7qxEWwsxKIoYn4UtluFmbm8nczvzm+/BjxyuDwNzu3uXD0+46f7LC5PA45Hm+WTYw1x2LRDc0jzTXB+wqMlsaLPutz8fDFjYZHYauAz3NBvt83XNnyUWNpn1nVm3OsHmsb3EomazzZnVXKMPNcc0xzUnNKc0Rzv/77fms+Z7O3vt9b1eU7bZrNN68l5zcolX4ofmsuZXTdnmMvyi2dR86Bmcac62P6vKrnVubpc0bxYE32nOab45N8YqsvPeDfcD4SOav4HjprPuu+H5BTt9LXDMfNbdLPfT678Fx6vKupt1o/O8+R3pkOaJ5/iktqx7z/qp+aq5q/nY+fczmheaK03Gs7D5rLtZdzSvA6/Ebc2u55j57HQB0TzW7AzkjiKzny6+2hlKNE8juMNcFqKBaIZndRlCNBBNgmx7ZkE0fbLtZkE0EA1EM17WuQwhGogGooFoss6296y52cNO+J6HLJoPaFdbsvA9zGerIxrPh85eWYgGooFoDiQbuAxp0UA0EVmdWbRo+ma1WbRoIBqIZtzsnHdDWjQQDUQD0WSbde5ZS2UhmtqJJtSEiVkXooFoIJre2VATJmZdiKZ2ogk1YSb8oVMvDeUPnSAaiCaPJkzMuhANRAPRQDQpsqEmTMy6EI11oolpwkA0EA1EcyDZmCYMRAPR+LMxTZjqiCamCQPRQDQQzehNGIgGooFoIJpVZ2OaMBBN7USTqgkD0UA0EE3vbKomDERTO9GkasKYJJpUTRiIBqKBaEZvwkA0EA1EA9GkyKZqwkA01olmrCYMRAPRQDR9LkO+0QmiKbAJUyTRjNWEgWggGohm9CYMRAPRQDQQzZDsWE0YiMYC0eTYhIFoIJrKiCbHJgxEY4FocmzCZEs0OTZhIBqIpjKiybEJA9FANBANROPL5tiEgWhKIJoSmzAQDURjjGhKbMJANCUQTYlNmNGIpsQmDEQD0RgjmhKbMBANRAPR1Es0JTZhIJpciMZaEwaigWgKJBprTRiIJheisdaESUo01powEA1EUyDRWGvCQDQQDURjm2isNWEgmlURzWw2q4pZIBqIJkOiCVyGJpkFolkV0ejMMvel28mIRptl7ku3IRqIpjCimfNuaJpZIBqIBqIpm2ice5Z5ZonJupvVkMRu4JW4qXnrOWY++1+AAQBw9BJSCTeN9wAAAABJRU5ErkJggg==);overflow:hidden;}.allstar10{background-position:0px 0px;}.allstar9{background-position:0px -15px;}.allstar8{background-position:0px -30px;}.allstar7{background-position:0px -45px;}.allstar6{background-position:0px -60px;}.allstar5{background-position:0px -75px;}.allstar4{background-position:0px -90px;}.allstar3{background-position:0px -105px;}.allstar2{background-position:0px -120px;}.allstar1{background-position:0px -135px;}.allstar0{background-position:0px -150px;}.rating-average{color:#777;display:inline-block;font-size:13px;margin-left:10px;}
</style>
最终效果
<https://book.douban.com/subject/33408247/>
https://book.douban.com/subject/33408247/
遇到的问题
似乎有一部分数据是这个API无法读取的
比如https://book.douban.com/subject/5423546/ ← 汤岛之恋
https://book.douban.com/subject/35254283/ ← 法度与人心
访问接口无法正常返回值，F12查看Network，5423546和35254283都显示标红404，暂时不知道怎么解决……
参考链接
另外找了一些在Blog里加入Shortcodes的文章，万一之后有用呢
在 Hugo 博客上实践 Shortcodes 短代码, 太强大了
额外收获