fea: katex and disqus support

exampleSite/config.toml

@@ -14,6 +14,9 @@ theme = "hugo-bootstrap"
   tag = "tags"
   category = "categories"
 
+# disqus
+# disqusShortname = "xxxxxx"
+
 # Google analytics
 # googleAnalytics = ""
 
@@ -80,6 +83,9 @@ theme = "hugo-bootstrap"
   # Default author
   author = "John Doe"
 
+  # Enable katex globally, or add "katex: true" for specific post
+  katex = true
+
   # Date format (default: Jan 2, 2006)
   # date_format = "Jan 2, 2006"
 

layouts/_default/single.html

@@ -24,5 +24,7 @@ <h4>{{ i18n "translations" }}</h4>
     {{ partial "related" . }}
 
 </article>
-
+{{ if and (not .Params.nocomment) .Site.DisqusShortname }}
+  {{ template "_internal/disqus.html" . }}
+{{ end }}
 {{ end }}

layouts/partials/footer.html

@@ -6,6 +6,45 @@
 {{ $copyright := default $thanks .Site.Copyright }}
 {{ $colorScheme := default "light" .Site.Params.footer.colorScheme }}
 
+{{ if $.Param "katex" }}
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js"
+    integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ"
+    crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js"
+    integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
+    crossorigin="anonymous"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        renderMathInElement(document.body,
+            {
+                delimiters: [
+                    { left: "$$", right: "$$", display: true },
+                    { left: "$", right: "$", display: false },
+                ]
+            }
+        );
+
+        var inlineMathArray = document.querySelectorAll("script[type='math/tex']");
+        for (var i = 0; i < inlineMathArray.length; i++) {
+            var inlineMath = inlineMathArray[ i ];
+            var tex = inlineMath.innerText || inlineMath.textContent;
+            var replaced = document.createElement("span");
+            replaced.innerHTML = katex.renderToString(tex, { displayMode: false });
+            inlineMath.parentNode.replaceChild(replaced, inlineMath);
+        }
+
+        var displayMathArray = document.querySelectorAll("script[type='math/tex; mode=display']");
+        for (var i = 0; i < displayMathArray.length; i++) {
+            var displayMath = displayMathArray[ i ];
+            var tex = displayMath.innerHTML;
+            var replaced = document.createElement("span");
+            replaced.innerHTML = katex.renderToString(tex.replace(/%.*/g, ''), { displayMode: true });
+            displayMath.parentNode.replaceChild(replaced, displayMath);
+        }
+    });
+</script>
+{{ end }}
+
 <footer class="blog-footer w-100">
     <nav class="navbar navbar-{{ $colorScheme }} bg-{{ $colorScheme }}">
         <p class="w-100 text-center">{{ $copyright }}</p>

layouts/partials/head-meta.html

@@ -4,3 +4,8 @@
 
 {{ template "_internal/opengraph.html" . }}
 {{ template "_internal/twitter_cards.html" . }}
+
+{{ if $.Param "katex" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css"
+    integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
+{{ end }}

static/css/style.css

@@ -1,8 +1,67 @@
-.blog-header, .blog-post, .blog-pagination {
-  margin-bottom: 2rem;
+.blog-header,
+.blog-post,
+.blog-pagination {
+    margin-bottom: 2rem;
 }
 
+
 /* Make sure the image size is reasonable. */
+
 .blog-post img {
-  max-width: 100%;
+    max-width: 100%;
 }
+
+blockquote {
+    color: #999;
+    border-left: .5rem solid #d7dbe0;
+    background-color: #f8f9fa;
+    margin: .5rem 0;
+    padding-left: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 0.5rem;
+}
+
+blockquote p {
+    margin-top: 0;
+    padding-left: 1rem;
+    font-style: italic;
+}
+
+blockquote:before {
+    color: #ccc;
+    content: '\201C';
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+}
+
+article table:not([style]) {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+    background-color: transparent;
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
+    border-bottom-color: #dee2e6
+}
+
+article table:not([style]) td,
+article table:not([style]) th {
+    padding: .75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6
+}
+
+article table:not([style]) thead th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dee2e6
+}
+
+article table:not([style]) tbody+tbody {
+    border-top: 2px solid #dee2e6
+}
+
+article table:not([style]) {
+    background-color: #fff
+}