二维码生成

themes/yilia/layout/_partial/post/share.ejs

@@ -45,8 +45,8 @@
 <div class="page-modal wx-share js-wx-box">
     <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
     <p>扫一扫，分享到微信</p>
-    <div class="wx-qrcode">
+    <div class="wx-qrcode" title="微信分享二维码">
-      <img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//pan.baidu.com/share/qrcode?url=' + sUrl  %>" alt="微信分享二维码">
+      <canvas class="qrcode-canvas" style="height:150px;width:150px;"></canvas>
     </div>
 </div>
 

themes/yilia/layout/_partial/script.ejs

@@ -1 +1 @@
-<%- js('js/mobile.97141e5b049f95a96735.js') %> <%- js('js/slider.ef2aa12e396cdf8555f9.js') %> <%- js('js/comment.e65925a3c976563ac8b7.js') %> <%- js('js/main.47daecb9041cfca058ea.js') %>
+<%- js('js/mobile.44a79d093b6d7a9f2447.js') %> <%- js('js/slider.c7ad1be7b3e77f46d591.js') %> <%- js('js/comment.338317bbe9143dcbbaa4.js') %> <%- js('js/main.54ee59c8c0c2b2757602.js') %>

themes/yilia/package-lock.json

@@ -6138,6 +6138,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrious": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz",
+      "integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g=="
+    },
     "qs": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",

themes/yilia/package.json

@@ -45,7 +45,8 @@
     "es6-promise": "^4.0.5",
     "file-loader": "^0.9.0",
     "js-cookie": "^2.1.3",
-    "leancloud-storage": "^3.7.3"
+    "leancloud-storage": "^3.7.3",
+    "qrious": "^4.0.2"
   },
   "config": {
     "commitizen": {

themes/yilia/source-src/css/article-inner.scss

@@ -85,11 +85,11 @@
     margin-top: 10px;
   }
   p code,li code{
-    padding: 1px 3px;
+    padding: 3px 4px;
     margin: 0 3px;
-    background: #ddd;
+    background: #f5ecee;
-    border: 1px solid #ccc;
+    color: #c7254e;
-    font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;
+    font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New","Microsoft YaHei";
     word-wrap: break-word;
     font-size: 14px;
   }

themes/yilia/source-src/css/share.scss

@@ -73,8 +73,8 @@
 
     .close {
         position: absolute;
-        right: 15px;
+        right: 10px;
-        top: 15px;
+        top: 10px;
         color: rgba(0, 0, 0, .2);
         font-size: 16px;
         line-height: 20px;

themes/yilia/source-src/js/share.js

@@ -1,5 +1,6 @@
 import addClass from 'dom101/add-class'
 import removeClass from 'dom101/remove-class'
+import QRious from 'qrious'
 
 function generate(url, opts) {
   var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl))
@@ -10,9 +11,17 @@ function generate(url, opts) {
   window.open(url);
 }
 
+var qrcodeInit = false
 function showWX() {
   let $wx = document.querySelector('.js-wx-box')
   let $mask = document.querySelector('.mask')
+  if(!qrcodeInit) {
+    new QRious({
+      element: document.querySelector('.qrcode-canvas'),
+      value: location.href
+    });
+    qrcodeInit = true
+  }
   addClass($wx, 'in')
   addClass($wx, 'ready')
   addClass($mask, 'in')
@@ -68,8 +77,8 @@ let init = function() {
       })
     }
   })
-  document.querySelector('.mask').onclick = hideWX
+  document.querySelector('.mask').addEventListener('click', hideWX)
-  document.querySelector('.js-modal-close').onclick = hideWX
+  document.querySelector('.js-modal-close').addEventListener('click', hideWX)
 }
 
 export default { init }