diff options
| -rw-r--r-- | layout/_partial/head.ejs | 5 | ||||
| -rw-r--r-- | layout/_partial/header.ejs | 20 | ||||
| -rw-r--r-- | layout/_partial/scripts.ejs | 21 | ||||
| -rw-r--r-- | layout/index.ejs | 35 |
4 files changed, 73 insertions, 8 deletions
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index 6e6f5fd..1206434 100644 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -20,9 +20,6 @@ <!-- Scripts and styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css"> - <% if (is_post() && theme.podcast && post.podcast) { %> - <script src="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.js"></script> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.css"> - <% } %> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"> <%- css("css/style.css") %> </head>
\ No newline at end of file diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index e69de29..e96f62b 100644 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -0,0 +1,20 @@ +<header class="header"> + <div class="header-title"> + <%= config.title %> + </div> + <nav class="header-navbar"> + <ul class="header-menu"> + <% for (let index in theme.navbar) { %> + <% + const mapping = theme.navbar[index]; + const link = mapping[0]; + const favicon = mapping[1]; + let outter = link.startsWith("https://") ? true : false; + %> + <a href="<%= link %>" target="<%= outter ? '_blank' : '_self' %>"> + <i class="<%= favicon %>"></i> + </a> + <% } %> + </ul> + </nav> +</header>
\ No newline at end of file diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 662702a..588c843 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -4,12 +4,29 @@ <script> window.lazyLoadOptions = { elements_selector: ".lazy", - threshold: 0 + threshold: 0, + effect: "fadeIn" }; </script> <% } %> <!-- Darkmode support --> -<script defer src="https://cdn.jsdelivr.net/npm/darkmode-js/lib/darkmode-js.min.js"></script> + <!-- Highlight.js support --> +<% if (theme.highlight.enable === true) { %> + <script defer src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script> + <link id="highlight-light-theme" rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/<%= theme.highlight.lightmode %>.css"> + <link id="highlight-dark-theme" rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/<%= theme.highlight.darkmode %>.css"> + <script> + + </script> +<% } %> + +<!-- Shikwasa Player support --> +<% if (is_post() && theme.podcast && page.podcast) { %> + <script defer src="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.js"></script> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.css"> +<% } %> diff --git a/layout/index.ejs b/layout/index.ejs index 9d0d7bd..1857e73 100644 --- a/layout/index.ejs +++ b/layout/index.ejs @@ -1,19 +1,50 @@ <section class="posts"> <% page.posts.each(function (post) { %> <article class="post"> + <!-- Post thumbnail with lazayload support --> <% if (post.thumbnail) { %> - <% if (theme.lazyload) { %> + <% if (theme.lazyload === true) { %> <div class="post-thumbnail lazy" data-bg="<%= post.thumbnail %>"></div> <% } else { %> <div class="post-thumbnail" style="background-image: url('<%= post.thumbnail %>');"></div> <% } %> <% } %> - <h1 class="post-title"><%= post.title %></h1> + + <!-- Post title and excerpt --> + <h1 class="post-title"> + <a class="post-link" href="<%- url_for(post.path) %>"> + <%= post.title %> + </a> + </h1> <% if (post.excerpt) { %> <div class="post-excerpt"><%- post.excerpt %></div> <% } else { %> <div class="post-content"><%- post.content %></div> <% } %> + + <!-- Post meta --> + <div class="post-meta"> + <% if (post.podcast && theme.podcast && post.duration) { %> + <% + const hour = Math.floor(post.duration / 3600); + const minute = Math.floor((post.duration / 60) % 60); + const second = Math.floor(post.duration % 60); + const duration = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0'); + %> + <div class="post-duration"><%- duration %></div> + <% } %> + <div class="post-time"> + <%- date(post.date, "MMM, D YYYY") %> + </div> + <% if (post.tags) { %> + <div class="post-tags"> + <% (post.tags).forEach(function(item) { %> + <span class="post-tag"><%= item.name %></span> + <% }); %> + </div> + <% } %> + </div> + </article> <% }) %> </section>
\ No newline at end of file |