feat: update single page

gh-pages
nodejh 4 years ago
parent 4389d68302
commit 52d788bd27

@ -0,0 +1 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" class="anchor">🔗</a></h{{ .Level }}>

@ -0,0 +1,4 @@
<p class="markdown-image">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>

@ -0,0 +1 @@
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

@ -14,6 +14,6 @@
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
{{ block "footer" . }}{{ end }} {{ partial "footer.html" . }}
</body> </body>
</html> </html>

@ -0,0 +1,55 @@
{{ partial "head.html" . }}
<body>
{{ partial "navigation.html" . }}
<section id="wrapper" class="post">
<article>
<header>
<h1>
{{ .Title }}
</h1>
<h2 class="headline">
{{ .Date.Format "Jan 2, 2006 15:04" }}
· {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }}
· {{ .ReadingTime }} minute read
<span class="tags">
{{ with .Params.tags }}
{{ if ge (len .) 1 }}
{{ range . }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">{{ . }}</a>
{{ end }}
{{ end }}
{{ end}}
</span>
</h2>
</header>
{{ if .Site.Params.enableToc }}
{{ if .TableOfContents }}
<div id="toc">
{{ .TableOfContents }}
</div>
{{ end }}
{{ end }}
<section id="post-body">
{{ .Content }}
</section>
</article>
{{ if .Site.Params.enableShare }}
{{ partial "share.html" . }}
{{ end }}
{{ if .Site.Params.enableDisqus }}
{{ partial "disqus.html" . }}
{{ end }}
{{ if .Site.Params.showLatestPosts }}
{{ partial "latest-posts.html" . }}
{{ end }}
{{ partial "footer.html" . }}
</section>
{{ partial "js.html" . }}
</body>
</html>

@ -1,55 +1,44 @@
{{ partial "head.html" . }} {{ define "main" }}
<body>
{{ partial "navigation.html" . }}
<section id="wrapper" class="post"> <section id="single">
<article> <h1 class="title">{{ .Title }}</h1>
<header>
<h1> <div class="tip">
{{ .Title }} <span>
</h1>
<h2 class="headline">
{{ .Date.Format "Jan 2, 2006 15:04" }} {{ .Date.Format "Jan 2, 2006 15:04" }}
· {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} </span>
· {{ .ReadingTime }} minute read <span class="split">
<span class="tags"> ·
{{ with .Params.tags }} </span>
{{ if ge (len .) 1 }} <span>
{{ range . }} {{ if lt 1 .WordCount }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">{{ . }}</a> {{ .WordCount }} words
{{ end }} {{ else }}
{{ .WordCount }} word
{{ end }} {{ end }}
{{ end}}
</span> </span>
</h2> <span class="split">
</header> ·
{{ if .Site.Params.enableToc }} </span>
{{ if .TableOfContents }} <span>
<div id="toc"> {{ .ReadingTime }} minute read
{{ .TableOfContents }} </span>
</div> </div>
{{ end }}
{{ end }}
<section id="post-body">
{{ .Content }}
</section>
</article>
{{ if .Site.Params.enableShare }} <div class="content">
{{ partial "share.html" . }} {{ .Content }}
{{ end }} </div>
{{ if .Site.Params.enableDisqus }} {{ with .Params.tags }}
{{ partial "disqus.html" . }} <div class="tags">
{{ range . }}
<a href="{{ "tags/" | absURL }}{{ . | urlize }}">{{ . }}</a>
{{ end }} {{ end }}
</div>
{{ end}}
{{ if .Site.Params.showLatestPosts }} {{ partial "comment.html" . }}
{{ partial "latest-posts.html" . }} </section>
{{ end }}
{{ partial "footer.html" . }} {{ end }}
</section>
{{ partial "js.html" . }}
</body>
</html>

@ -0,0 +1,4 @@
<div id="comment">
<!-- https://gohugo.io/templates/internal/#use-the-disqus-template -->
{{ template "_internal/disqus.html" . }}
</div>

@ -2,6 +2,7 @@
{{ if .Site.Social }} {{ if .Site.Social }}
{{ partial "social.html" . }} {{ partial "social.html" . }}
{{ end }} {{ end }}
<p class="small"> <p class="small">
{{ with .Site.Params.copyright }} {{ with .Site.Params.copyright }}
{{ . | markdownify }} {{ . | markdownify }}

@ -1,130 +1,75 @@
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0;
}
body { body {
line-height: 1; line-height: 1;
font: normal 14px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif; font: normal 15px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
line-height: 1.75;
letter-spacing: 0.008em;
} }
blockquote, a {
q { text-decoration: none;
quotes: none; color: #5badf0;
} }
blockquote:before, a:hover {
blockquote:after, color: #0366d6;
q:before,
q:after {
content: none;
} }
table { /* markdown content styles */
border-collapse: collapse; blockquote {
border-spacing: 0; margin-top: 5px;
margin-bottom: 5px;
padding-left: 1em;
margin-left: 0px;
border-left: 3px solid #eee;
color: #757575;
} }
*, h1,
*:before, h2,
*:after { h3 {
-moz-box-sizing: border-box; font-weight: 400;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
p {
a { margin-block-start: 1.5em;
text-decoration: none; margin-block-end: 1.5em;
color: #5badf0;
} }
p,
a:hover { pre {
color: #0366d6; white-space: break-spaces;
line-break: anywhere;
word-break: break-word;
}
.markdown-image img {
max-width: 100%;
}
.anchor {
font-size: 100%;
visibility: hidden;
color:silver;
}
h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a {
visibility: visible
}
.highlight pre {
padding: 7px;
}
p code {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: inherit;
background-color: rgba(0, 0, 0, 0.06);
padding: 0 2px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 2px 2px;
line-height: inherit;
word-wrap: break-word;
text-indent: 0;
}
pre code {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
} }
@ -183,15 +128,23 @@ nav.navigation a.button {
} }
} }
/* comment */
#comment {
margin-top: 64px;
}
/* footer */
#footer {
margin-top: 100px;
}
/* main content */ /* main content */
.main { .main {
max-width: 580px; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 24px;
} }
/* profile */ /* profile */
.profile { .profile {
@ -199,7 +152,6 @@ nav.navigation a.button {
text-align: center; text-align: center;
} }
.profile .avatar { .profile .avatar {
display: inline-block; display: inline-block;
width: 80px; width: 80px;
@ -218,12 +170,17 @@ nav.navigation a.button {
.profile h2 { .profile h2 {
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
color: #aaa; color: #757575;
margin-top: 10px; margin-top: 10px;
} }
/* index post list */ /* index post list */
#list-page {
max-width: 580px;
margin: 0 auto;
padding: 0 24px;
}
#list-page .item { #list-page .item {
margin: 48px 0 0 0; margin: 48px 0 0 0;
} }
@ -233,6 +190,8 @@ nav.navigation a.button {
color: #333; color: #333;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
margin: 0;
width: 80%;
} }
#list-page .title a { #list-page .title a {
@ -245,14 +204,16 @@ nav.navigation a.button {
} }
#list-page .date { #list-page .date {
width: 20%;
float: right; float: right;
text-align: right;
position: relative; position: relative;
top: 1px; top: 1px;
color: #bbb; color: #bbb;
} }
#list-page .summary { #list-page .summary {
color: #8c8c8c; color: #757575;
margin-top: 12px; margin-top: 12px;
} }
@ -280,3 +241,54 @@ nav.navigation a.button {
#list-page .pagination .next { #list-page .pagination .next {
float: right; float: right;
} }
/* single page */
#single {
max-width: 680px;
margin: 60px auto 0 auto;
padding: 0 64px;
}
#single .title {
text-align: center;
font-size: 32px;
font-weight: 400;
line-height: 48px;
}
@media (max-width: 700px) {
#single {
padding: 0 18px;
margin: 20px auto 0 auto;
}
#single .title {
font-size: 24px;
line-height: 32px;
}
}
#single .tip {
text-align: center;
color: #8c8c8c;
margin-top: 18px;
font-size: 14px;
}
#single .tip .split {
margin: 0 4px;
}
#single .content {
margin-top: 36px;
}
#single .tags {
margin-top: 24px;
}
#single .tags a {
background: #f2f2f2;
padding: 4px 7px;
color: #757575;
font-size: 14px;
margin-right: 3px;
}

Loading…
Cancel
Save