From d3254de43781a6561808164f9c8925d4d73e919f Mon Sep 17 00:00:00 2001
From: zeekling <lingzhaohui@zeekling.cn>
Date: Tue, 6 Oct 2020 22:05:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bolo-fantastic/article-list.ftl |   8 +-
 bolo-fantastic/article.ftl      |   4 +-
 bolo-fantastic/footer.ftl       |  12 +-
 bolo-fantastic/js/lazyload.js   | 320 ++++++++++++++++++++++++++++++++
 bolo-fantastic/side-right.ftl   |   3 +-
 bolo-fantastic/side.ftl         |   4 +-
 6 files changed, 337 insertions(+), 14 deletions(-)
 create mode 100644 bolo-fantastic/js/lazyload.js

diff --git a/bolo-fantastic/article-list.ftl b/bolo-fantastic/article-list.ftl
index 19cf830..accbdf1 100644
--- a/bolo-fantastic/article-list.ftl
+++ b/bolo-fantastic/article-list.ftl
@@ -33,7 +33,9 @@
                             <div class="blog-slider__item swiper-slide">
 							 <div class="blog-slider__img">
 							    <a href="${article.articlePermalink}">
-								    <img class="thumbnail" src="${adminUser.userAvatar!}" data-src="${article.articleImg1URL}" alt="${article.articleTitle!}"  referrerpolicy="origin">
+								    <img class="thumbnail" src="${adminUser.userAvatar!}" height="250" width="150"
+									data-src="${article.articleImg1URL}" alt="${article.articleTitle!}"
+									referrerpolicy="origin">
 								</a>
 						     </div>
                                 <div class="blog-slider__content">
@@ -65,7 +67,9 @@
                     <div class="card">
 						 <div class="card-image">
 						   <a href="${article.articlePermalink}">
-						     <img class="thumbnail" src="${adminUser.userAvatar!}" data-src="${article.articleImg1URL}" alt="${article.articleTitle!}" referrerpolicy="origin">
+						     <img class="thumbnail" src="${adminUser.userAvatar!}" height="250" width="150"
+							 data-src="${article.articleImg1URL}" alt="${article.articleTitle!}"
+							 referrerpolicy="origin">
 						   </a>
 						 </div>
                         <div class="card-content article " id="card-content" style="width: 100%">
diff --git a/bolo-fantastic/article.ftl b/bolo-fantastic/article.ftl
index b495ac0..c086845 100644
--- a/bolo-fantastic/article.ftl
+++ b/bolo-fantastic/article.ftl
@@ -187,7 +187,7 @@
                                                 }, 1000)
                                             }
                                         }, 3000)
-                                    })**/
+                                    })
 			$(document).ready(function(){
 				var content = $("#post-article");
 				var img_url = content.attr("data-img");
@@ -195,7 +195,7 @@
 					var img = content.find("p a").get(0);
 					img.remove();
 				}
-			})
+			})**/
             </script>
         </body>
     </html>
diff --git a/bolo-fantastic/footer.ftl b/bolo-fantastic/footer.ftl
index 26d41db..ab4a5d9 100644
--- a/bolo-fantastic/footer.ftl
+++ b/bolo-fantastic/footer.ftl
@@ -31,8 +31,6 @@
 					<br>
                     Powered by <a href="https://github.com/AdlerED/bolo-solo" target="_blank">Bolo</a>
 					Theme ${skinDirName}
-					<sup>[<a href="https://git.zeekling.cn/zeekling/bolo-skins/src/branch/master/bolo-fantastic"
-					target="_blank">ref</a>]</sup>
             </div>
                 <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
 					<#--
@@ -49,6 +47,7 @@
 <script src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
 <script src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
 <script src="${staticServePath}/skins/${skinDirName}/js/layer.js?${staticResourceVersion}"></script>
+<script src="${staticServePath}/skins/${skinDirName}/js/lazyload.js?${staticResourceVersion}"></script>
 <script type="text/javascript" >
 
 $(document).ready(function(){
@@ -66,7 +65,7 @@ $(document).ready(function(){
 		if (ctrlDown && (e.keyCode == cKey)) {
 			layer.open({
 				title:"${blogTitle!}友情提示",
-				content:"您复制了本站内容,转载请注明来源。",
+				content:"您复制了本站内容,转载请注明来源:<a href=\"\">${blogTitle!}</a>。",
 				anim:4
 			});
 		}
@@ -75,7 +74,7 @@ $(document).ready(function(){
 	document.oncopy = function(){
 		layer.open({
 			title:"${blogTitle!}友情提示",
-			content:"您复制了本站内容,转载请注明来源。",
+			content:"您复制了本站内容,转载请注明来源:<a href=\"\">${blogTitle!}</a>。",
 			anim:4
 		});
 	}
@@ -84,10 +83,7 @@ $(document).ready(function(){
 		var img = $(this).find("img");
 		var w = img.width;
 		var h = img.height;
-		var content = $("#post-article");
-		var img_th = content.attr("data-img");
 	    $(this).attr("href","javascript:void(0)");
-
 	});
 	$(".gallery-item").on("click",function(){
         var img = $(this).find("img");
@@ -100,7 +96,9 @@ $(document).ready(function(){
 
 	$(".thumbnail").each(function(){
 		var src = $(this).attr("data-src");
+		$(this).attr("data-original", src);
 		$(this).attr("src", src);
+		$(this).lazyload();
 	});
 });
 
diff --git a/bolo-fantastic/js/lazyload.js b/bolo-fantastic/js/lazyload.js
new file mode 100644
index 0000000..ac19c2e
--- /dev/null
+++ b/bolo-fantastic/js/lazyload.js
@@ -0,0 +1,320 @@
+/*!
+ * An jQuery | zepto plugin for lazy loading images.
+ * author -> jieyou
+ * see https://github.com/jieyou/lazyload
+ * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD)
+ * use component's throttle https://github.com/component/throttle (MIT)
+ */
+;(function(factory){
+    if(typeof define === 'function' && define.amd){ // AMD
+        // you may need to change `define([------>'jquery'<------], factory)` 
+        // if you use zepto, change it rely name, such as `define(['zepto'], factory)`
+        define(['jquery'], factory)
+        // define(['zepto'], factory)
+    }else{ // Global
+        factory(window.jQuery || window.Zepto)
+    }
+})(function($,undefined){
+    var w = window,
+        $window = $(w),
+        defaultOptions = {
+            threshold                   : 0,
+            failure_limit               : 0,
+            event                       : 'scroll',
+            effect                      : 'show',
+            effect_params               : null,
+            container                   : w,
+            data_attribute              : 'original',
+            data_srcset_attribute       : 'original-srcset',
+            skip_invisible              : true,
+            appear                      : emptyFn,
+            load                        : emptyFn,
+            vertical_only               : false,
+            check_appear_throttle_time  : 300,
+            url_rewriter_fn             : emptyFn,
+            no_fake_img_loader          : false,
+            placeholder_data_img        : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
+            // for IE6\7 that does not support data image
+            placeholder_real_img        : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png'
+            // todo : 将某些属性用global来配置，而不是每次在$(selector).lazyload({})内配置
+        },
+        type // function
+
+    function emptyFn(){}
+
+    type = (function(){
+        var object_prototype_toString = Object.prototype.toString
+        return function(obj){
+            // todo: compare the speeds of replace string twice or replace a regExp
+            return object_prototype_toString.call(obj).replace('[object ','').replace(']','')
+        }
+    })()
+
+    function belowthefold($element, options){
+        var fold
+        if(options._$container == $window){
+            fold = ('innerHeight' in w ? w.innerHeight : $window.height()) + $window.scrollTop()
+        }else{
+            fold = options._$container.offset().top + options._$container.height()
+        }
+        return fold <= $element.offset().top - options.threshold
+    }
+
+    function rightoffold($element, options){
+        var fold
+        if(options._$container == $window){
+            // Zepto do not support `$window.scrollLeft()` yet.
+            fold = $window.width() + ($.fn.scrollLeft?$window.scrollLeft():w.pageXOffset)
+        }else{
+            fold = options._$container.offset().left + options._$container.width()
+        }
+        return fold <= $element.offset().left - options.threshold
+    }
+
+    function abovethetop($element, options){
+        var fold
+        if(options._$container == $window){
+            fold = $window.scrollTop()
+        }else{
+            fold = options._$container.offset().top
+        }
+        // console.log('abovethetop fold '+ fold)
+        // console.log('abovethetop $element.height() '+ $element.height())
+        return fold >= $element.offset().top + options.threshold  + $element.height()
+    }
+
+    function leftofbegin($element, options){
+        var fold
+        if(options._$container == $window){
+            // Zepto do not support `$window.scrollLeft()` yet.
+            fold = $.fn.scrollLeft?$window.scrollLeft():w.pageXOffset
+        }else{
+            fold = options._$container.offset().left
+        }
+        return fold >= $element.offset().left + options.threshold + $element.width()
+    }
+
+    function checkAppear($elements, options){
+        var counter = 0
+        $elements.each(function(i,e){
+            var $element = $elements.eq(i)
+            if(($element.width() <= 0 && $element.height() <= 0) || $element.css('display') === 'none'){
+                return
+            }
+            function appear(){
+                $element.trigger('_lazyload_appear')
+                // if we found an image we'll load, reset the counter 
+                counter = 0
+            }
+            // If vertical_only is set to true, only check the vertical to decide appear or not
+            // In most situations, page can only scroll vertically, set vertical_only to true will improve performance
+            if(options.vertical_only){
+                if(abovethetop($element, options)){
+                    // Nothing. 
+                }else if(!belowthefold($element, options)){
+                    appear()
+                }else{
+                    if(++counter > options.failure_limit){
+                        return false
+                    }
+                }
+            }else{
+                if(abovethetop($element, options) || leftofbegin($element, options)){
+                    // Nothing. 
+                }else if(!belowthefold($element, options) && !rightoffold($element, options)){
+                    appear()
+                }else{
+                    if(++counter > options.failure_limit){
+                        return false
+                    }
+                }
+            }
+        })
+    }
+
+    // Remove image from array so it is not looped next time. 
+    function getUnloadElements($elements){
+        return $elements.filter(function(i,e){
+            return !$elements.eq(i)._lazyload_loadStarted
+        })
+    }
+
+    // throttle : https://github.com/component/throttle , MIT License
+    function throttle (func, wait) {
+        var ctx, args, rtn, timeoutID // caching
+        var last = 0
+
+        return function throttled () {
+            ctx = this
+            args = arguments
+            var delta = new Date() - last
+            if (!timeoutID)
+                if (delta >= wait) call()
+                else timeoutID = setTimeout(call, wait - delta)
+            return rtn
+        }
+
+        function call () {
+            timeoutID = 0
+            last = +new Date()
+            rtn = func.apply(ctx, args)
+            ctx = null
+            args = null
+        }
+    }
+
+    if(!$.fn.hasOwnProperty('lazyload')){
+
+        $.fn.lazyload = function(options){
+            var $elements = this,
+                isScrollEvent,
+                isScrollTypeEvent,
+                throttleCheckAppear
+
+            if(!$.isPlainObject(options)){
+                options = {}
+            }
+
+            $.each(defaultOptions,function(k,v){
+                if($.inArray(k,['threshold','failure_limit','check_appear_throttle_time']) != -1){ // these params can be a string
+                    if(type(options[k]) == 'String'){
+                        options[k] = parseInt(options[k],10)
+                    }else{
+                        options[k] = v
+                    }
+                }else if(k == 'container'){ // options.container can be a seletor string \ dom \ jQuery object
+                    if(options.hasOwnProperty(k)){   
+                        if(options[k] == w || options[k] == document){
+                            options._$container = $window
+                        }else{
+                            options._$container = $(options[k])
+                        }
+                    }else{
+                        options._$container = $window
+                    }
+                    delete options.container
+                }else if(defaultOptions.hasOwnProperty(k) && (!options.hasOwnProperty(k) || (type(options[k]) != type(defaultOptions[k])))){
+                    options[k] = v
+                }
+            })
+
+            isScrollEvent = options.event == 'scroll'
+            throttleCheckAppear = options.check_appear_throttle_time == 0?
+                checkAppear
+                :throttle(checkAppear,options.check_appear_throttle_time)
+
+            // isScrollTypeEvent cantains custom scrollEvent . Such as 'scrollstart' & 'scrollstop'
+            // https://github.com/search?utf8=%E2%9C%93&q=scrollstart
+            isScrollTypeEvent = isScrollEvent || options.event == 'scrollstart' || options.event == 'scrollstop'
+
+            $elements.each(function(i,e){
+                var element = this,
+                    $element = $elements.eq(i),
+                    placeholderSrc = $element.attr('src'),
+                    originalSrcInAttr = $element.attr('data-'+options.data_attribute), // `data-original` attribute value
+                    originalSrc = options.url_rewriter_fn == emptyFn?
+                        originalSrcInAttr:
+                        options.url_rewriter_fn.call(element,$element,originalSrcInAttr),
+                    originalSrcset = $element.attr('data-'+options.data_srcset_attribute),
+                    isImg = $element.is('img')
+
+                if($element._lazyload_loadStarted == true || placeholderSrc == originalSrc){
+                    $element._lazyload_loadStarted = true
+                    $elements = getUnloadElements($elements)
+                    return
+                }
+
+                $element._lazyload_loadStarted = false
+
+                // If element is an img and no src attribute given, use placeholder. 
+                if(isImg && !placeholderSrc){
+                    // For browsers that do not support data image.
+                    $element.one('error',function(){ // `on` -> `one` : IE6 triggered twice error event sometimes
+                        $element.attr('src',options.placeholder_real_img)
+                    }).attr('src',options.placeholder_data_img)
+                }
+                
+                // When appear is triggered load original image. 
+                $element.one('_lazyload_appear',function(){
+                    var effectParamsIsArray = $.isArray(options.effect_params),
+                        effectIsNotImmediacyShow
+                    function loadFunc(){
+                        // In most situations, the effect is immediacy show, at this time there is no need to hide element first
+                        // Hide this element may cause css reflow, call it as less as possible
+                        if(effectIsNotImmediacyShow){
+                            // todo: opacity:0 for fadeIn effect
+                            $element.hide()
+                        }
+                        if(isImg){
+                            // attr srcset first
+                            if(originalSrcset){
+                                $element.attr('srcset', originalSrcset)
+                            }
+                            if(originalSrc){
+                                $element.attr('src', originalSrc)
+                            }
+                        }else{
+                            $element.css('background-image','url("' + originalSrc + '")')
+                        }
+                        if(effectIsNotImmediacyShow){
+                            $element[options.effect].apply($element,effectParamsIsArray?options.effect_params:[])
+                        }
+                        $elements = getUnloadElements($elements)
+                    }
+                    if(!$element._lazyload_loadStarted){
+                        effectIsNotImmediacyShow = (options.effect != 'show' && $.fn[options.effect] && (!options.effect_params || (effectParamsIsArray && options.effect_params.length == 0)))
+                        if(options.appear != emptyFn){
+                            options.appear.call(element, $element, $elements.length, options)
+                        }
+                        $element._lazyload_loadStarted = true
+                        if(options.no_fake_img_loader || originalSrcset){
+                            if(options.load != emptyFn){
+                                $element.one('load',function(){
+                                    options.load.call(element, $element, $elements.length, options)
+                                })
+                            }
+                            loadFunc()
+                        }else{
+                            $('<img />').one('load', function(){ // `on` -> `one` : IE6 triggered twice load event sometimes
+                                loadFunc()
+                                if(options.load != emptyFn){
+                                    options.load.call(element, $element, $elements.length, options)
+                                }
+                            }).attr('src',originalSrc)
+                        }
+                    }
+                })
+
+                // When wanted event is triggered load original image 
+                // by triggering appear.                              
+                if (!isScrollTypeEvent){
+                    $element.on(options.event, function(){
+                        if (!$element._lazyload_loadStarted){
+                            $element.trigger('_lazyload_appear')
+                        }
+                    })
+                }
+            })
+
+            // Fire one scroll event per scroll. Not one scroll event per image. 
+            if(isScrollTypeEvent){
+                options._$container.on(options.event, function(){
+                    throttleCheckAppear($elements, options)
+                })
+            }
+
+            // Check if something appears when window is resized. 
+            // Force initial check if images should appear when window is onload. 
+            $window.on('resize load', function(){
+                throttleCheckAppear($elements, options)
+            })
+
+            // Force initial check if images should appear. 
+            $(function(){
+                throttleCheckAppear($elements, options)
+            })
+            
+            return this
+        }
+    }
+})
\ No newline at end of file
diff --git a/bolo-fantastic/side-right.ftl b/bolo-fantastic/side-right.ftl
index 46a1d4f..6370e73 100644
--- a/bolo-fantastic/side-right.ftl
+++ b/bolo-fantastic/side-right.ftl
@@ -48,7 +48,8 @@
                 <#if article.articleImg1URL?? && article.articleImg1URL!=''>
                     <a href="${article.articlePermalink}" class="media-left">
                         <p class="image is-64x64">
-                            <img class="thumbnail" src="${adminUser.userAvatar!}" data-src="${article.articleImg1URL!}" alt="${article.articleTitle!}">
+                            <img class="thumbnail" src="${adminUser.userAvatar!}"width="48" height="48"
+							data-src="${article.articleImg1URL!}" alt="${article.articleTitle!}">
                         </p>
                     </a>
                 </#if>
diff --git a/bolo-fantastic/side.ftl b/bolo-fantastic/side.ftl
index 7bc46e2..9ea3625 100644
--- a/bolo-fantastic/side.ftl
+++ b/bolo-fantastic/side.ftl
@@ -25,8 +25,8 @@
                 <div class="level-item has-text-centered" style="flex-shrink: 1">
                     <div class="level">
                         <figure class="image is-64x64 has-mb-6 level-left" style="margin: 0 auto">
-                            <img class="is-rounded" src="${faviconURL}" alt="${blogTitle!}" style="padding: 2px;
-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);">
+                            <img class="is-rounded" src="${faviconURL}" alt="${blogTitle!}" height="48" width="48"
+							style="padding: 2px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);">
                         </figure>
                         <div class="level-right">
                             <div>