add affix toc

zjtang · zjtang · commit b0437357ec23 · 2018-09-21T19:17:15.000+08:00
diff --git a/static/css/myaffix.css b/static/css/myaffix.css
@@ -0,0 +1,46 @@
+.sidebar-toc.affix {
+    position: fixed;
+    top: 10px;
+    margin-left: 0;
+    border-left:1px solid #ddd;
+    padding-left:0;
+    margin-top:0;
+    word-wrap:break-word;
+    color:#6e7173;
+    line-height:2.7;
+    font-size:16px;
+    display:block;
+    font-weight:400;
+}
+
+.sidebar-toc.affix-top {
+    border-left: none;
+    color:#6e7173;
+    line-height:2.7;
+    font-size:16px;
+    display:block;
+    font-weight:400;
+    overflow: hidden;
+    padding-left: 0;
+    margin-top: 10px;
+}
+
+#sidebar-toc{
+    padding: 0;
+    margin-bottom: 20px;
+}
+
+.markdown-toc.editormd-markdown-toc {
+    margin: 0;
+    max-height: inherit;
+}
+
+ul.markdown-toc-list {
+    margin: 0;
+    max-height: inherit;
+}
+
+li, ul, ol{
+    list-style:none;
+    margin-left:-5px;
+}
diff --git a/templates/blogging/base.html b/templates/blogging/base.html
@@ -28,8 +28,8 @@
   {% block extrastyle %}
   {% endblock extrastyle %}
 </head>
-<body>
-  <div class="body_container">
+<body style="background:#f7f8fa">
+  <div class="body_container" style="background:white">
     <div id="header">
       <div class="site-name">
         <h1 class="hidden">ezBlog</h1>
@@ -44,7 +44,7 @@ <h1 class="hidden">ezBlog</h1>
     {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
       {% for category, message in messages %}
-      <div class="pure-u-1">
+      <div class="pure-u-1 pure-u-md-3-4">
         <div class="content_container">
           <div class="alert alert-{{ category }} alert-dismissible" style="text-align:center;margin-left:30%;margin-right:30%">
             <button type="button" class="close" data-dismiss="alert">&times;</button>
@@ -62,7 +62,7 @@ <h1 class="hidden">ezBlog</h1>
         {% endblock sidebar %}
       <div class="pure-u-1">
         <br />
-        <div id="footer">
+        <div id="footer" class="pure-u-1 pure-u-md-3-4">
             Copyright © 2018
             <a href="{{url_for("blogging.about")}}" rel="nofollow" style="color:gray">{{config.BLOGGING_AUTHOR}}</a>
             | Powered by
diff --git a/templates/blogging/login.html b/templates/blogging/login.html
@@ -19,7 +19,7 @@
  {% endblock navmenu %}
 
 {% block post %}
-<div class="pure-u-1">
+<div class="pure-u-1 pure-u-md-3-4">
   <div class="content_container">
     <div class="content-wrap">
       <div id="content" class="content">
diff --git a/templates/blogging/page.html b/templates/blogging/page.html
@@ -11,6 +11,7 @@
 {% block extrastyle %}
   <!--link rel="stylesheet" href="/static/libs/editor.md/css/style.css" /-->
   <link rel="stylesheet" href="/static/libs/editor.md/css/editormd.preview.css" />
+  <link rel="stylesheet" href="/static/css/myaffix.css" />
 {% endblock extrastyle %}
 
 {% block navmenu %}
@@ -126,12 +127,12 @@ <h1 class="post-title">
         <a href="{{link.link}}" title="{{link.name}}" target="_blank">{{link.name}}</a>
         {% endfor %}
       </div>
-      <div class="widget" style="margin-bottom:10px">
+      <div class="sidebar-toc" style="border:1px solid #ddd">
         <div class="widget-title">
             <i class="fa fa-list">目录</i>
         </div>
-      </div>
-      <div style="padding:0" class="markdown-body editormd-preview-container" id="sidebar-toc">
+        <div style="padding-left:0" class="markdown-body editormd-preview-container" id="sidebar-toc">
+        </div>
       </div>
     </div>
   </div>
@@ -147,6 +148,8 @@ <h1 class="post-title">
 <script src="/static/libs/editor.md/lib/flowchart.min.js"></script>
 <script src="/static/libs/editor.md/lib/jquery.flowchart.min.js"></script>
 <script src="/static/libs/editor.md/js/editormd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
+</script>
 <script type="text/javascript">
   var viewEditor;
   $(function(){
@@ -166,6 +169,23 @@ <h1 class="post-title">
     });
   });
 </script>
+<script type="text/javascript">
+    var tocTop = $(".sidebar-toc").offset().top;
+    var sidebarwid = document.getElementsByClassName("widget")[0].clientWidth;
+    document.getElementById("sidebar-toc").style.width = sidebarwid+'px';
+    window.addEventListener("resize", winresize);
+    var docheight = document.documentElement.clientHeight;
+    document.getElementById("sidebar-toc").style.maxHeight = docheight*0.7+'px';
+    function winresize(){
+        var docheight = document.documentElement.clientHeight;
+        document.getElementById("sidebar-toc").style.maxHeight = docheight*0.7+'px';
+    }
+    $('.sidebar-toc').affix({
+        offset: {
+            top: tocTop,
+        }
+    });
+</script>
 <script type="text/javascript">
   function confirmDelete(url_str){
     var url_to_delete = window.location.protocol+'//'+window.location.host+url_str;
