1. 添加了各个工具的入口页面，统一放在 topbar.html 文件中

2. 用 iframe 引入 topbar.html，实现统一管理工具入口页面 3. 增强 Roam 导出格式的检查，提醒用户修正不规范的列表格式 4. 修改主要展示页面的视觉样式 main.css，优化 topbar 的显示
swarma · Jun 20, 2020 · 23cbe8a · 23cbe8a
1 parent 40792dd
commit 23cbe8a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/css/main.css b/css/main.css
@@ -2,7 +2,12 @@ html,body { margin:0; color:white; background-color:black; height:96%; }
 textarea { color: white; background-color: #555555; }
 a { color: #444444; text-decoration: none; }
 a:visited { color: dimgray; }
-.flex-container { display: flex; height: 80%; flex-wrap: nowrap; background-color: black; }
+.topbar-group { position:absolute;top:0;left:0;z-index:999;border:0;width:100%;height:64px; border-bottom:1px solid rgba(255,255,255,0.4); }
+.topbar { display: flex; flex-direction: row; flex-wrap: nowrap; height: fit-content; margin:5px 0 5px 0; }
+.tool-button { width: fit-content; padding:2px 5px 2px 5px; margin-left:10px; border-radius:5px; background-color: rgba(255,165,0,0.5); }
+.tool-button a { color:white; }
+.tool-button a:visited { color:silver; }
+.flex-container { display: flex; margin-top: 68px; height: 80%; flex-wrap: nowrap; background-color: black; }
 .bottom-ads { background-color: black; margin-top: 15px; margin-left: 31.4%; margin-right: 1%; }
 .usage-pane { width: 30%; margin: 5px; padding: 10px; font-size: large; }
 .usage-pane a { display:inline-block; padding:4px 8px 4px 8px; margin-top:8px; border-radius:4px; background-color: wheat; }

diff --git a/js/utils.js b/js/utils.js
@@ -60,6 +60,7 @@ function roamPreProcess(text) {
   let regex = /^( *)-/i;
   for (idx in lines) {
     let res = regex.exec(lines[idx]);
+    if (res == null) { alert("请仔细检查这一行的格式：\n\n【" + lines[idx].trim() + "】"); }
     spaces = res[1];
     tabs = spaces.length / 4 + 1;
     lines[idx] = lines[idx].replace(res[0], "#".repeat(tabs));

diff --git a/opml2anki/index.html b/opml2anki/index.html
@@ -11,6 +11,7 @@
     <script src="../lib/xml2json.min.js"></script>
   </head>
   <body>
+    <iframe style="height:0;width:0;border:0;" src="/tools/topbar.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
     <div class="flex-container">
       <div class="usage-pane">
         <h1>OPML to Anki</h1>
@@ -58,4 +59,4 @@ <h2>如有改进建议，请联系 LEO 老师<br><a href="https://anki.wiki/"><i
     <div class="bottom-ads">
     </div>
   </body>
-</html>
+</html>
diff --git a/topbar.html b/topbar.html
@@ -0,0 +1,23 @@
+<div class="topbar-group">
+  <div class="topbar">
+    <div>其它工具入口</div>
+    <div class="tool-button">
+      <a href="/tools/md2anki/index.html">md2anki</a>
+    </div>
+    <div class="tool-button">
+      <a href="/tools/mubu2anki/index.html">mubu2anki</a>
+    </div>
+    <div class="tool-button">
+      <a href="/tools/opml2anki/index.html">opml2anki</a>
+    </div>
+    <div class="tool-button">
+      <a href="/tools/roam2anki/index.html">roam2anki</a>
+    </div>
+  </div>
+  <div class="topbar">
+    <div>旧版工具入口</div>
+    <div class="tool-button">
+      <a href="/tools/anki/v1/opml2anki/index.html">opml2anki-v1</a>
+    </div>
+  </div>
+</div>