layout/index.ejs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

<% if (theme.boardcast.enable) { %>
    <div class="columns">
        <div class="column is-8 is-offset-2">
            <article class="message is-<%- theme.boardcast.color %>">
                <div class="message-body">
                    <%= theme.boardcast.message %>
                </div>
            </article>
        </div>
    </div>
<% } %>
<% page.posts.each(function (post) { %>
    <div class="columns">
        <div class="column is-8 is-offset-2">
            <div class="card entry">
                <!-- Post thumbnail with lazayload support -->
                <% if (post.thumbnail) { %>
                    <div class="card-iamge">
                        <figure class="image is-16by9">
                            <% if (post.thumbnail) { %> 
                                <% if (theme.lazyload === true) { %>
                                    <img class="lazy" data-src="<%= post.thumbnail %>" />
                                <% } else { %>
                                    <img src="<%= post.thumbnail %>" />
                                <% } %>
                            <% } %>
                        </figure>
                    </div>
                <% } %>

                <div class="card-content">
                    
                    <!-- Post title -->
                    <p class="title is-4">
                        <%= post.title %>
                    </p>

                    <!-- Post meta info -->
                    <div class="level">
                        <div class="level-left">
                            <div class="level-item">

                                <!-- Podcast duration with post date -->
                                <% if (post.podcast && theme.podcast) { %>
                                    <div class="field is-grouped is-grouped-multiline">
                                        <div class="control">
                                            <div class="tags has-addons">
                                                <%
                                                    const duration = post.podcast.duration;
                                                    const hour = Math.floor(duration / 3600);
                                                    const minute = Math.floor((duration / 60) % 60);
                                                    const second = Math.floor(duration % 60);
                                                    const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
                                                %>
                                                <span class="tag is-danger">
                                                    <i class="fa fa-microphone"></i>
                                                </span>
                                                <span class="tag">
                                                    <%- viewstr %>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="control">
                                            <div class="tags has-addons">
                                                <span class="tag is-link">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                                <span class="tag">
                                                    <%- date(post.date, theme.timeformat) %>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                <% } else { %>
                                    <div class="tags has-addons">
                                        <span class="tag is-link">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <span class="tag">
                                            <%- date(post.date, theme.timeformat) %>
                                        </span>
                                    </div>
                                <% } %> 
                            </div>
                            
                            <!-- Post tags -->
                            <div class="level-item">
                                <% if (post.tags) { %>
                                    <div class="tags">
                                        <% (post.tags).forEach(function(item) { %>
                                            <span class="tag">
                                                # <%= item.name %>
                                            </span>
                                        <% }); %>
                                    </div>
                                <% } %>
                            </div>

                        </div>
                    </div>

                    <!-- Post content or excerpt -->
                    <section class="content has-text-weight-light is-size-6">
                        <% if (post.excerpt) { %>
                            <p><%- post.excerpt %></p>
                        <% } else { %>
                            <p><%- post.content %></p>
                        <% } %>
                    </section>
                </div>

                <div class="card-footer">
                    <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
                        <% if (post.podcast && theme.podcast) { %>
                            <%- __("listen") %>
                        <% } else { %> 
                            <%- __("read") %>
                        <% } %> 
                    </a>
                </div>

            </div>
        </div>
    </div>
<% }); %>

<!-- Page navigation -->
<% if (page.prev || page.next) { %>
    <div class="columns pagination-bar">
        <div class="column is-8 is-offset-2">
            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                <% if (page.prev) { %>
                    <a class="button auto-dark" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a>
                <% } else { %>
                    <a class="button is-disabled auto-dark" disabled><%- __("prev") %></a>
                <% } %> 
                <% if (page.next) { %>
                    <a class="button auto-dark" href="<%- url_for(page.next_link) %>"><%- __("next") %></a>
                <% } else { %>
                    <a class="button is-disabled auto-dark" disabled><%- __("next") %></a>
                <% } %> 
            </nav>
        </div>
    </div>
<% } %>