feat: 添加【在线工具】菜单项

_config.yml

@@ -41,6 +41,7 @@ exclude:
   - README.md
   - COPYING
   - vendor
+  - minify.cmd
 sass:
   style: compressed
 lang: zh_CN

_includes/header.html

@@ -104,6 +104,7 @@
             </li>
             <li><a class="waves-effect" href="/"><i class="material-icons">home</i>Home - 主页</a></li>
             <li><a class="waves-effect" href="/projects"><i class="material-icons">description</i>Github - 项目</a></li>
+            <li><a class="waves-effect" href="/tools"><i class="material-icons">build</i>Tools - 在线工具</a></li>
             <li><a class="waves-effect" href="/categories"><i class="material-icons">sort</i>Categories - 目录</a></li>
             <li><a class="waves-effect" href="/tags"><i class="material-icons">label</i>Tags - 标签</a></li>
             <li><a class="waves-effect" href="/feed.xml" target="_blank"><i class="material-icons">rss_feed</i>RSS - 订阅</a></li>

_includes/tools.html

@@ -0,0 +1,27 @@
+{% if site.github.public_repositories %}
+{% assign sorted_repos = (site.github.public_repositories | sort: 'pushed_at') | reverse %}
+
+{% for repo in sorted_repos %}
+{% if repo.homepage != nil and repo.homepage != '' and repo.fork == false %}
+<div class="col s12">
+    <div class="card hoverable">
+        <div class="card-image waves-effect waves-block waves-light geopattern activator"
+            data-pattern-id="{{repo.name}}">
+            <a href="{{repo.html_url}}" class="card-image-icon" target="_blank">
+                <i class="material-icons waves-effect waves-block waves-light tooltipped" data-position="right"
+                    data-tooltip="Github:&lt;br&gt;{{repo.html_url}}">code</i>
+            </a>
+            <a class="card-title center-align valign-wrapper tooltipped" href="{{repo.homepage}}" data-position="right"
+                data-tooltip="{{repo.homepage}}" target="_blank">
+                {{repo.name}}
+            </a>
+        </div>
+        <div class="card-content valign-wrapper center-align activator">
+            <span class="activator grey-text text-darken-1">{{repo.description}}</span>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endfor %}
+
+{% endif %}

assets/css/tools.sass

@@ -0,0 +1,45 @@
+---
+---
+.card
+  display: flex
+  flex-wrap: wrap
+  margin-bottom: 2em
+  overflow: auto
+
+  .card-image
+    overflow-x: hidden
+    flex: 3
+    min-width: 300px
+
+    .card-image-icon
+      position: absolute
+      top: 0
+      right: 0
+    i
+      padding: 10px
+      color: #fff
+      font-size: 20px
+      &:hover
+        color: #2196F3
+        border-radius: 50%
+        border: 1px outset #26a69a
+    a.card-title
+      position: unset
+      font-weight: bold
+      color: #fff
+      width: 100%
+      height: 100%
+      line-height: 100%
+      justify-content: center
+      word-break: break-all
+      z-index: -1
+
+  .card-content
+    flex: 2
+    min-width: 200px
+    overflow: hidden
+    font-size: 14px
+    line-height: 110%
+
+    span
+      width: 100%

assets/js/normal/tools.js

@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.geopattern').forEach(el => {
+        var pattern = GeoPattern.generate(el.dataset.patternId).toDataUrl();
+        el.style.backgroundImage = pattern;
+    });
+});

tools.md

@@ -0,0 +1,11 @@
+---
+layout: page
+title: "Online Tools"
+css: ["tools.css"]
+js: [
+    "https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js",
+    "tools.min.js"
+]
+---
+
+{% include tools.html %}