1
0

page-bilibiliFavList.php 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <?php
  2. /**
  3. Template Name: 哔哩哔哩收藏模板
  4. */
  5. get_header();
  6. ?>
  7. <meta name="referrer" content="same-origin">
  8. <style>
  9. .comments{display: none}
  10. .site-content{max-width:1280px}
  11. </style>
  12. </head>
  13. <?php while(have_posts()) : the_post(); ?>
  14. <?php if(!iro_opt('patternimg') || !get_post_thumbnail_id(get_the_ID())) { ?>
  15. <span class="linkss-title"><?php the_title();?></span>
  16. <?php } ?>
  17. <article <?php post_class("post-item"); ?>>
  18. <?php the_content(); ?>
  19. <?php if (iro_opt('bilibili_id') ):?>
  20. <section class="fav-list">
  21. <?php
  22. $bgm = new \Sakura\API\BilibiliFavList();
  23. echo $bgm->get_folders();
  24. ?>
  25. <?php else: ?>
  26. <div class="row">
  27. <p> <?php _e("Please fill in the Bilibili UID in Sakura Options.","sakura"); ?></p>
  28. </div>
  29. <?php endif; ?>
  30. </section>
  31. <script>
  32. let expandButton = document.querySelectorAll('.expand-button');
  33. expandButton.forEach(
  34. function(elem) {
  35. elem.addEventListener('click', function() {
  36. let folder = elem.closest('.folder');
  37. let folderStyle = getComputedStyle(folder);
  38. if (folderStyle.maxHeight == '200px'){
  39. let folderContent = folder.querySelector(".folder-content");
  40. folder.style.maxHeight = 200 + folderContent.scrollHeight + 'px';
  41. } else {
  42. folder.style.maxHeight = '200px';
  43. }
  44. }, true);
  45. }
  46. );
  47. window.addEventListener('resize', function() {
  48. setTimeout( () => {
  49. expandButton.forEach(
  50. function(elem) {
  51. let folder = elem.closest('.folder');
  52. let folderStyle = getComputedStyle(folder);
  53. if (folderStyle.maxHeight != '200px'){
  54. let folderContent = folder.querySelector(".folder-content");
  55. folder.style.maxHeight = 200 + folderContent.scrollHeight + 'px';
  56. }
  57. }
  58. );
  59. }, 500);
  60. }, true);
  61. document.addEventListener('click',function(e){
  62. if(e.target && e.target.classList.contains('load-more')){
  63. let elem = e.target;
  64. let href = elem.getAttribute('data-href') + "&_wpnonce=" + _iro.nonce;
  65. fetch(href, {method: 'POST'})
  66. .then((response) => {
  67. return response.json();
  68. })
  69. .then((html) => {
  70. var htmlObject = document.createElement('div');
  71. htmlObject.innerHTML = html;
  72. while (htmlObject.childNodes.length > 0) {
  73. elem.parentNode.appendChild(htmlObject.childNodes[0]);
  74. }
  75. let folder = elem.closest('.folder');
  76. let folderContent = folder.querySelector(".folder-content");
  77. folder.style.maxHeight = 200 + folderContent.scrollHeight + 'px';
  78. elem.remove();
  79. });
  80. }
  81. });
  82. </script>
  83. </article>
  84. <?php endwhile; ?>
  85. <style>
  86. .fav-list{
  87. margin: 0 -10px -20px;
  88. flex-wrap: wrap;
  89. padding: 1rem 3%;
  90. justify-content: center;
  91. }
  92. .folder{
  93. border: 1px solid gray;
  94. overflow: hidden;
  95. transition: max-height .5s ease-out;
  96. max-height: 200px;
  97. border-radius: 10px;
  98. color: #fff;
  99. box-shadow: 0 0 10px rgb(0 0 0 / 10%), 0 5px 20px rgb(0 0 0 / 20%);
  100. }
  101. .folder-img{
  102. height: 200px;
  103. object-fit: cover;
  104. width: 100%;
  105. }
  106. .folder-top{
  107. height: 200px;
  108. display: block;
  109. position: relative;
  110. }
  111. .folder-detail{
  112. height: 100%;
  113. top: 0;
  114. left: 0;
  115. right: 0;
  116. position: absolute;
  117. text-align: center;
  118. background: rgba(0, 0, 0, .5);
  119. }
  120. .expand-button{
  121. background-color: transparent;
  122. height: 50px;
  123. align-self: center;
  124. font-size: 16px;
  125. border: 0;
  126. outline: 0;
  127. background-color: rgba(255, 255, 255, 0.6);
  128. color: var(--theme-skin,#505050);
  129. padding: 15px;
  130. border-radius: var(--style_menu_radius,12px);
  131. box-shadow: 0 0 2px 0 rgb(0 0 0 / 12%), 0 2px 2px 0 rgb(0 0 0 / 24%);
  132. transition: all 0.8s ease !important;
  133. }
  134. .folder hr{
  135. margin: 0;
  136. background: grey;
  137. }
  138. .folder-content{
  139. padding: 5px;
  140. display: flex;
  141. justify-content: center;
  142. flex-wrap: wrap;
  143. }
  144. .column{
  145. margin-bottom: 20px;
  146. padding: 0 5px;
  147. transition: .5s;
  148. max-width: 100%;
  149. flex: 0 0 100%;
  150. }
  151. .folder-item{
  152. border: 1px solid gray;
  153. height: 0;
  154. color: #fff;
  155. display: block;
  156. overflow: hidden;
  157. text-align: center;
  158. position: relative;
  159. padding-bottom: 60%;
  160. box-shadow: 0 0 10px rgb(0 0 0 / 10%), 0 5px 20px rgb(0 0 0 / 20%);
  161. border-radius: 10px;
  162. }
  163. .item-img{
  164. width: 100%;
  165. user-select: none;
  166. object-fit: cover;
  167. transition: filter 2s;
  168. }
  169. .item-info{
  170. height: 40%;
  171. top: 0;
  172. left: 0;
  173. right: 0;
  174. padding: 10px;
  175. position: absolute;
  176. background: rgba(0, 0, 0, .5);
  177. transition: transform 1s;
  178. transform: translateY(150%);
  179. }
  180. .item-title{
  181. overflow: hidden;
  182. white-space: nowrap;
  183. text-overflow: ellipsis;
  184. margin-top: 0;
  185. }
  186. .item-intro{
  187. overflow: hidden;
  188. white-space: nowrap;
  189. text-overflow: ellipsis;
  190. }
  191. .load-more{
  192. flex: 0 0 100%;
  193. text-align: center;
  194. padding-top: 5px;
  195. padding-bottom: 5px;
  196. }
  197. @media screen and (min-width: 600px){
  198. .folder-img{
  199. height: 200px;
  200. object-fit: cover;
  201. width: auto;
  202. }
  203. .folder-detail{
  204. height: 200px;
  205. display: flex;
  206. flex-direction: column;
  207. justify-content: center;
  208. position: inherit;
  209. align-self: center;
  210. width: 100%;
  211. text-align: center;
  212. background: rgba(0, 0, 0, .3);
  213. }
  214. .folder-top{
  215. display: flex;
  216. position: relative;
  217. }
  218. .folder-content{
  219. padding: 15px;
  220. }
  221. .column{
  222. max-width: 33.33333%;
  223. flex: 0 0 33.33333%;
  224. }
  225. .load-more{
  226. padding-top: 10px;
  227. padding-bottom: 10px;
  228. }
  229. }
  230. body.dark .expand-button {
  231. background-color: rgba(38, 38, 38, 0.6);
  232. color: var(--theme-skin-dark);
  233. }
  234. </style>
  235. <?php
  236. get_footer();