v1.4.0 文章目录功能

moegi-design · May 24, 2018 · 8424ce8 · 8424ce8
1 parent 05c1d7b
commit 8424ce8
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+# Moegi「萌黄」 - 一个优雅的Ghost主题
+
+[博客介绍页](https://blog.ddiu.site/ghost-theme-moegi/)
+
 陆陆续续跟风玩过不少的博客= =...从 Wordpress 转到 Typecho 再到现在的 Ghost..
 试过 Ghost 之后发现嗯，好，是我想要的，于是就这么留下来了...
 
@@ -6,19 +10,22 @@ Ghost 0.x版本默认的 Casper 十分好看，可惜1.0版本之后就改成 cm
 
 ## 设计风格
 
+简约。单栏。
+主色调为Moegi（萌黄）。
+
 主题名称和主要颜色的来源取自[NIPPON COLORS - 日本の伝統色](http://nipponcolors.com)。这是一个相当文艺的取色网站，收录的几百种颜色全部是日本的传统颜色，十分耐看，同时名字也非常好听。比如一斥染、柳染、利休茶等等。强烈建议颜色方面没有灵感的话来这里看看~
 
 ~~主题的文字为[思源宋体](https://source.typekit.com/source-han-serif/cn/)。这是Adobe与Google联合发布的一套开源字体，个人感觉放在网页里真心好看😂~~（180523：思源宋体已从主题移除）
 
-### 颜色
+### 特性
+
+* 标签云
+* 归档页
+* 文章目录
+* 顶部进度条（待实现）
+* 评论功能（待实现）
 
-* 背景： `#FBFBFB`
-* 标题色：`#52433D 紅消鼠`
-* 主题色：`#86B81B 萌黄`
-* 强调色：`#8F5A3C 雀茶`
-* 默认文字：`#4F4F48 丼鼠`
-* Code段：`#A96360 蘇芳香`
-* 标签底色：`#F0F0F0`
+[Features Todo List](https://github.com/ddiu8081/ghost-theme-Moegi/issues/2)
 
 ### MarkDown
 ```
@@ -43,7 +50,8 @@ Ghost 0.x版本默认的 Casper 十分好看，可惜1.0版本之后就改成 cm
 
 ### Screenshot & Demo
 
-![Screenshot](http://ostfcwjy3.bkt.clouddn.com/18-5-24/82860263.jpg)
+![index](http://ostfcwjy3.bkt.clouddn.com/18-5-24/82860263.jpg)
+![article](http://ostfcwjy3.bkt.clouddn.com/18-5-24/61599666.jpg)
 
 [Demo](https://blog.ddiu.site)
 
@@ -53,6 +61,7 @@ Ghost 0.x版本默认的 Casper 十分好看，可惜1.0版本之后就改成 cm
 * 2018.02.16 v1.1.0 添加代码高亮（使用[prism.js](http://prismjs.com)）
 * 2018.05.23 v1.2.0 使用[Typo.css](https://typo.sofi.sh/)重构了页面的行距等样式；代码高亮更换为[Highlight.js](https://highlightjs.org/)；背景改为#ffffff；超链接、强调色、引用等其他样式更改
 * 2018.05.24 v1.3.0 添加归档页；细节优化
+* 2018.05.24 v1.4.0 添加文章目录
 
 ## 下载与使用
 
@@ -78,6 +87,7 @@ Ghost 0.x版本默认的 Casper 十分好看，可惜1.0版本之后就改成 cm
 * [Moment.js](http://momentjs.cn/)：js时间处理插件，用于归档页面。
 * [jQuery](https://jquery.com/)：最流行的JavaScript工具库。
 * [@ldsun](https://ldsun.com/2016/07/23/ghost-archives/)：归档页实现灵感来源。
+* [jquery.tocify.js](https://github.com/gfranko/jquery.tocify.js)：快速生成动态文章目录，并且有scrollspy功能。
 
 ### License
 

diff --git a/assets/css/moegi.css b/assets/css/moegi.css
@@ -23,19 +23,19 @@ a:hover {
     color: #999999;
 }
 
-.nav ul {
+.top-nav ul {
     display: block;
     margin: 1em 0;
     list-style: none;
     padding: 0;
 }
 
-.nav li {
+.top-nav li {
     margin: 0 4px;
     display: inline-block;
 }
 
-.nav a {
+.top-nav a {
     border: none;
 }
 
@@ -303,6 +303,46 @@ pre {
     border: none;
 }
 
+/* TOC */
+#toc {
+    position: fixed;
+    left: 50%;
+    top: 20%;
+    margin-left: 400px;
+    border-left: 1px solid #dddddd;
+}
+
+/* #toc:before {
+    content: "目录";
+    margin-left: 1em;
+    border-bottom: 1px solid #333333;
+    margin-bottom: 0.6em;
+    color: #333333;
+    display: inline-block;
+} */
+
+#toc a {
+    display: block;
+    color: #cccccc;
+}
+
+#toc a:hover {
+    padding: 0;
+    border: none;
+    color: #86B81B;
+}
+
+#toc .active a {
+    color: #86B81B;
+}
+
+#toc ul {
+    margin-left: 1em;
+}
+
+#toc li {
+    display: block;
+}
 
 /* GO TO TOP */
 

diff --git a/assets/js/prism.js b/assets/js/prism.js
diff --git a/default.hbs b/default.hbs
@@ -15,6 +15,7 @@
     <link rel="stylesheet" type="text/css" href="{{asset "css/moegi.css"}}" />
     <link rel="stylesheet" type="text/css" href="{{asset "fonts/iconfont.css"}}">
     <link rel="stylesheet" href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/default.min.css">
+    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     {{!-- <script src="https://use.typekit.net/ueu5sio.js"></script> --}}
     {{!-- <script>try{Typekit.load({ async: true });}catch(e){}</script> --}}
     {{! Ghost outputs important style and meta data with this tag }}

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "Moegi",
     "description": "A simple & pure Ghost theme.",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "engines": {
         "ghost": ">=1.0.0"
     },

diff --git a/page-archives.hbs b/page-archives.hbs
@@ -1,7 +1,6 @@
 {{!< default}}
 
 {{#post}}
-<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
 
 <header>

diff --git a/page.hbs b/page.hbs
@@ -30,6 +30,8 @@
     </footer>
 </main>
 
+{{> "toc"}}
+
 {{> "comment"}}
 
 {{/post}}

diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -1,4 +1,4 @@
-<div class="nav">
+<div class="top-nav">
     <ul>
         {{#foreach navigation}}
             <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>

diff --git a/partials/toc.hbs b/partials/toc.hbs
@@ -0,0 +1,15 @@
+{{!-- <div id="toc-panel">
+    <ul data-toc="div.container" data-toc-headings="h2,h3,h4"></ul>
+</div> --}}
+<div id="toc"></div>
+
+{{!-- <script src="{{asset "js/jquery.toc.js"}}"></script> --}}
+<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
+<script src="https://cdn.bootcss.com/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
+<script>
+    var toc = $("#toc").tocify({
+        selectors: "h2,h3,h4,h5",
+        extendPage: false,
+        highlightDefault: false
+    });
+</script>
diff --git a/post.hbs b/post.hbs
@@ -45,6 +45,8 @@
     </footer>
 </main>
 
+{{> "toc"}}
+
 {{> "comment"}}
 
 {{/post}}