Lỗi
Nếu truy cập vào trang bài viết từ trang chủ, khi nhấp vào nút QR sẽ không hiển thị đúng mã QR, thay vào đó là lỗi JavaScript. Tuy nhiên, sau khi làm mới trang thì vấn đề này không còn xảy ra. Hiện tại vẫn chưa tìm được giải pháp hoàn chỉnh. Rất mong các chuyên gia có thể giúp đỡ.
Lỗi đã được sửa chữa, xem thêm trong bài viết “Thêm chức năng chia sẻ QQ Zone và sửa cách tạo mã QR WeChat”.
Nội dung chính
Trong vài ngày qua, mình228kbet không có tâm trạng để viết truyện, nên quyết định tinh chỉnh lại blog một chút. Thực ra mình rất thích bố cục của blog Thu Sơ, bao gồm cả blog cùng chủ đề mà mình từng tạo trước đây - Sao Xing (đã xóa). Tuy nhiên, loại blog này chỉ phù hợp cho những người viết nội dung gốc, không phù hợp với kiểu “thô” như mình, nên mình vẫn đang sử dụng giao diện hiện tại. Mình đã lâu muốn thêm chức năng chia sẻ bằng mã QR và Weibo vào cuối bài viết nhưng vì không hiểu code nên không thể thực hiện được. Sau nhiều lần nghiên cứu và làm hỏng blog (khoảng N lần), cuối cùng mình cũng đã thành công, có lẽ vậy. Thông qua mã QR, bạn có thể quét trực tiếp bằng WeChat hoặc QQ để chia sẻ liên kết; Nhấn nút Weibo có thể chia sẻ trực tiếp lên Weibo. Vì vậy, mình muốn chia sẻ phương pháp này cho những ai cần.
PHP123win city
<div class="share"><a title="Nhận mã QR" class="icon-wechat" href="javascript:;"></a><!----><div id="qr"></div></div>
CSS
.share a {display: inline-block;color: #666;margin-right: 15px}.share a:hover {color: #f55}.share {position: relative;text-align: right;font-size: 25px;}.icon-wechat:before {content: "\e607";}.icon-weibo:before {content: "\e608";}#qr {z-index: 10;display: none;position: absolute;background: #fff;right: 10%;top: -290%;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px}@font-face { font-weight:400;font-style:normal;font-family:icomoon;src:url(data:application/x-font-ttf;charset=utf-8;base64,...) format('truetype');}[class*=" icon-"],[class^=icon-] { text-transform: none; font-weight: 400; font-style: normal; font-variant: normal; font-family: icomoon; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
CSS tự điều chỉnh
@media(max-width:880px){#qr {z-index: 10;display: none;position: absolute;background: #fff;right: 22%;top: -290%;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px}}
JS
$(function(a) { a("body").on("click", function(b) { var c = a(b.target).attr("class") || "", d = a(b.target).attr("rel") || ""; if (c || d) switch (!0) { case - 1 != c.indexOf("icon-wechat") : a(".icon-wechat").hasClass("tg") ? a("#qr").toggle() : (a(".icon-wechat").addClass("tg"), a("#qr").qrcode({ width: 128, height: 128, text: location.href }).toggle()); } });});
JS bổ sung
Đối với các liên kết đến từ email bình luận, URL sẽ chứa phần hậu tố bình luận. Nếu quét mã QR lúc này sẽ dẫn thẳng đến vị trí bình luận. Theo gợi ý từ anh tài Gray Wolf, cần trích xuất URL của bài viết thay vì URL trong thanh địa chỉ, nên đoạn code đã được chỉnh sửa.
text: location.href // Cần chỉnh sửa thành text: $("link[rel=canonical]").attr("href")
Gọi JS
<script type='text/javascript' src=".../jquery.qrcode.min.js"></script>
Nguồn code:1133win Uy Tín Không GitHub