kirby-img : init image randomizer :)

_includes/custom-index-upper.html

@@ -6,9 +6,42 @@
   <article class="post">
     <center><h1> <span style="color:red;">U</span><span style="color:aquamarine">u</span><span style="color:deepskyblue">U</span><span style="color:indianred">W</span><span style="color:palegreen">w</span><span style="color:plum">U</span><span style="color:slateblue">P</span><span style="color:gold">O</span><span style="color:crimson">d</span> </h1></center>
     <br>
-    <center><img src="/assets/images/akira!.gif" alt="Akira!" width="225"/></center>
+    <center><img decoding="async" id="homepage-rand-img" src="/assets/images/index_rand/com_26.gif" alt="Akira!" width="300"/></center>
     <center><a style="color:darkmagenta;" href="/projects/">Projects</a> | <a style="color:firebrick;" href="/blog/">Blog</a> | <a style="color:maroon;" href="/p-p/">Source</a> | <a style="color:peru;" href="/about/">About</a></center>
-    <center><h2>On <span style="color:thistle">Git{}</span></s></h2></center>
+    <center><h2>On <span style="color:thistle">Git{}</span></h2></center>
     <center><h4><a href="https://github.com/minoplhy" target="_blank"><i class="svg-others github"></i></a> <a href="https://owu.se/p-p/minoplhy" target="_blank"><i class="svg-others gitea"></i></a> <a href="https://framagit.org/meeillo" target="_blank"><i class="svg-others framagit"></i></a> <a href="https://codeberg.org/DoulpaGllo" target="_blank"><i class="svg-others codeberg"></i></a></h4></center>
   </article>
 </div>
+
+<script src="{{ site.baseurl }}/assets/js/kirby-img.js"></script>
+<script>
+  const imgArray = [
+    '/assets/images/index_rand/com_1.gif', 
+    '/assets/images/index_rand/com_2.gif', 
+    '/assets/images/index_rand/com_3.gif', 
+    '/assets/images/index_rand/com_4.gif', 
+    '/assets/images/index_rand/com_5.gif', 
+    '/assets/images/index_rand/com_6.gif', 
+    '/assets/images/index_rand/com_7.gif', 
+    '/assets/images/index_rand/com_8.gif', 
+    '/assets/images/index_rand/com_9.gif', 
+    '/assets/images/index_rand/com_10.gif', 
+    '/assets/images/index_rand/com_11.gif', 
+    '/assets/images/index_rand/com_12.gif', 
+    '/assets/images/index_rand/com_13.gif', 
+    '/assets/images/index_rand/com_14.gif', 
+    '/assets/images/index_rand/com_15.gif', 
+    '/assets/images/index_rand/com_16.gif', 
+    '/assets/images/index_rand/com_17.gif', 
+    '/assets/images/index_rand/com_18.gif', 
+    '/assets/images/index_rand/com_19.gif', 
+    '/assets/images/index_rand/com_20.gif', 
+    '/assets/images/index_rand/com_21.gif', 
+    '/assets/images/index_rand/com_22.gif', 
+    '/assets/images/index_rand/com_23.gif', 
+    '/assets/images/index_rand/com_24.gif', 
+    '/assets/images/index_rand/com_25.gif', 
+    '/assets/images/index_rand/com_26.gif'
+  ];
+  document.onload = randomImageBroker('homepage-rand-img', imgArray);
+</script>

_pages/blog.md

@@ -4,9 +4,16 @@ title: Blog
 permalink: /blog/
 ---
 
-## <img src="/assets/images/toshino.gif" alt="Toshino Kyoko!" width="100"/> Yaw! Sometimes I write a blog, though mostly not.
-> <code style="color:black;">Blah, Please don't expect any informative or technical blogs. <img src="/assets/images/akari!!_thumbsup.gif" alt="Akari!!!!" width="100"/></code>
+## <img decoding="async" id="blog-rand-img" src="/assets/images/toshino.gif" alt="Toshino Kyoko!" width="100"/> Yaw! Sometimes I write a blog, though mostly not.
+> <code style="color:black;">Blah, Please don't expect any informative or technical blogs. <img decoding="async" id="blog-rand-img-2" src="/assets/images/akari!!_thumbsup.gif" alt="Akari!!!!" width="100"/></code>
 
+<script src="{{ site.baseurl }}/assets/js/kirby-img.js"></script>
+<script>
+  const Img_1 = ['/assets/images/toshino.gif', '/assets/images/senior.gif'];
+  const Img_2 = ['/assets/images/akari!!_thumbsup.gif', '/assets/images/toshino-hehe.gif'];
+  document.onload = randomImageBroker('blog-rand-img', Img_1);
+  document.onload = randomImageBroker('blog-rand-img-2', Img_2);
+</script>
 <hr>
 
 <div class="posts">

assets/js/kirby-img.js

@@ -0,0 +1,10 @@
+function randomImageBroker(ElemName, imgArray) {
+    const imgEl = document.getElementById(ElemName);
+    randomImage(imgEl, imgArray)
+
+}
+
+function randomImage(imgELM, srcArray) {
+    const randomIndex = Math.floor(Math.random()*srcArray.length);
+    imgELM.src = srcArray[randomIndex];
+}