feat: add bilibili diagram echarts and improve style

This commit is contained in:
Dillon
2019-08-17 23:16:09 +08:00
parent 00b6b7f6ce
commit 6981f1e285
26 changed files with 1182 additions and 133 deletions

View File

@@ -1,4 +1,4 @@
{{ if and .IsPage (ne .Params.comment false) -}}
{{ if eq (getenv "HUGO_ENV") "production" | and .IsPage | and (ne .Params.comment false) -}}
<!-- Disqus Comment System-->
{{- if .Site.DisqusShortname -}}
<div id="disqus_thread"></div>

View File

@@ -14,6 +14,15 @@
<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" onload="renderMathInElement(document.body);"></script>
` }}
<!-- mermaid https://github.com/knsv/mermaid -->
{{ $diagram := `
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.2.3/dist/mermaid.min.js" integrity="sha256-4s3fF5e1iWRLtiV7mRev7n17oALqqDHbWrNqF3/r7jU=" crossorigin="anonymous"></script>
<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>
` }}
<!-- ECharts https://github.com/apache/incubator-echarts -->
{{ $echarts := `
<script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js" integrity="sha256-XNiBJGZuErA+MsbKwxuTqNMimobZMsVS79SkTUroRz4=" crossorigin="anonymous"></script>
` }}
<!-- TypeIt https://github.com/alexmacarthur/typeit -->
{{ $typeit := `
<script src="https://cdn.jsdelivr.net/npm/typeit@6.0.3/dist/typeit.min.js" integrity="sha256-jl1b2Wp4cXCUyX8FxPZ8Z0PPIPV3QYNb/jPSLGDej2c=" crossorigin="anonymous"></script>
@@ -35,12 +44,34 @@
{{ if .IsPage }}
{{ $lazysizes | safeHTML }}
{{ if .Scratch.Get "music" }}
{{ $metingjs | safeHTML }}
{{ if .Scratch.Get "diagram" }}
{{ $diagram | safeHTML }}
{{ end }}
{{ with .Scratch.Get "echartsMap" }}
{{ $echarts | safeHTML }}
{{ $echartsMap := . }}
<script>var echartsMap = {
{{ range $key, $var := $echartsMap }}
{{ $key }}: {{ $var | safeJS }},
{{ end }}
};var echartsArr=[];</script>
{{ end }}
{{ if or .Params.math .Site.Params.math }}
{{ $katex | safeHTML }}
{{ end }}
{{ if .Scratch.Get "music" }}
{{ $metingjs | safeHTML }}
{{ end }}
{{ with .Scratch.Get "countdownMap" }}
{{ $countdown | safeHTML }}
<script>var countdownMap = {{ . | jsonify | safeJS }};</script>
{{ end }}
{{ $scripts = $scripts | append $dynamicToTop }}
{{ $scripts = $scripts | resources.Concat "/js/vendor_post.js" | resources.Minify }}
{{ else }}
@@ -56,10 +87,6 @@
{{ end }}
<script>var typeitArr = {{ $typeitArr | jsonify | safeJS }};</script>
{{ end }}
{{ with .Scratch.Get "countdownMap" }}
{{ $countdown | safeHTML }}
<script>var countdownMap = {{ . | jsonify | safeJS }};</script>
{{ end }}
<script src="{{ $scripts.RelPermalink }}" async=""></script>

View File

@@ -22,33 +22,39 @@
{{ range . }}
{{- $name := . -}}
{{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
<i class="far fa-folder"></i>&nbsp;
<a href="{{ .Permalink }}">{{ $name }}</a>
<i class="far fa-folder"></i>&nbsp;<a href="{{ .Permalink }}">{{ $name }}</a>
{{ end -}}
{{ end }}
</span>
{{- end }}
</div>
<div class="post-meta-other">
<i class="far fa-calendar-alt"></i>&nbsp;
<span class="post-time"><time datetime={{ $publish_date }}>{{ $publish_date }}</time></span>&nbsp;
<i class="fas fa-pencil-alt"></i>&nbsp;
{{ T "wordCount" .WordCount }}&nbsp;
<i class="far fa-clock"></i>&nbsp;
{{ T "readingTime" .ReadingTime }}&nbsp;
{{ if and .Site.Params.valine.enable .Site.Params.valine.visitor }}
<span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
<i class="far fa-eye"></i>
{{ T "pageviews" | safeHTML }}
</span>
{{ end }}
<span class="post-time"><i class="far fa-calendar-alt"></i>&nbsp;<time datetime={{ $publish_date }}>{{ $publish_date }}</time>&nbsp;</span>
<i class="fas fa-pencil-alt"></i>&nbsp;{{ T "wordCount" .WordCount }}&nbsp;
<i class="far fa-clock"></i>&nbsp;{{ T "readingTime" .ReadingTime }}&nbsp;
{{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.valine.enable | and .Site.Params.valine.visitor -}}
<span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
<i class="far fa-eye"></i>&nbsp;{{ T "pageviews" | safeHTML }}&nbsp;
</span>
{{- end -}}
</div>
</div>
{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
<div class="post-toc" id="post-toc">
<h2 class="post-toc-title">{{ T "toc" }}</h2>
{{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
<div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
{{.TableOfContents}}
</div>
</div>
{{- end }}
<div class="post-content">
<!--featured_image-->
{{ with .Params.featured_image }}
<img src="{{ . }}" class="featured_image">
<img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
{{ end }}
<!-- end featured_image-->
@@ -60,45 +66,39 @@
{{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
{{ $finalContent }}
</div>
<div class="post-info">
<p class="post-info-item">
<span>{{ T "lastMod" }}:</span>
<span>{{ $modify_date }}</span>
</p>
<p class="post-info-item">
{{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
<span>{{ T "share" }}:</span>
<span>{{ partial "post/share-links.html" . }}</span>
{{ end }}
</p>
</div>
<div class="post-tags">
<section>
{{ with .Params.tags }}
{{ range . }}
<span class="tag">
<i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/">&nbsp;{{.}}&nbsp;</a>
</span>
<div class="post-footer">
<div class="post-info">
<div class="post-info-mod"><span>{{ printf (T "lastMod") $modify_date }}</span></div>
<div class="post-info-share">
{{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
<span>{{ partial "post/share-links.html" . }}</span>
{{ end }}
{{ end }}
</section>
<section>
<span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>
|
<span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
</section>
</div>
</div>
</div>
<div class="post-nav">
{{ if .PrevInSection }}
<a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i>&nbsp;{{ .PrevInSection.Title}}</a>
{{ end }}
{{ if .NextInSection }}
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="fas fa-angle-right"></i></a>
{{ end }}
<div class="post-tags">
<section>
{{ with .Params.tags }}
{{ range . }}
<span class="tag">
<i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/">&nbsp;{{.}}&nbsp;</a>
</span>
{{ end }}
{{ end }}
</section>
<section>
<span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
</section>
</div>
<div class="post-nav">
{{ if .PrevInSection }}
<a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i>&nbsp;{{ .PrevInSection.Title}}</a>
{{ end }}
{{ if .NextInSection }}
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="fas fa-angle-right"></i></a>
{{ end }}
</div>
</div>
<div class="post-comment">

View File

@@ -0,0 +1,7 @@
<div class="bilibili">
{{- if .IsNamedParams -}}
<iframe src="//player.bilibili.com/player.html?aid={{ .Get "aid" }}&cid={{ .Get "cid" }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
{{- else -}}
<iframe src="//player.bilibili.com/player.html?aid={{ .Get 0 }}&cid={{ .Get 1 }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
{{- end -}}
</div>

View File

@@ -0,0 +1,5 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
{{ .Page.Scratch.Set "diagram" "true" }}
<div class="mermaid">
{{- .Inner -}}
</div>

View File

@@ -0,0 +1,14 @@
<!-- shuffle md5 as id -->
{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "ec-%s" -}}
{{ $echartsMap := .Page.Scratch.Get "echartsMap" -}}
{{ if $echartsMap -}}
{{ $echartsMap = dict $id .Inner | merge $echartsMap -}}
{{ else -}}
{{ $echartsMap = dict $id .Inner -}}
{{ end -}}
{{ .Page.Scratch.Set "echartsMap" $echartsMap -}}
{{ if .IsNamedParams }}
<div class="echarts" id="{{ $id }}" style="width: {{ .Get "width" }}; height: {{ .Get "height" }};"></div>
{{ else }}
<div class="echarts" id="{{ $id }}" style="width: {{ .Get 0 }}; height: {{ .Get 1 }};"></div>
{{ end }}

View File

@@ -1,4 +1,4 @@
{{ .Page.Scratch.Set "music" "true" }}
{{ .Page.Scratch.Set "music" "true" -}}
{{ if .IsNamedParams }}
<meting-js server={{ .Get "server" }} type={{ .Get "type" }} id={{ .Get "id" }}
{{ with .Get "autoplay" }}