Many things: new styles, content filter, article stc

Using liquid filter to add target="_blank" rel="..." to external links, fallback and lazy loading to images; Rewritten styling for text background and border with a more elegant way; Inline <code> styling, responsive image styling. New article
Kirisoup · Nov 10, 2023 · 4777662 · 4777662
1 parent cc0222a
commit 4777662
Show file tree

Hide file tree

Showing 14 changed files with 1,613 additions and 66 deletions.
diff --git a/_includes/ip.js.md b/_includes/ip.js.md
@@ -4,7 +4,7 @@
         ip = document.querySelectorAll('.ip');
 
         for (i = 0; i < ip.length; i++) {
-            ip[i].innerHTML=`你的IP地址是: <a href="https://ipleak.net/?q=${json.ip}" target="_blank" rel="noopener noreferrer">${json.ip}</a>`;
+            ip[i].innerHTML=`你的IP地址是: <a href="https://ipleak.net/?q=${json.ip}">${json.ip}</a>`;
         };
     }
 </script>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-control" content="no-store">
     <title>
       {{ site.title }} |
       {%- if page.description -%}
@@ -36,7 +35,12 @@
           </div>
           <div class="window">
             <main class="content">
-              {{content}}
+              {%- capture opt -%} <img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" {% endcapture %}
+              {%- assign content_baked = content
+                | replace: '<img ', opt
+                | replace: '<a href="http', '<a target="_blank" rel="noopener noreferrer" href="http'
+              -%}
+              {{ content_baked }}
             </main>
             <div class="buttonBar">
               <label class="fontTg toggle" title="切换字体"><input type="checkbox"></label>
@@ -71,7 +75,10 @@
         <label class="fullscreenTg toggle" id="exitFull" title="退出全屏"></label>
       </div>
       <div class="content f">
-        {{ content | replace: 'id="', 'id="f_' | replace: 'a href="#', 'a href="#f_' }}
+        {{ content_baked
+          | replace: 'id="', 'id="f_'
+          | replace: 'a href="#', 'a href="#f_'
+        }}
       </div> <!-- really stupid way to fix duplicated id issue -->
       <div class="bottomBar">
         <div class="left">地址：{{ site.url }}{{ page.url }} | 作者：{{ page.author }} </div>

diff --git a/_sass/moardown.scss b/_sass/moardown.scss
@@ -75,28 +75,24 @@ $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aq
 // use "''+$color" so that scss don't throw a warning
 @each $color in $colors {
      .#{""+$color} { color: $color; }
-    .h#{""+$color} { &::before { background-color: $color; }; }
-    .b#{""+$color} { &::before { --bw: 2px; border: $color solid var(--bw); }; }
+    .h#{""+$color} { background-color: $color; }
+    .b#{""+$color} { --bw: 2px; border: $color solid var(--bw); }
 }
 
 @mixin colorbg {
     position: relative;
-    z-index: 1;
-
-    &::before {content: "";
-        position: absolute;
-        --bd: 0.02em;
-        z-index: -1;
-        inset: {
-            block:  calc(var(--bd)*-1);
-            inline: calc(-.2em + var(--bd)*-1);
-        };
-    }
+    display: inline-block;
+    --bd: .05em;
+    padding: calc(var(--bd)) calc(.1em + var(--bd));
 }
 
-.h, .b { @each $color in $colors { &#{""+$color} {
-    @include colorbg();
-}}}
+.h, .b { @each $color in $colors { &#{""+$color} { @include colorbg(); }}}
+
+.h {
+    @include colorbg(); 
+    color: #44d;
+    background: var(--color-yellow);
+}
 
 .ant {
     @include colorbg();
@@ -343,6 +339,8 @@ blockquote {
     &.info, &.note, &.warn {
         display: block;
         position: relative;
+        width: max-content;
+        max-width: 100%;
         padding-inline: 2.5em .5em;
         padding-block: .5em;
         margin-left: 0;
@@ -477,9 +475,9 @@ em[norm] {
 hr {
     border: none { block: 2px var(--color) solid };
     height: .2em;
-    margin-block: 1em;
+    margin-block: 2em;
 
-    &.blank {
+    &.break {
         height: 1px;
         opacity: 0;
         border: none !important;

diff --git a/_site/about.html b/_site/about.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-control" content="no-store">
     <title>
       霧雨蘑菇店 |/¥About.xml</title>
     <script async src="/assets/js/fallback-dom.js" onerror="this.onerror=null;newScript=document.createElement('script');newScript.src ='https://ghproxy.com/https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_site/assets/js/fallback-dom.js';document.head.appendChild(newScript);"></script> <!-- store ghproxy prepended link as variable -->
@@ -56,8 +55,7 @@
             <div class="nav-b"></div>
           </div>
           <div class="window">
-            <main class="content">
-              <h1 id="about-">about :|</h1>
+            <main class="content"><h1 id="about-">about :|</h1>
 
             </main>
             <div class="buttonBar">

diff --git a/_site/assets/css/default/style.css b/_site/assets/css/default/style.css
diff --git a/_site/assets/css/default/style.css.map b/_site/assets/css/default/style.css.map
diff --git a/_site/home.html b/_site/home.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-control" content="no-store">
     <title>
       霧雨蘑菇店 || 欢迎来到霧雨蘑菇店！</title>
     <script async src="/assets/js/fallback-dom.js" onerror="this.onerror=null;newScript=document.createElement('script');newScript.src ='https://ghproxy.com/https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_site/assets/js/fallback-dom.js';document.head.appendChild(newScript);"></script> <!-- store ghproxy prepended link as variable -->
@@ -57,18 +56,17 @@
           </div>
           <div class="window">
             <main class="content">
-
-<p class="fake h1"><em class="big rainbow fancy2">欢迎来到 <strong class="big">¥霧雨蘑菇店¥</strong><img src="/assets/image/indoc/pilze-0004.gif" alt="" height="40px" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" /></em> <br /> <strong class="r rainbow fancy2"><em r="yo">う</em><em r="ko">こ</em><em r="so">そ</em>！</strong></p>
+<p class="fake h1"><em class="big rainbow fancy2">欢迎来到 <strong class="big">¥霧雨蘑菇店¥</strong><img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/pilze-0004.gif" alt="" class="icon" height="40px" /></em> <br /> <strong class="r rainbow fancy2"><em r="yo">う</em><em r="ko">こ</em><em r="so">そ</em>！</strong></p>
 
 <hr />
 
 <p>冲浪了这么久，赶快进来歇一会吧|∀` )。</p>
 
-<p><img src="/assets/image/indoc/Chinese-Tea.gif" alt="" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" /><br />
+<p><img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/Chinese-Tea.gif" alt="" class="icon" /><br />
 <em class="bigger u">红茶无限续杯！</em><del class="small">没有茶点！幽幽子请不要再来了！</del></p>
 
 <p>这里是霧雨蘑菇汤的互联网小角落，本店提供：<br />
-<strong><em t="右下角（看电视请自便）">最新最好的 IBM 计算机</em>、旋转 fumo <img src="/assets/image/indoc/cirno.gif" alt="" height="20px" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" /><img src="/assets/image/indoc/cirno.gif" alt="" height="20px" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" />、畅销书籍、魔法金属、拉面代码，</strong> 细心发掘的话还可以发现更多有意思的稀奇玩意~</p>
+<strong><em t="右下角（看电视请自便）">最新最好的 IBM 计算机</em>、旋转 fumo <img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/cirno.gif" alt="" class="icon" height="20px" /><img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/cirno.gif" alt="" class="icon" height="20px" />、畅销书籍、魔法金属、拉面代码，</strong> 细心发掘的话还可以发现更多有意思的稀奇玩意~</p>
 
 <blockquote class="info">
   <p><em t="请使用横屏设备浏览本网页；支持大部分浏览器的最新版本，很不幸尚不支持火狐">请使用天亦3G设备浏览本网页</em></p>
@@ -78,7 +76,7 @@
   <p><em class="ip">加载中……</em></p>
 </blockquote>
 
-<script> function getIP(json) { ip = document.querySelectorAll('.ip'); for (i = 0; i < ip.length; i++) { ip[i].innerHTML=`你的IP地址是: <a href="https://ipleak.net/?q=${json.ip}" target="_blank" rel="noopener noreferrer">${json.ip}</a>`; }; }</script>
+<script> function getIP(json) { ip = document.querySelectorAll('.ip'); for (i = 0; i < ip.length; i++) { ip[i].innerHTML=`你的IP地址是: <a target="_blank" rel="noopener noreferrer" href="https://ipleak.net/?q=${json.ip}">${json.ip}</a>`; }; }</script>
 <script src="http://api.ipify.org?format=jsonp&amp;callback=getIP" async=""></script>
 
 <blockquote class="info">
@@ -130,17 +128,17 @@
       </div>
       <div class="content f">
 
-<p class="fake h1"><em class="big rainbow fancy2">欢迎来到 <strong class="big">¥霧雨蘑菇店¥</strong><img src="/assets/image/indoc/pilze-0004.gif" alt="" height="40px" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" /></em> <br /> <strong class="r rainbow fancy2"><em r="yo">う</em><em r="ko">こ</em><em r="so">そ</em>！</strong></p>
+<p class="fake h1"><em class="big rainbow fancy2">欢迎来到 <strong class="big">¥霧雨蘑菇店¥</strong><img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/pilze-0004.gif" alt="" class="icon" height="40px" /></em> <br /> <strong class="r rainbow fancy2"><em r="yo">う</em><em r="ko">こ</em><em r="so">そ</em>！</strong></p>
 
 <hr />
 
 <p>冲浪了这么久，赶快进来歇一会吧|∀` )。</p>
 
-<p><img src="/assets/image/indoc/Chinese-Tea.gif" alt="" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" /><br />
+<p><img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/Chinese-Tea.gif" alt="" class="icon" /><br />
 <em class="bigger u">红茶无限续杯！</em><del class="small">没有茶点！幽幽子请不要再来了！</del></p>
 
 <p>这里是霧雨蘑菇汤的互联网小角落，本店提供：<br />
-<strong><em t="右下角（看电视请自便）">最新最好的 IBM 计算机</em>、旋转 fumo <img src="/assets/image/indoc/cirno.gif" alt="" height="20px" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" /><img src="/assets/image/indoc/cirno.gif" alt="" height="20px" onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" />、畅销书籍、魔法金属、拉面代码，</strong> 细心发掘的话还可以发现更多有意思的稀奇玩意~</p>
+<strong><em t="右下角（看电视请自便）">最新最好的 IBM 计算机</em>、旋转 fumo <img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/cirno.gif" alt="" class="icon" height="20px" /><img onerror="this.onerror=null; this.src = ghprxy_s + getAttribute('src')" loading="lazy" src="/assets/image/indoc/cirno.gif" alt="" class="icon" height="20px" />、畅销书籍、魔法金属、拉面代码，</strong> 细心发掘的话还可以发现更多有意思的稀奇玩意~</p>
 
 <blockquote class="info">
   <p><em t="请使用横屏设备浏览本网页；支持大部分浏览器的最新版本，很不幸尚不支持火狐">请使用天亦3G设备浏览本网页</em></p>
@@ -150,7 +148,7 @@
   <p><em class="ip">加载中……</em></p>
 </blockquote>
 
-<script> function getIP(json) { ip = document.querySelectorAll('.ip'); for (i = 0; i < ip.length; i++) { ip[i].innerHTML=`你的IP地址是: <a href="https://ipleak.net/?q=${json.ip}" target="_blank" rel="noopener noreferrer">${json.ip}</a>`; }; }</script>
+<script> function getIP(json) { ip = document.querySelectorAll('.ip'); for (i = 0; i < ip.length; i++) { ip[i].innerHTML=`你的IP地址是: <a target="_blank" rel="noopener noreferrer" href="https://ipleak.net/?q=${json.ip}">${json.ip}</a>`; }; }</script>
 <script src="http://api.ipify.org?format=jsonp&amp;callback=getIP" async=""></script>
 
 <blockquote class="info">

diff --git a/_site/md-lab.html b/_site/md-lab.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-control" content="no-store">
     <title>
       霧雨蘑菇店 |/¥MarkDown¥实验室.xml</title>
     <script async src="/assets/js/fallback-dom.js" onerror="this.onerror=null;newScript=document.createElement('script');newScript.src ='https://ghproxy.com/https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_site/assets/js/fallback-dom.js';document.head.appendChild(newScript);"></script> <!-- store ghproxy prepended link as variable -->
@@ -56,8 +55,7 @@
             <div class="nav-b"></div>
           </div>
           <div class="window">
-            <main class="content">
-              <h1 id="head">MoarDown - <em class="small">Markdown 语法扩充类</em>！:</h1>
+            <main class="content"><h1 id="head">MoarDown - <em class="small">Markdown 语法扩充类</em>！:</h1>
 
 <h2 id="index">目录</h2>
 
@@ -1102,7 +1100,7 @@ <h2 id="文字排版测试用">文字排版测试用</h2>
         </li>
       </ul>
 
-      <hr class="blank" />
+      <hr class="break" />
 
       <ul>
         <li>为行内元素添加属性：
@@ -1113,7 +1111,7 @@ <h2 id="文字排版测试用">文字排版测试用</h2>
         </li>
       </ul>
 
-      <hr class="blank" />
+      <hr class="break" />
 
       <ul>
         <li>
@@ -2237,7 +2235,7 @@ <h2 id="f_文字排版测试用">文字排版测试用</h2>
         </li>
       </ul>
 
-      <hr class="blank" />
+      <hr class="break" />
 
       <ul>
         <li>为行内元素添加属性：
@@ -2248,7 +2246,7 @@ <h2 id="f_文字排版测试用">文字排版测试用</h2>
         </li>
       </ul>
 
-      <hr class="blank" />
+      <hr class="break" />
 
       <ul>
         <li>

diff --git a/_site/sitemap.xml b/_site/sitemap.xml
@@ -9,4 +9,7 @@
 <url>
 <loc>http://localhost:4000/md-lab</loc>
 </url>
+<url>
+<loc>http://localhost:4000/we_fuck_gfw</loc>
+</url>
 </urlset>