qrcode api

_config.yml

@@ -57,7 +57,7 @@ article:
   # 文章许可协议
   license: '本文采用 [署名-非商业性使用-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。'
   # 分享
-  share: # [weibo, email, link] # wechat 需要安装二维码插件： npm i hexo-helper-qrcode
+  share: # [wechat, weibo, email, link]
   # 相关文章，需要安装插件 (for layout: post)
   # npm i hexo-related-popular-posts
   related_posts:

layout/_partial/main/article/references.ejs

@@ -87,8 +87,7 @@ function layoutDiv() {
       el += '</div>';
       if (theme.article.share.includes('wechat')) {
         el += '<div class="qrcode" id="qrcode-wechat" style="display:none">';
-        const src = qrcode(url,{margin:2,size:8});
-        el += '<img src="' + src + '"/>';
+        el += '<img no-lazy src="https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=' + url + '"/>';
         el += '</div>';
       }
       el += '</div>';

layout/index.ejs

@@ -12,7 +12,10 @@ if (page.title && page.wiki) {
 
 function layout_post_card(type, post, content) {
   var el = '';
-  el += '<a class="post-card ' + type + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';
+  if (post.post == undefined) {
+    post.post = 'article';
+  }
+  el += '<a class="post-card ' + type + ' ' + post.post + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';
   el += '<article class="excerpt md">';
   el += content;
   el += '</article></a>';

source/css/_layout/partial/article_footer.styl

@@ -48,6 +48,9 @@
 .md .article-footer .qrcode
   margin: 2rem auto 1rem
   width: 128px
+  padding: 4px
+  background: white
+  border-radius: 4px
   img
     object-fit: contain
 

source/css/_layout/post_list.styl

@@ -82,6 +82,19 @@
         height: 200px
       &:not(.lazyload)
         trans1: transform 1s
+.post-list .post-card.post.photo .post-cover img
+  height: 400px
+  @media screen and (max-width: 900px)
+    height: 320px
+  @media screen and (max-width: $device-tablet)
+    height: 400px
+  @media screen and (max-width: $device-mobile)
+    height: 320px
+  @media screen and (max-width: $device-mobile-l)
+    height: 280px
+  @media screen and (max-width: $device-mobile-m)
+    height: 240px
+
 .post-list .post-card.post:hover
   .post-title
     color: $color-hover