enhanced article styles, and profile features

Author: bennyxguo

_config.yml

@@ -19,6 +19,11 @@
 # Menu setting | format = title_name: link_url
 menu:
   PAGE: /page
+# Social media links
+socials:
+  github: "https://github.com/TriDiamond"
+  twitter: "https://twitter.com/TriDiamond6"
+  stackoverflow: "https://stackoverflow.com/users/7602324/tridiamond?tab=profile"
 
 # Enable table of content
 TOC: true

layout/_partial/post/article.ejs

@@ -91,6 +91,11 @@
                     <img src="<%- theme.avatar %>" height=300 width=300></img>
                     <p><%- config.author %></p>
                     <span><%- theme.descriptionOne %></span>
+                    <dl>
+                        <dd><a href="<%- theme.socials.github %>" target="_blank"><span class=" iconfont icon-github"></span></a></dd>
+                        <dd><a href="<%- theme.socials.twitter %>" target="_blank"><span class=" iconfont icon-twitter"></span></a></dd>
+                        <dd><a href="<%- theme.socials.stackoverflow %>" target="_blank"><span class=" iconfont icon-stack-overflow"></span></a></dd>
+                    </dl>
                 </div>
                 <ul>
                     <li><a href="/"><%- site.posts.length %> <p>文章</p></a></li>

layout/_partial/screen.ejs

@@ -55,7 +55,7 @@
         <% } %>
         <div class="md-content animated fadeIn">
             <% if (theme.html_truncate.enable) { %>
-                <%- htmlTruncate(first.content, theme.html_truncate.coverLength, {
+                <%- htmlTruncate(first.content, first.preview || theme.html_truncate.coverLength, {
                     ellipsis: theme.html_truncate.ellipsis,
                     excludes: theme.html_truncate.excludes,
                     keepWhitespaces: theme.html_truncate.keepWhitespaces,

source/css/dracula.css

@@ -19,7 +19,7 @@
     /* background: #100e17; */
     clear: both;
     color: #fff;
-    background: #001628;
+    background: #100e17;
     font-size: 16px;
   }
 

source/css/obsidian.css

@@ -1332,20 +1332,62 @@ h1.title {
   top: calc(1rem + 61px);
 }
 
+.article .sidebar .subbox dl {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  font-weight: 900;
+  margin-block-start: 1.2em;
+  margin-block-end: 0;
+}
+
+.article .sidebar .box .subbox dl dd {
+  display: block;
+  max-width: 100%;
+  text-align: center;
+  margin-inline-start: 0;
+  line-height: 28px;
+  transition: all 800ms linear;
+}
+
+.article .sidebar .box .subbox dl dd a:hover,
+.article .sidebar .box .subbox dl dd a span:hover,
+.article .sidebar .box .subbox dl dd:hover {
+  color: #100e17;
+}
+
+.article .sidebar .box .subbox dl dd:nth-last-of-type(2) {
+  padding-top: 2px;
+}
+
+.article .sidebar .box .subbox dl dd a,
+.article .sidebar .box .subbox dl dd a span {
+  font-size: 28px;
+  line-height: 28px;
+  padding-top: 0;
+}
+
 .article .sidebar .box ul {
   position: relative;
   top: 1.2rem;
   right: -1rem;
   display: grid;
   grid-template-columns: 100px 100px 100px;
-  font-weight: 900px;
+  font-weight: 900;
   font-size: 18px;
 }
 
 .article .sidebar .box ul li {
   display: block;
   max-width: 100%;
   text-align: center;
+  border-right: 1px solid rgba(158, 158, 158, 0.16);
+}
+
+.article .sidebar .box ul li:last-of-type {
+  border-right: none;
 }
 
 .article .sidebar .box ul li p {
@@ -1474,6 +1516,13 @@ h1.title {
   border: none;
 }
 
+.article p.image-caption {
+  color: #9E9E9E;
+  width: 100%;
+  text-align: center;
+  padding-top: 5px;
+}
+
 .article-header-wrapper {
   width: 100%;
   height: 500px;
@@ -1753,6 +1802,50 @@ h1.title {
   font-family: operator mono ssm a,operator mono ssm b,operator mono,source code pro,Menlo,Consolas,Monaco,monospace;
 }
 
+.md-content p,
+.md-content pre,
+.md-content blockquote {
+  margin: 0 0 2em;
+}
+
+.md-content h1,
+.md-content h2,
+.md-content h3,
+.md-content h4 {
+  margin-top: 1em;
+  margin-bottom: 0.8em;
+}
+
+.md-content blockquote > p {
+  margin: 0;
+}
+
+.md-content hr {
+  display: block;
+  margin-top: 30px;
+  margin-bottom: 20px;
+  border: 0;
+  font-size: 28px;
+  font-weight: 300;
+  unicode-bidi: isolate;
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  border: none;
+  text-align: center;
+  color: rgba(102, 128, 153, 1);
+  /*border-top: 1px solid rgba(102, 128, 153, 0.1)*/
+}
+
+.md-content hr:before {
+  content: "...";
+  line-height: 1.4;
+  font-style: italic;
+  text-indent: 0.6em;
+  letter-spacing: 0.6em;
+}
+
 #post0 .md-content {
   color:#fff;
   font-size: 16px;
@@ -1935,14 +2028,33 @@ h4 a:hover {
 }
 
 .content hr {
-  margin-top: 21px;
-  margin-bottom: 21px;
+  display: block;
+  margin-top: 30px;
+  margin-bottom: 20px;
   border: 0;
-  border-top: 1px solid rgba(102, 128, 153, 0.1)
+  font-size: 28px;
+  font-weight: 300;
+  unicode-bidi: isolate;
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  border: none;
+  text-align: center;
+  color: rgba(102, 128, 153, 0.6);
+  /*border-top: 1px solid rgba(102, 128, 153, 0.1)*/
+}
+
+.content hr:before {
+  content: "...";
+  line-height: 1.4;
+  font-style: italic;
+  text-indent: 0.6em;
+  letter-spacing: 0.6em;
 }
 
 .content p {
-  margin: 0 0 .8em;
+  margin: 0 0 2em;
 }
 
 .content ul,
@@ -1994,11 +2106,19 @@ h4 a:hover {
   font-size: 0.9rem;
 }
 
+.content img {
+  border-radius: 8px;
+}
+
 code,
 pre {
   font-family: "Source Code Pro", monospace
 }
 
+pre {
+  margin: 2em 0;
+}
+
 code {
   background: rgba(99, 99, 99, 0.07);
   background: #b2fefa;
@@ -2008,7 +2128,7 @@ code {
   overflow-wrap: break-word;
   word-wrap: break-word;
   padding: .1rem .3rem .2rem;
-  border-radius: .2rem;
+  border-radius: 8px;
   opacity: 0.9;
 }
 
@@ -2020,7 +2140,7 @@ code {
 
 .content blockquote {
   color: #656565;
-  margin: 0 0 1.1em;
+  margin: 0 0 2em;
   border-left: 3px solid var(--code-gradient-light);
   border-left-width: 6px;
   background-color: rgba(119, 119, 119, 0.05);

source/js/obsidian.js

@@ -1,3 +1,8 @@
+/**
+ * Watch the TOC during scroll and fill in active status
+ * @param {} menuSelector 
+ * @param {*} options 
+ */
 function scrollSpy(menuSelector, options) {
     var menu = $(menuSelector);
     if(!menu)
@@ -26,15 +31,27 @@ function scrollSpy(menuSelector, options) {
             for(var target = menu.find("[href='#" + id + "']");
                 target.length && !target.is(menu);
                 target = target.parent()) {
-                if(target.is("li"))
-                    newActive.push(target[0]);
-            }
+                    if(target.is("li"))
+                        newActive.push(target[0]);
+                }
             active = $(newActive).addClass(activeClassName).trigger("scrollspy");
             lastId = id;
         }
     });
 }
 
+/**
+ * Buidling the caption html in an aritle
+ */
+function buildImgCaption () {
+    var images = $('.content').find('img');
+
+    images.each(function () {
+        var caption = $(this).attr('alt');
+        $('.content').find("[alt='" + caption + "']").parent().append('<p class="image-caption">"' + caption + '"</p>');
+    });
+}
+
 var Home = location.href,
     Pages = 4,
     xhr,
@@ -119,19 +136,17 @@ var Obsidian = {
                 case 'push':
                     history.pushState(state, title, url)
                     $('#preview').html($(data).filter('#single'));
-                    Obsidian.preview();
                     break;
                 case 'replace':
                     history.replaceState(state, title, url)
                     $('#preview').html($(data).filter('#single'));
-                    Obsidian.preview();
                     break;
             }
             document.title = title;
             $('#preview').html($(data).filter('#single'))
             switch (flag) {
                 case 'push':
-                    Obsidian.preview()
+                    Obsidian.preview();
                     break;
                 case 'replace':
                     Obsidian.initArticleJs();
@@ -168,6 +183,7 @@ var Obsidian = {
                     'position': 'static',
                     // 'overflow-y': 'auto'
                 });
+                console.log('preivew', 'initArticleJs')
                 Obsidian.initArticleJs();
             }, 500);
         }, 0);
@@ -245,7 +261,8 @@ var Obsidian = {
         });
         Obsidian.setCodeRowWithLang();
         Obsidian.tocSpy(200);
-        initValine()
+        initValine();
+        buildImgCaption();
     },
     setCodeRowWithLang: function() {
         // Get the programming type of the current code block
@@ -635,6 +652,7 @@ $(function() {
     }
     if ($('.article').length) {
         Obsidian.tocSpy(200);
+        buildImgCaption();
     }
     initialTyped();
     Obsidian.setCodeRowWithLang();