Add Custom Index Title.

Author: losgod

assets/dist/app.min.js

@@ -112,8 +112,43 @@ function pageDown() {
     });
 }
 
+function hitokoto() {
+    const dom = document.querySelector('div#customTitle').querySelector('h2');
+    const cache = sessionStorage.getItem('hitokoto');
+    if (cache !== null && cache !== '') {
+        dom.innerText = cache;
+        return;
+    }
+    fetch('//v1.hitokoto.cn/?c=c&c=d&c=i&c=k&encode=json', {method: 'GET', mode: "cors"})
+        .then(res => res.json())
+        .then(res => {
+            const text = `${res.hitokoto} - ${res.from ? `《${res.from}》` : ''}${res.from_who ? res.from_who : ''}`;
+            sessionStorage.setItem('hitokoto', text);
+            dom.innerText = text;
+        })
+        .catch(err => {
+            console.error('「一言」请求失败');
+            console.error(err);
+            dom.innerText = '学而不思则罔，思而不学则殆。 - 《论语》 孔子';
+        });
+}
+
 /* ================= 页面动画 ================== */
 
+function titleAnimation() {
+    const path = document.querySelector('path#pathTitle');
+    if (path === null) {
+        return
+    }
+
+    const length = path.getTotalLength();
+
+    path.style.strokeDasharray = length;
+    path.style.strokeDashoffset = length;
+
+    TweenMax.to(path, 5, {strokeDashoffset: 0});
+}
+
 // 页面封面 视差效果
 function coverPin() {
     const section = document.querySelector('#welcome');
@@ -181,6 +216,11 @@ window.addEventListener('load', () => {
         pageDown();
     }
 
+    if (document.querySelector('div#customTitle') !== null) {
+        titleAnimation();
+        hitokoto();
+    }
+
     searchController();
     mainScroll();
 

assets/dist/index.css

@@ -374,6 +374,15 @@ header#welcome {
       }
     }
 
+    div#customTitle {
+      h2 {
+        font-family: 'CodeFont', cursive;
+        margin: 0.5rem auto;
+
+        word-break: break-word;
+      }
+    }
+
     div.tags a {
       font-size: 1.2rem;
       color: var(--white-font-color);

assets/dist/index.css.map

@@ -7,7 +7,17 @@
     <#include "module/menu.ftl">
 
 <#-- Page Cover -->
-    <@cover.layout img="${settings.index_cover!}" title="${settings.title!blog_title}" subtitle="${settings.subtitle!}" />
+    <@cover.layout img="${settings.index_cover!}" title="" subtitle="">
+        <div id="customTitle">
+            <svg xmlns="http://www.w3.org/2000/svg" height="120" width="300">
+                <path
+                        id="pathTitle"
+                        d="M 1.0389924,25.612305 C 10.395233,29.939699 22.06724,16.661916 25.860272,11.217656 27.653702,8.6133136 34.78628,2.2689916 29.233265,2.4827893 17.845106,13.596036 12.248381,25.465618 9.623045,38.792263 c -2.7261904,13.83861 -5.0168454,37.654274 4.664846,41.985042 6.533225,2.492119 13.413366,-4.51983 18.745849,-9.182644 4.29594,-4.315364 20.851225,-17.7611 18.308679,-21.927513 -2.715331,-2.115344 -3.949963,12.630097 -1.906016,18.538554 1.959565,5.664519 4.862591,14.316271 12.622777,13.433258 8.03929,-0.914773 15.746816,-14.589734 14.388086,-23.526579 -3.086548,-20.301284 -20.950952,-15.005709 -25.615844,-7.7282 6.429822,6.091884 15.994024,2.2568 24.622178,1.501583 7.101806,-0.621614 20.258916,-3.596322 30.27827,-5.851673 3.79154,-0.853479 6.95667,-0.643022 11.27928,-2.903743 4.30131,-3.657235 -9.52917,-1.324271 -13.37611,0.792615 -5.379671,2.960328 -11.207421,9.003219 -10.073169,14.727978 0.745293,3.761667 4.511698,5.3255 9.891079,6.837607 4.64741,1.306341 10.63879,6.179117 8.29242,9.68181 -4.79527,7.158479 -17.791481,7.73153 -22.515646,5.39236 -5.358525,-3.578132 1.048821,-2.002714 8.818797,-2.750862 23.387259,-0.08013 31.888229,-15.040578 47.948019,-22.707187 7.98405,-3.62706 19.31076,-3.673222 21.72444,-6.737839 3.60646,-4.579106 -9.56355,-6.721206 -14.38203,-5.086884 -10.20395,3.460982 -17.52679,16.491167 -15.89726,26.494683 0.77291,4.744749 2.9387,9.608693 11.2026,9.915943 10.94853,0.407072 20.12697,-30.610349 20.12697,-30.610349 0,0 -0.22138,18.509953 -1.85549,27.60206 -1.89474,10.542313 -2.58892,22.147376 -9.1563,30.911637 -3.23892,4.32237 -6.72422,7.16382 -13.80386,9.20259 -7.20501,2.07486 -15.16915,-0.49132 -15.905,-5.74487 -1.56211,-11.152605 16.31914,-14.639366 29.27414,-19.86133 15.12648,-6.097276 22.64463,-13.515764 35.69529,-35.698333 0,0 -7.34951,18.306313 -1.44901,24.248195 3.53309,3.557828 11.17687,2.86662 15.60275,0.319263 7.16299,-4.122739 11.43879,-13.4485 10.80782,-21.271341 -2.40325,-9.985686 -9.61118,-16.458446 -20.02728,-13.158051 -3.61628,1.175959 -9.70812,6.815327 -8.04709,8.530708 11.50913,3.161098 29.71514,-5.633357 42.59799,-7.369898 9.07227,-1.170624 25.92944,-1.292971 29.97948,-3.269137 5.81842,-2.839017 -7.58851,-2.789604 -14.36127,-1.32875 -5.82453,1.256326 -15.68913,7.588361 -16.88658,24.548822 -0.48247,6.833495 4.58205,15.220689 11.09797,15.007591 14.93106,-0.488298 20.16894,-26.202342 22.78046,-35.966125 C 269.2961,30.60547 278.00163,-0.22111672 277.75862,2.9147966 268.03927,28.300777 261.56914,47.71714 260.73898,66.720078 c 1.83895,6.249338 6.17716,12.998876 12.64877,15.09042 8.20478,2.651683 18.46478,-1.520731 25.30611,-5.770423"
+                        style="fill:none;stroke:#ffffff;stroke-width:5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+            </svg>
+            <h2 style="font-family: cursive;"></h2>
+        </div>
+    </@cover.layout>
 
     <main>
         <#if settings.custom_info??>

assets/js/app.js

@@ -6,8 +6,13 @@
             <img src="${(img?? && img != "")?string(img, settings.default_pic)}" alt="">
         </div>
         <div class="title">
-            <h1>${title!}</h1>
+            <#if title?? && title != "">
+                <h1>${title!}</h1>
+            </#if>
+            <#if subtitle?? && subtitle != "">
             <h3>${subtitle!}</h3>
+            </#if>
+
             <#nested >
         </div>
         <div id="down">