PageSourceSearch

https://jekyll-theme-gungnir.vercel.app/theme/

html jekyll-theme-gungnir.vercel.app collected 2026-10-03 07:08:45 UTC 77,841 bytes, 2,469 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4  <meta charset="utf-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
7  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
8  <meta name="description" content="Jekyll version of the blog theme Gungnir.">
9  <meta name="keywords"  content="jekyll, theme, blog, blog theme">
10  <meta name="theme-color" content="#000000">
11
12  <!-- Open Graph -->
13  <meta property="og:title" content="[Jekyll] Theme Gungnir - Jekyll theme Gungnir">
14  
15  <meta property="og:type" content="article">
16  <meta property="og:description" content="">
17  
18  
19  
20  
21  <meta property="og:image" content="https://jekyll-theme-gungnir.vercel.appimg/header-avatar.jpeg">
22  <meta property="og:url" content="https://jekyll-theme-gungnir.vercel.app/theme/">
23  <meta property="og:site_name" content="Jekyll theme Gungnir">
24
25  <title>[Jekyll] Theme Gungnir - Jekyll theme Gungnir</title>
26
27  <!-- Web App Manifest -->
28  <link rel="manifest" href="/pwa/manifest.json">
29
30  <!-- Favicon -->
31  <link rel="shortcut icon" href="/img/favicon.svg">
32
33  <!-- Canonical URL -->
34  <link rel="canonical" href="https://jekyll-theme-gungnir.vercel.app/theme/"><!-- Bootstrap Core CSS -->
35  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
36
37  <!-- Fonts -->
38  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200"/>
39  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500"/>
40
41  <!-- Custom Fonts -->
42  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet" type="text/css">
43
44  <!-- Font Awesome Animation -->
45  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/font-awesome-animation.min.css" rel="stylesheet" type="text/css">
46
47  <!-- Custom CSS -->
48  <link rel="stylesheet" href="/css/gungnir.css">
49
50  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
51  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
52  <!--[if lt IE 9]>
53      
53<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
53
54      
54<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
54
55  <![endif]-->
56
57  <!-- ga & ba script hoook -->
58  
58<script></script>
58<!-- I have compressed all js dependencies into `lib.min.js` using jsDelivr -->
59  
59<script src="/js/lib.min.js"></script>
59
60</head>
61
62
63  <!-- hack iOS CSS :active style -->
64  <body ontouchstart="">
65    <!-- Renovamen: add menu button -->
66    <div class="menu-btn-container">
67  <div class="menu-btn-wrapper">
68    <div class="menu-btn">
69      <div class="menu-btn-icon">
70        <span></span>
71        <span></span>
72        <span></span>
73      </div>
74      <div class="menu-text"></div>
75      <svg class="menu-svg">
76        <circle class="menu-border" cx="50%" cy="50%" r="48%"></circle>
77      </svg>
78    </div>
79    <div class="menu-btn-child-wrapper">
80      <div class="menu-btn-child" id="menu-theme-btn">
81        <span class="fa icon-theme"></span>
82      </div>
83      <div class="menu-btn-child" onclick="smoothTo('bottom')">
84        <i class="fas fa-chevron-down"></i>
85      </div>
86      <div class="menu-btn-child" onclick="smoothTo('top')">
87        <i class="fas fa-chevron-up"></i>
88      </div>
89      
90      
91      <div class="menu-btn-child" id="menu-toc-btn">
92        <i class="fas fa-list-ul"></i>
93      </div>
94      
95      
96      <div class="menu-btn-child" id="menu-navbar-btn">
97        <i class="far fa-window-restore"></i>
98      </div>
99    </div>
100  </div>
101</div>
102
103<script type="text/javascript">
104  // open menu
105  $(".menu-btn").click(function () {
106    $(".menu-btn-container").toggleClass("open");
107  });
108
109  // open navbar
110  $("#menu-navbar-btn").click(function () {
111    mobileNavToggle();
112  });
113
114  // open catalog
115  $("#menu-toc-btn").click(function () {
116    $(".side-catalog").toggleClass("open");
117  });
118
119  // set theme icon in menu
120  function setThemeIcon(newTheme) {
121    const icons = {
122      light: '"\\f185"',
123      dark: '"\\f186"',
124      sepia: '"\\f0f4"',
125    };
126    $("#menu-theme-btn").append(
127      "<style>.icon-theme:before{content:" + icons[newTheme] + "}</style>"
128    );
129  }
130
131  function toggleTheme() {
132    const themes = ["light", "dark", "sepia"];
133    // get current theme
134    const currentTheme = window.__theme;
135    const currentIndex = themes.indexOf(currentTheme);
136    // set next theme
137    const nextIndex = (currentIndex + 1) % themes.length;
138    const nextTheme = themes[nextIndex];
139    window.__setPreferredTheme(nextTheme);
140    setThemeIcon(nextTheme);
141  }
142
143  // change theme
144  $("#menu-theme-btn").click(function () {
145    toggleTheme();
146  });
147</script>
147
148
149
150    <div class="main-container">
151      <!-- Navigation -->
152
153<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
154
155  <div class="container-fluid">
156    <!-- Brand and toggle get grouped for better mobile display -->
157    <div class="navbar-header page-scroll">
158      <!-- navbar toggle for old mobile menu button (by Hux) -->
159      <!-- <button type="button" class="navbar-toggle">
160        <span class="sr-only">Toggle navigation</span>
161        <span class="icon-bar"></span>
162        <span class="icon-bar"></span>
163        <span class="icon-bar"></span>
164      </button> -->
165      <a class="navbar-brand" href="/">$ cd /home/</a>
166    </div>
167
168    <!-- Collect the nav links, forms, and other content for toggling -->
169    <div id="huxblog_navbar">
170      <div class="navbar-collapse">
171        <ul class="nav navbar-nav navbar-right">
172          
173          <li>
174            
175            <a href="/" class="faa-parent animated-hover">
176            
177              
178              <i class="fab fa-fort-awesome fa-lg faa-wrench"></i>
179              
180              Home
181            </a>
182            
183          </li>
184          
185          <li>
186            
187            <a class="faa-parent animated-hover">
188            
189              
190              <i class="fas fa-paw fa-lg faa-wrench"></i>
191              
192              About
193            </a>
194            
195            <ul class="sub-menu">
196              
197              <li>
198                <a href="/about/" class="faa-parent animated-hover">
199                <i class="fas fa-user-astronaut fa-lg faa-wrench"></i>
200                Me
201                </a>
202              </li>
203              
204              <li>
205                <a href="/theme/" class="faa-parent animated-hover">
206                <i class="fas fa-meteor fa-lg faa-wrench"></i>
207                Theme
208                </a>
209              </li>
210              
211            </ul>
212            
213          </li>
214          
215          <li>
216            
217            <a href="/archive/" class="faa-parent animated-hover">
218            
219              
220              <i class="fas fa-archive fa-lg faa-wrench"></i>
221              
222              Archive
223            </a>
224            
225          </li>
226          
227          <li>
228            
229            <a href="/links/" class="faa-parent animated-hover">
230            
231              
232              <i class="fas fa-link fa-lg faa-wrench"></i>
233              
234              Links
235            </a>
236            
237          </li>
238          
239
240          <li>
241            <a id="search-btn" class="faa-parent animated-hover">
242              <i class="fas fa-search fa-lg faa-wrench"></i> Search
243            </a>
244          </li>
245        </ul>
246      </div>
247    </div>
248    <!-- /.navbar-collapse -->
249  </div>
250  <!-- /.container -->
251</nav>
252
253<!-- Old Mobile Navbar Script (By Hux) -->
254<!-- 
254<script>
255  // Drop Bootstarp low-performance Navbar
256  // Use customize navbar with high-quality material design animation
257  // in high-perf jank-free CSS3 implementation
258  var $body   = document.body;
259  var $toggle = document.querySelector(".navbar-toggle");
260  var $navbar = document.querySelector("#huxblog_navbar");
261  var $collapse = document.querySelector(".navbar-collapse");
262
263  var __HuxNav__ = {
264    close: function() {
265      $navbar.className = " ";
266      // wait until animation end.
267      setTimeout(function() {
268        // prevent frequently toggle
269        if($navbar.className.indexOf("in") < 0) {
270          $collapse.style.height = "0px"
271        }
272      },400)
273    },
274    open: function() {
275      $collapse.style.height = "auto"
276      $navbar.className += " in";
277    }
278  }
279
280  // Bind Event
281  $toggle.addEventListener("click", function(e) {
282    if ($navbar.className.indexOf("in") > 0) {
283      __HuxNav__.close()
284    } else {
285      __HuxNav__.open()
286    }
287  })
288
289  /**
290    * Since Fastclick is used to delegate "touchstart" globally
291    * to hack 300ms delay in iOS by performing a fake "click",
292    * Using "e.stopPropagation" to stop "touchstart" event from
293    * $toggle/$collapse will break global delegation.
294    *
295    * Instead, we use a "e.target" filter to prevent handler
296    * added to document close HuxNav.
297    *
298    * Also, we use "click" instead of "touchstart" as compromise
299    */
300  document.addEventListener("click", function(e){
301    if(e.target == $toggle) return;
302    if(e.target.className == "icon-bar") return;
303    __HuxNav__.close();
304  })
305</script>
305 -->
306
307
308      <!-- Image to hack wechat -->
309<!-- <img src="/img/theme.jpg" width="0" height="0"> -->
310
311<!-- Post Header -->
312
313
314<style type="text/css">
315  header.intro-header{
316    position: relative;
317    background-image: url('/img/theme.jpg');
318    background: ;
319  }
320
321  
322  header.intro-header .header-mask{
323    width: 100%;
324    height: 100%;
325    position: absolute;
326    background: rgba(40, 57, 101, .4);
327  }
328  
329</style>
330
331
332
333
334
335
336
337<header class="intro-header">
338
339  <div class="header-mask"></div>
340  
341  <div class="container">
342    <div class="row">
343      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
344        <div class="post-heading">
345          <div class="tags">
346            
347          </div>
348          <h1>[Jekyll] Theme Gungnir</h1>
349          
350          <h2 class="subheading">Any oath sworn on Gungnir cannot be broken.</h2>
351          
352        </div>
353      </div>
354    </div>
355  </div>
356</header>
357
358
359
360
361
362
363
364
365
366
367
368
369<!-- Post Content -->
370<article>
371  <div class="container">
372    <div class="row">
373      <!-- Post Container -->
374      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">
375        <!-- Multi-Lingual -->
376        
377          <!-- Language Selector -->
378<select class="sel-lang" onchange="onLanChange(this.options[this.options.selectedIndex].value)">
379  <option value="0" selected>中文 | Chinese</option>
380  <option value="1">英文 | English</option>
381</select>
382
383        
384
385        <!-- Chinese Version -->
386<div class="zh post-container">
387    
388    <h1 id="这大概是一篇文档">这大概是一篇文档</h1>
389
390<p>Github: <a href="https://github.com/Renovamen/jekyll-theme-gungnir" target="_blank"><i class="fas fa-link"></i> Renovamen/jekyll-theme-gungnir</a></p>
391
392<p>在 <a href="https://github.com/Huxpro/huxpro.github.io" target="_blank">Huxpro/huxpro.github.io</a> 的基础上瞎改的的主题,同时<del>照搬</del>借鉴了很多其他主题的代码和设计,包括但不限于 <a href="https://github.com/mashirozx/Sakura/" target="_blank">mashirozx/Sakura</a>、<a href="https://github.com/kitian616/jekyll-TeXt-theme" target="_blank">kitian616/jekyll-TeXt-theme</a>、<a href="https://github.com/Fechin/hexo-theme-diaspora" target="_blank">Fechin/hexo-theme-diaspora</a>、<a href="https://github.com/liuzc/LeaveIt" target="_blank">liuzc/LeaveIt</a> 等(这么看来似乎也没多少东西是我自己写的了,逃)。</p>
393
394<p><strong>Gungnir</strong>,冈格尼尔,北欧神话中主神奥丁使用的用世界树树枝做成的武器,和本主题并没有什么关系但我就是用了这个名字。</p>
395
396<p><img src="../img/docs/gungnir.jpg" alt="theme-gungnir"></p>
397
398<h2 id="安装">安装</h2>
399
400<p>从 GitHub 克隆项目:</p>
401
402<pre><code class="language-bash">git clone https://github.com/Renovamen/jekyll-theme-gungnir.git
403cd jekyll-theme-gungnir
404</code></pre>
405
406<p>本地运行主题需要参考<a href="https://jekyllrb.com/docs/installation/" target="_blank">这里</a>安装 Ruby 和 Jekyll。然后安装依赖包:</p>
407
408<pre><code class="language-bash">bundle config set path 'vendor/bundle'
409bundle install
410</code></pre>
411
412<p>然后即可本地预览:</p>
413
414<pre><code class="language-bash">bundle exec jekyll serve --watch
415</code></pre>
416
417<p>如果想要改动代码,你可能需要 <a href="https://nodejs.org/en/">Node.js</a>,并安装 <a href="https://gruntjs.com/" target="_blank">Grunt</a>(用于压缩 js 文件):</p>
418
419<pre><code class="language-bash">npm install
420</code></pre>
421
422<p>然后:</p>
423
424<pre><code class="language-bash">npm run dev
425</code></pre>
426
427<h2 id="配置">配置</h2>
428
429<p class="info">以下配置都在 <code>_config.yml</code> 中进行。</p>
430
431<h3 id="网站配置">网站配置</h3>
432<pre><code class="language-yaml">title: Renovamen # 标题
433SEOTitle: Renovamen's blog # SEO 标题
434description: Hmm, interesting blog. # 描述
435keyword: "blog, personal website" # 关键词
436url: "https://renovamen.ink" # 域名
437baseurl: "" # 根路径。比如网站地址为 'https://renovamen.ink/blog',则该项应为 '/blog'
438avatar: "img/header-avatar.jpeg" # 首页头像路径
439</code></pre>
440
441<h3 id="主题风格">主题风格</h3>
442<pre><code class="language-yaml">theme_style: 
443  highlight:  # 代码高亮主题
444  alert:  # 提示风格
445  post_preview: # 首页文章列表显示风格
446</code></pre>
447
448<h4 id="代码高亮">代码高亮</h4>
449
450<p>代码高亮渲染用 <a href="https://highlightjs.org/" target="_blank">Highlight.js</a> 代替了 <a href="http://rouge.jneen.net/" target="_blank">Rouge</a>。默认的代码高亮大概长这样:</p>
451
452<pre><code class="language-python">import food
453
454class Dragon:
455    def __init__(self, happiness):
456        self.happiness = happiness
457    def code(self):
458        """ just code """
459        self.happiness -= 60
460    def eat(self, n)
461        # just eat
462        self.happiness += n * food.size
463
464me = Dragon(100)
465
466while True:
467    me.code()
468    me.eat(10)
469</code></pre>
470
471<p>点击显示编程语言的标签可以使代码块全屏,还有光标所在行高亮效果。如果你发现这两点跟 <a href="https://2heng.xin/theme-sakura/" target="_blank">Sakura</a> 主题很像,那么没错这部分的代码就是从它那搬过来的…</p>
472
473<p>代码高亮的默认主题为 <code>dark</code>,还有一个 <code>light</code> 主题可选:</p>
474
475<pre><code class="language-yaml">highlight: # "dark" (default), "light"
476</code></pre>
477
478<p>代码高亮的样式文件在 <a href="https://github.com/Renovamen/jekyll-theme-gungnir/tree/master/_sass/highlight" target="_blank"><code>_sass/highlight</code></a> 目录下,可以自行调整样式,或者直接引用 highlight.js 自带的<a href="https://github.com/highlightjs/highlight.js/tree/master/src/styles" target="_blank">一堆主题</a>。</p>
479
480<h4 id="提示">提示</h4>
481<p>支持在 Markdown 中使用提示样式以呈现一些警告,<a href="#%E6%8F%90%E7%A4%BA-1">这里</a>是使用方法。指定提示风格:</p>
482<pre><code class="language-yaml">alert:  # "flat" (default), "modern"
483</code></pre>
484
485<p>默认为 <code>flat</code>,长<a href="#%E9%85%8D%E7%BD%AE">这样</a>。<code>modern</code> 风格长这样:</p>
486
487<p><img src="../img/docs/alert-modern.png" alt="alert-modern"></p>
488
489<h4 id="首页文章列表">首页文章列表</h4>
490
491<p>首页文章列表是否显示特征图片,<code>image</code> 为显示(默认),<code>text</code> 为不显示:</p>
492
493<pre><code class="language-yaml">post_preview: # "image" (default), "text"
494</code></pre>
495
496<p><code>image</code>:
497<img src="../img/docs/preview-image.jpg" alt="preview-image"></p>
498
499<p><code>text</code>:
500<img src="../img/docs/preview-text.jpg" alt="preview-text"></p>
501
502<h3 id="社交链接">社交链接</h3>
503
504<pre><code class="language-yaml">sns:
505  github_username: # Github
506  weibo_username: # 微博
507  zhihu_username: # 知乎
508  twitter_username: # 推特  
509  facebook_username: # Facebook
510  linkedin_username:  # 领英
511  email_address: # 邮件地址
512</code></pre>
513<p>填入用户名或用户 ID 后,社交链接会出现在首页封面和 About 页上。</p>
514
515<h3 id="导航菜单">导航菜单</h3>
516
517<p>一级菜单的配置如下:</p>
518
519<pre><code class="language-yaml">menus:
520  - title: Home
521    font: fab fa-fort-awesome
522    url: /
523  - title: Archive
524    font: fas fa-archive
525    url: /archive/
526</code></pre>
527
528<p>
528需要填入每个页面的名称、路径和图标。图标库使用了 <a href="https://fontawesome.com" target="_blank">Font Awesome</a>,可以在<a href="https://fontawesome.com/icons" target="_blank">这里</a>查找图标。</p>
529
530<p>如果要添加<strong>二级菜单</strong>,则需要在需要添加二级菜单的一级菜单下添加 <code>submenus</code> 关键字,然后在 <code>submenus</code> 下填入每个二级菜单页面的名称、路径和图标:</p>
531
532<pre><code class="language-yaml">menus:
533  - title: About
534    font: fas fa-paw
535    submenus:
536      - title: Me
537        font: fas fa-user-astronaut
538        url: /about/
539      - title: Theme
540        font: fas fa-meteor
541        url: /theme/
542</code></pre>
543
544<h3 id="评论">评论</h3>
545
546<pre><code class="language-yaml">comment: 
547  provider: # false (default), "disqus", "gitalk", "valine"
548</code></pre>
549
550<p>支持三种评论系统:Disqus、Gitalk 和 Valine。需要在 <code>provider</code> 中填入想要启用的评论系统的名字,如果不想用启用评论就填 <code>false</code> 或不填。</p>
551
552<h4 id="disqus">Disqus</h4>
553
554<p>在 <a href="https://disqus.com/" target="_blank">Disqus</a> 申请一个自己网站的 Disqus,然后把 shortname 填入 <code>disqus_username</code>:</p>
555
556<pre><code class="language-yaml">comment: 
557  provider: disqus
558  disqus_username: # Disqus shortname
559</code></pre>
560
561<h4 id="gitalk">Gitalk</h4>
562
563<p>注册一个 <a href="https://github.com/settings/applications/new" target="_blank">Github Application</a> 并搞到 Client ID 和 Client Secret,然后填入对应信息:</p>
564
565<pre><code class="language-yaml">comment: 
566  provider: gitalk
567  gitalk:
568    clientID: # Github Application Client ID
569    clientSecret: # Github Application Client Secret
570    repo: # 用来放评论的 Github 仓库
571    owner: # 上述 Github 仓库的拥有者 ID
572    admin: 
573      - 管理员1
574      - 管理员2
575      - ...
576</code></pre>
577
578<p>可以参考 <a href="https://github.com/gitalk/gitalk" target="_blank">Gitalk 文档</a>。</p>
579
580<h4 id="valine">Valine</h4>
581
582<p>按照 <a href="https://valine.js.org/" target="_blank">Valine 文档</a> 在 <a href="https://www.leancloud.cn/" target="_blank">LeanCloud</a> 注册应用,然后填入 App ID 和 App Key:</p>
583
584<pre><code class="language-yaml">comment: 
585  provider: valine
586  valine:
587    appID: # LeanCloud App ID
588    appKey: # LeanCloud App Key
589</code></pre>
590
591<h3 id="站点统计">站点统计</h3>
592
593<p>支持谷歌统计和百度统计。</p>
594
595<h4 id="百度统计">百度统计</h4>
596
597<p>搞到<a href="https://tongji.baidu.com/web/welcome/login" target="_blank">百度统计</a>的统计代码并填入对应位置:</p>
598
599<pre><code class="language-yaml">analytics:
600  ba_track_id: # 百度统计代码
601</code></pre>
602
603<h4 id="谷歌统计">谷歌统计</h4>
604
605<p>搞到<a href="https://www.google.com/analytics/" target="_blank">谷歌统计</a>的跟踪 ID 并填入对应位置:</p>
606
607<pre><code class="language-yaml">analytics:
608  ga_track_id: 'G-ZYM02DSEHS' # 谷歌统计跟踪 ID
609</code></pre>
610
611<h3 id="cdn-源">CDN 源</h3>
612
613<pre><code class="language-yaml">cdn: # "jsdelivr" (default), "bootcdn", "unpkg", "cdnjs"
614</code></pre>
615
616<p>默认使用 <a href="https://www.jsdelivr.com/" target="_blank">jsDelivr</a> 作为所有引用的开源库的 CDN 源,也可以把 CDN 源配置为 <a href="https://www.bootcdn.cn/" target="_blank">BootCDN</a>、<a href="https://unpkg.com/" target="_blank">unpkg</a> 或 <a href="https://cdnjs.com/" target="_blank">cdnjs</a>。可以在 <code>_data/cdn.yml</code> 中看到所有 CDN 地址。</p>
617
618<h3 id="markdown-附加功能">Markdown 附加功能</h3>
619
620<pre><code class="language-yaml">math: 
621    enable: # 是否对所有文章启用公式渲染
622            # false (default), true 
623    engine: # 公式渲染引擎
624            # "katex" (default), "mathjax"
625chart: # 是否启用 Chart.js:false (defaule), true
626mermaid: # 是否启用 mermaid:false (default), true
627emoji-plus: # 是否启用附加表情:false (default), true
628</code></pre>
629
630<p><a href="#markdown-%E9%99%84%E5%8A%A0%E5%8A%9F%E8%83%BD-1">这里</a>是具体说明。</p>
631
632<h3 id="一言">一言</h3>
633
634<pre><code class="language-yaml">hitokoto: true # default: false
635</code></pre>
636
637<p>将 <code>hitokoto</code> 设为 <code>true</code> 可以开启首页的<a href="https://hitokoto.cn/" target="_blank">一言</a>气泡,将鼠标悬浮在头像上气泡就会显示出来:</p>
638
639<p><img src="../img/docs/hitokoto-bubble.jpg" alt="Hitokoto Bubble"></p>
640
641<h2 id="页面">页面</h2>
642
643<h3 id="首页">首页</h3>
644
645<p>在 <code>index.html</code> 的 Front-matter 中设置:</p>
646
647<pre><code class="language-yaml">description: # 想在首页显示的一句话
648header-img:
649  - url: # 首页封面图路径1
650    mask: # 封面图1的遮罩(可选),格式:rgba(40, 57, 101, .4)
651  - url: # 首页封面图路径2
652    mask: # 封面图1的遮罩(可选)
653</code></pre>
654
655<p>在首页点击封面图左右两边的按钮可以在多图片之间进行切换。需要按上述格式在 <code>header-img</code> 下填入每张封面图的路径和遮罩的 RGB 数值(可选)。遮罩是指在封面图上盖一层半透明的颜色,如果图片比较复杂导致文字显示得不够清楚,可以考虑加个遮罩。</p>
656
657<h3 id="about">About</h3>
658
659<p>参考一下本站 <a href="/about" target="_blank">About 页面</a> 和它的 <a href="https://github.com/Renovamen/jekyll-theme-gungnir/blob/master/about.html" target="_blank">Front-matter</a> 大概就知道怎么改了?</p>
660
661<h3 id="links">Links</h3>
662
663<p>参考一下本站 <a href="/links" target="_blank">Links 页面</a> 和它的 <a href="https://github.com/Renovamen/jekyll-theme-gungnir/blob/master/links.html" target="_blank">Front-matter</a> 大概就知道怎么改了?(复读 *1)</p>
664
665<p>如果没有指定某个链接的头像,那么会显示默认头像(<code>
665img/links/default.jpg</code>)。</p>
666
667<p>如果想在该页面开启评论,需要在 <code>_config.yml</code> 中启用评论并在该页的 Front-matter 中设 <code>comment: true</code>。</p>
668
669<h2 id="内容">内容</h2>
670
671<h3 id="文章">文章</h3>
672
673<p>把要发布的文章放在 <code>_posts/</code> 文件夹中,文件名格式为 <code>年-月-日-标题.md</code>,然后配置其 YAML Front-matter:</p>
674
675<pre><code class="language-yaml">---
676layout: post
677title: # 文章标题
678subtitle: # 副标题
679author: # 作者名称,默认为网站名称
680header-img: # 文章封面图
681header-mask: # 封面图遮罩,格式:rgba(40, 57, 101, .4)
682header-style: text # 如果不想该文章显示封面图,就需要加这一项
683catalog: # 是否显示目录:false (default), true
684math: # 是否开启数学公式渲染
685tags: # 标签
686  - 标签1
687  - 标签2
688  - ...
689---
690</code></pre>
691
692<p>其中 <code>header-img</code> 会同时显示在<a href="#%E9%A6%96%E9%A1%B5%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8">首页</a>和文章页。<code>math</code> 的配置可以参考<a href="#%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F%E6%B8%B2%E6%9F%93">这里</a>。</p>
693
694<h3 id="markdown-附加功能-1">Markdown 附加功能</h3>
695
696<h4 id="数学公式渲染">数学公式渲染</h4>
697
698<p>支持使用 <a href="https://github.com/mathjax/MathJax" target="_blank">Mathjax</a> 或 <a href="https://github.com/KaTeX/KaTeX" target="_blank">Katex</a> 来在文章中渲染数学公式。</p>
699
700<p>Katex 渲染速度快于 Mathjax(可以参考<a href="https://katex.org/" target="_blank">这里</a>),但支持的 Tex 公式少于 Mathjax(<a href="https://katex.org/docs/supported.html" target="_blank">这里</a>是 Katex 支持的公式列表)。</p>
701
702<p>如果 <code>_config.yml</code> 中 <code>math.enable: false</code>,则只有 Front-matter 中添加了 <code>mathjax: true</code> 的文章才会开启公式渲染:</p>
703
704<pre><code class="language-yaml">---
705layout: post
706mathjax: true
707---
708</code></pre>
709
710<p>否则所有文章(包括 <code>post</code> 和 <code>keynote</code>)中都会开启此功能。</p>
711
712<p>示例:</p>
713
714<p>Inline math: 
714<script type="math/tex">E = mc^2</script>
714</p>
715
716<p>Display math:</p>
717
718<script type="math/tex; mode=display">i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.</script>
718
719
720<pre><code class="language-plaintext">$$ E = mc^2 $$
721
722$$
723i \hbar \frac{\partial \psi}{\partial t}
724= \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi
725$$
726</code></pre>
727
728<h4 id="图表">图表</h4>
729
730<h5 id="chartjs">Chart.js</h5>
731
732<p>使用了 <a href="https://github.com/chartjs/Chart.js" target="_blank">Chart.js</a> 以在文章中加入可交互的图表。可以参考 <a href="https://www.chartjs.org/docs/latest/" target="_blank">Chart.js 文档</a>来创建表格。</p>
733
734<p>示例:</p>
735
736<pre><code class="language-chart">{
737    "type": "bar",
738    "data": {
739        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
740        "datasets": [{
741            "label": "# of Votes",
742            "data": [12, 19, 3, 5, 2, 3],
743            "backgroundColor": [
744                "rgba(255, 99, 132, 0.2)",
745                "rgba(54, 162, 235, 0.2)",
746                "rgba(255, 206, 86, 0.2)",
747                "rgba(75, 192, 192, 0.2)",
748                "rgba(153, 102, 255, 0.2)",
749                "rgba(255, 159, 64, 0.2)"
750            ],
751            "borderColor": [
752                "rgba(255, 99, 132, 1)",
753                "rgba(54, 162, 235, 1)",
754                "rgba(255, 206, 86, 1)",
755                "rgba(75, 192, 192, 1)",
756                "rgba(153, 102, 255, 1)",
757                "rgba(255, 159, 64, 1)"
758            ],
759            "borderWidth": 1
760        }]
761    },
762    "options": {
763        "scales": {
764            "yAxes": [{
765                "ticks": {
766                    "beginAtZero": true
767                }
768            }]
769        }
770    }
771}
772</code></pre>
773
774<pre><code class="json">```chart
775{
776    "type": "bar",
777    "data": {
778        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
779        "datasets": [{
780            "label": "# of Votes",
781            "data": [12, 19, 3, 5, 2, 3],
782            "backgroundColor": [
783                "rgba(255, 99, 132, 0.2)",
784                "rgba(54, 162, 235, 0.2)",
785                "rgba(255, 206, 86, 0.2)",
786                "rgba(75, 192, 192, 0.2)",
787                "rgba(153, 102, 255, 0.2)",
788                "rgba(255, 159, 64, 0.2)"
789            ],
790            "borderColor": [
791                "rgba(255, 99, 132, 1)",
792                "rgba(54, 162, 235, 1)",
793                "rgba(255, 206, 86, 1)",
794                "rgba(75, 192, 192, 1)",
795                "rgba(153, 102, 255, 1)",
796                "rgba(255, 159, 64, 1)"
797            ],
798            "borderWidth": 1
799        }]
800    },
801    "options": {
802        "scales": {
803            "yAxes": [{
804                "ticks": {
805                    "beginAtZero": true
806                }
807            }]
808        }
809    }
810}
811```
812</code></pre>
813
814<p><code class="warning">注意</code>:<code>json</code> 中的 <code>key</code> 值一定要加<strong>引号</strong>,否则会渲染出错。</p>
815
816<h5 id="mermaid">mermaid</h5>
817
818<p>使用了 <a href="https://github.com/knsv/mermaid" target="_blank">mermaid</a> 以在文章中加入流程图、状态图、时序图、甘特图等。可以参考 <a href="https://mermaid-js.github.io/mermaid/" target="_blank">mermaid 文档</a>来创建图。</p>
819
820<p>示例:</p>
821
822<pre><code class="language-mermaid">classDiagram
823    Animal &lt;|-- Duck
824    Animal &lt;|-- Fish
825    Animal &lt;|-- Zebra
826    Animal : +int age
827    Animal : +String gender
828    Animal: +isMammal()
829    Animal: +mate()
830    class Duck{
831        +String beakColor
832        +swim()
833        +quack()
834    }
835    class Fish{
836        -int sizeInFeet
837        -canEat()
838    }
839    class Zebra{
840        +bool is_wild
841        +run()
842    }
843</code></pre>
844
845<pre><code>```mermaid
846classDiagram
847    Animal &lt;|-- Duck
848    Animal &lt;|-- Fish
849    Animal &lt;|-- Zebra
850    Animal : +int age
851    Animal : +String gender
852    Animal: +isMammal()
853    Animal: +mate()
854    class Duck{
855        +String beakColor
856        +swim()
857        +quack()
858    }
859    class Fish{
860        -int sizeInFeet
861        -canEat()
862    }
863    class Zebra{
864        +bool is_wild
865        +run()
866    }
867```
868</code></pre>
869
870<h4 id="标签">标签</h4>
871
872<p><code class="info">消息标签</code></p>
873
874<pre><code class="language-markdown">`消息标签`{:.info}
875</code></pre>
876
877<p><code class="success">成功标签</code></p>
878
879<pre><code class="language-markdown">`成功标签`{:.success}
880</code></pre>
881
882<p><code class="warning">警告标签</code></p>
883
884<pre><code class="language-markdown">`警告标签`{:.warning}
885</code></pre>
886
887<p><code class="error">错误标签</code></p>
888
889<pre><code class="language-markdown">`错误标签`{:.error}
890</code></pre>
891
892<h4 id="提示-1">提示</h4>
893
894<p class="info">消息提示文案</p>
895
896<pre><code class="language-markdown">消息提示文案
897{:.info}
898</code></pre>
899
900<p class="success">成功提示文案</p>
901
902<pre><code class="language-markdown">成功提示文案
903{:.success}
904</code></pre>
905
906<p class="warning">警告提示文案</p>
907
908<pre><code class="language-markdown">警告提示文案
909{:.warning}
910</code></pre>
911
912<p class="error">错误提示文案</p>
913
914<pre><code class="language-markdown">错误提示文案
915{:.error}
916</code></pre>
917
918<h4 id="表情">表情</h4>
919<h5 id="emoji">emoji</h5>
920
921<p>使用了 <a href="https://github.com/jekyll/jemoji" target="_blank">jemoji</a> 插件以在文章中插入 emoji,需要手动安装这个插件:</p>
922
923<pre><code class="language-bash">gem install jemoji
924</code></pre>
925
926<p>从<a href="https://pages.github.com/versions/" target="_blank">这里</a>可以看到 Github Pages 上自带 jemoji 插件。<a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">这里</a>是所有 emoji 的代码。</p>
927
928<p>示例:</p>
929
930<p><img class="emoji" title=":smile:" alt=":smile:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png" height="20" width="20"> <img class="emoji" title=":smirk:" alt=":smirk:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f60f.png" height="20" width="20"> <img class="emoji" title=":racehorse:" alt=":racehorse:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f40e.png" height="20" width="20"> <img class="emoji" title=":wolf:" alt=":wolf:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f43a.png" height="20" width="20"></p>
931
932<pre><code class="language-markdown">:smile: :smirk: :racehorse: :wolf:
933</code></pre>
934
935<h5 id="附加表情">附加表情</h5>
936
937<p>也可以在文章中插入其他表情,目前支持 Bilibili 的小电视表情 <code class="emoji-plus">斜眼笑</code>(效果出乎意料的好)。</p>
938
939<p>示例:</p>
940
941<p><code class="emoji-plus">斜眼笑</code> <code class="emoji-plus">doge</code> <code class="emoji-plus">白眼</code></p>
942
943<pre><code class="language-markdown">`斜眼笑`{:.emoji-plus} `doge`{:.emoji-plus} `白眼`{:.emoji-plus}
944</code></pre>
945
946<p><a href="#%E9%99%84%E5%BD%95">附录</a>是所有支持的小电视表情和它们对应的代码,表情源文件来源于<a href="https://www.bilibili.com/video/av27621778/" target="_blank">这里</a>。</p>
947
948<h4 id="图片注释">图片注释</h4>
949
950<p><img src="../img/theme.jpg" alt=""></p>
951
952<p class="desc">这是一张图片</p>
953
954<pre><code class="markdown">![](../img/theme.jpg)
955
956这是一张图片
957{:.desc}
958</code></pre>
959
960<h2 id="用到的开源库">用到的开源库</h2>
961
962<h3 id="css">CSS</h3>
963
964<ul>
965  <li><a href="https://github.com/twbs/bootstrap" target="_blank">Bootstrap</a></li>
966  <li><a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome</a></li>
967  <li>
968<a href="https://github.com/l-lin/font-awesome-animation" target="_blank">Font Awesome Animation</a>(图标动画)</li>
969</ul>
970
971<h3 id="javascript">JavaScript</h3>
972<ul>
973  <li><a href="https://github.com/jquery/jquery" target="_blank">jQuery</a></li>
974  <li>
975<a href="https://github.com/jlmakes/scrollreveal" target="_blank">ScrollReveal</a>(图片模式下文章列表上浮效果,About 页面的时间轴上浮效果)</li>
976  <li>
977<a href="https://github.com/tscanlin/tocbot" target="_blank">Tocbot</a>(文章目录)</li>
978  <li>
979<a href="https://github.com/bryanbraun/anchorjs/" target="_blank">AnchorJS</a>(文章锚点)</li>
980  <li>
981<a href="https://github.com/gitalk/gitalk" target="_blank">Gitalk</a>(Gitalk 评论)</li>
982  <li>
983<a href="https://github.com/xCss/Valine" target="_blank">Valine</a>(Valine 评论)</li>
984  <li>
985<a href="https://github.com/chartjs/Chart.js" target="_blank">Chart.js</a>(<a href="#chartjs">图表</a>)</li>
986  <li>
987<a href="https://github.com/mermaid-js/mermaid" target="_blank">mermaid</a>(<a href="#mermaid">图表</a>)</li>
988  <li>
989<a href="https://github.com/mathjax/MathJax" target="_blank">MathJax</a>(公式渲染)</li>
990  <li>
991<a href="https://github.com/KaTeX/KaTeX" target="_blank">Katex</a> (公式渲染)</li>
992  <li>
993<a href="https://github.com/highlightjs/highlight.js" target="_blank">hightlight.js</a> (代码高亮渲染)</li>
994  <li>
995<a href="https://github.com/wcoder/highlightjs-line-numbers.js/" target="_blank">hightlight-line-number.js</a> (给 hightlight.js 生成的代码块加行号的插件)</li>
996  <li>
997<a href="https://github.com/christian-fei/Simple-Jekyll-Search" target="_blank">Simple-Jekyll-Search</a>(搜索)</li>
998  <li>
999<a href="https://github.com/ftlabs/fastclick" target="_blank">fastclick</a>(解决移动设备上的点击延迟问题)</li>
1000</ul>
1001
1002<h2 id="附录">附录</h2>
1003
1004<table>
1005  <tbody>
1006    <tr>
1007      <td>
1008<code class="emoji-plus">白眼</code> <code>`白眼`{:.emoji-plus}</code>
1009</td>
1010      <td>
1011<code class="emoji-plus">鄙视</code> <code>`鄙视`{:.emoji-plus}</code>
1012</td>
1013    </tr>
1014    <tr>
1015      <td>
1016<code class="emoji-plus">闭嘴</code>   <code>`闭嘴`{:.emoji-plus}</code>
1017</td>
1018      <td>
1019<code class="emoji-plus">馋</code>   <code>`馋`{:.emoji-plus}</code>
1020</td>
1021    </tr>
1022    <tr>
1023      <td>
1024<code class="emoji-plus">打脸</code>   <code>`打脸`{:.emoji-plus}</code>
1025</td>
1026      <td>
1027<code class="emoji-plus">大哭</code>   <code>`大哭`{:.emoji-plus}</code>
1028</td>
1029    </tr>
1030    <tr>
1031      <td>
1032<code class="emoji-plus">大佬</code>   <code>`大佬`{:.emoji-plus}</code>
1033</td>
1034      <td>
1035<code class="emoji-plus">呆</code>   <code>`呆`{:.emoji-plus}</code>
1036</td>
1037    </tr>
1038    <tr>
1039      <td>
1040<code class="emoji-plus">点赞</code> <code>`点赞`{:.emoji-plus}</code>
1041</td>
1042      <td>
1043<code class="emoji-plus">调皮</code> <code>`调皮`{:.emoji-plus}</code>
1044</td>
1045    </tr>
1046    <tr>
1047      <td>
1048<code class="emoji-plus">发财</code>   <code>`发财`{:.emoji-plus}</code>
1049</td>
1050      <td>
1051<code class="emoji-plus">发怒</code>   <code>`发怒`{:.emoji-plus}</code>
1052</td>
1053    </tr>
1054    <tr>
1055      <td>
1056<code class="emoji-plus">å°´å°¬</code>   <code>`å°´å°¬`{:.emoji-plus}</code>
1057</td>
1058      <td>
1059<code class="emoji-plus">鼓掌</code>   <code>`鼓掌`{:.emoji-plus}</code>
1060</td>
1061    </tr>
1062    <tr>
1063      <td>
1064<code class="emoji-plus">害羞</code>   <code>`害羞`{:.emoji-plus}</code>
1065</td>
1066      <td>
1067<code class="emoji-plus">黑人问号</code>   <code>`黑人问号`{:.emoji-plus}</code>
1068</td>
1069    </tr>
1070    <tr>
1071      <td>
1072<code class="emoji-plus">坏笑</code> <code>`坏笑`{:.emoji-plus}</code>
1073</td>
1074      <td>
1075<code class="emoji-plus">惊吓</code> <code>`惊吓`{:.emoji-plus}</code>
1076</td>
1077    </tr>
1078    <tr>
1079      <td>
1080<code class="emoji-plus">可爱</code>   <code>`可爱`{:.emoji-plus}</code>
1081</td>
1082      <td>
1083<code class="emoji-plus">抠鼻子</code>   <code>`抠鼻子`{:.emoji-plus}</code>
1084</td>
1085    </tr>
1086    <tr>
1087      <td>
1088<code class="emoji-plus">困</code>   <code>`困`{:.emoji-plus}</code>
1089</td>
1090      <td>
1091<code class="emoji-plus">流鼻血</code>   <code>`流鼻血`{:.emoji-plus}</code>
1092</td>
1093    </tr>
1094    <tr>
1095      <td>
1096<code class="emoji-plus">流汗</code>   <code>`流汗`{:.emoji-plus}</code>
1097</td>
1098      <td>
1099<code class="emoji-plus">腼腆</code>   <code>`腼腆`{:.emoji-plus}</code>
1100</td>
1101    </tr>
1102    <tr>
1103      <td>
1104<code class="emoji-plus">难过</code> <code>`难过`{:.emoji-plus}</code>
1105</td>
1106      <td>
1107<code class="emoji-plus">呕吐</code> <code>`呕吐`{:.emoji-plus}</code>
1108</td>
1109    </tr>
1110    <tr>
1111      <td>
1112<code class="emoji-plus">亲亲</code>   <code>`亲亲`{:.emoji-plus}</code>
1113</td>
1114      <td>
1115<code class="emoji-plus">色</code>   <code>`色`{:.emoji-plus}</code>
1116</td>
1117    </tr>
1118    <tr>
1119      <td>
1120<code class="emoji-plus">生病</code>   <code>`生病`{:.emoji-plus}</code>
1121</td>
1122      <td>
1123<code class="emoji-plus">生气</code>   <code>`生气`{:.emoji-plus}</code>
1124</td>
1125    </tr>
1126    <tr>
1127      <td>
1128<code class="emoji-plus">睡着</code>   <code>`睡着`{:.emoji-plus}</code>
1129</td>
1130      <td>
1131<code class="emoji-plus">思考</code>   <code>`思考`{:.emoji-plus}</code>
1132</td>
1133    </tr>
1134    <tr>
1135      <td>
1136<code class="emoji-plus">偷笑</code>   <code>`偷笑`{:.emoji-plus}</code>
1137</td>
1138      <td>
1139<code class="emoji-plus">吐血</code>   <code>`吐血`{:.emoji-plus}</code>
1140</td>
1141    </tr>
1142    <tr>
1143      <td>
1144<code class="emoji-plus">微笑</code>   <code>`微笑`{:.emoji-plus}</code>
1145</td>
1146      <td>
1147<code class="emoji-plus">委屈</code>   <code>`委屈`{:.emoji-plus}</code>
1148</td>
1149    </tr>
1150    <tr>
1151      <td>
1152<code class="emoji-plus">无奈</code> <code>`无奈`{:.emoji-plus}</code>
1153</td>
1154      <td>
1155<code class="emoji-plus">笑哭</code> <code>`笑哭`{:.emoji-plus}</code>
1156</td>
1157    </tr>
1158    <tr>
1159      <td>
1160<code class="emoji-plus">斜眼笑</code>   <code>`斜眼笑`{:.emoji-plus}</code>
1161</td>
1162      <td>
1163<code class="emoji-plus">疑问</code>   <code>`疑问`{:.emoji-plus}</code>
1164</td>
1165    </tr>
1166    <tr>
1167      <td>
1168<code class="emoji-plus">晕</code>   <code>`晕`{:.emoji-plus}</code>
1169</td>
1170      <td>
1171<code class="emoji-plus">再见</code>   <code>`再见`{:.emoji-plus}</code>
1172</td>
1173    </tr>
1174    <tr>
1175      <td>
1176<code class="emoji-plus">抓狂</code>   <code>`抓狂`{:.emoji-plus}</code>
1177</td>
1178      <td>
1179<code class="emoji-plus">doge</code>   <code>`doge`{:.emoji-plus}</code>
1180</td>
1181    </tr>
1182  </tbody>
1183</table>
1184
1185</div>
1186
1187<!-- English Version -->
1188<div class="en post-container">
1189    
1190    
1191<h1 id="ducumentation">Ducumentation</h1>
1192
1193<p>Github: <a href="https://github.com/Renovamen/jekyll-theme-gungnir" target="_blank"><i class="fas fa-link"></i> Renovamen/jekyll-theme-gungnir</a></p>
1194
1195<p>Derived from <a href="https://github.com/Huxpro/huxpro.github.io" target="_blank">Huxpro/huxpro.github.io</a>. Some of the designs and code are borrowed from other themes, including but not limited to <a href="https://github.com/mashirozx/Sakura/" target="_blank">mashirozx/Sakura</a>, <a href="https://github.com/kitian616/jekyll-TeXt-theme" target="_blank">kitian616/jekyll-TeXt-theme</a>, <a href="https://github.com/Fechin/hexo-theme-diaspora" target="_blank">Fechin/hexo-theme-diaspora</a>, <a href="https://github.com/liuzc/LeaveIt" target="_blank">liuzc/LeaveIt</a>, et al.</p>
1196
1197<p><strong>Gungnir</strong> is the spear of the god Odin in Norse mythology, made from the wood of the world tree Yggdrasil. It has nothing to do with this theme, but I still use this name.</p>
1198
1199<p><img src="../img/docs/gungnir.jpg" alt="theme-gungnir"></p>
1200
1201<h2 id="installation">Installation</h2>
1202
1203<p>Clone the project from Github:</p>
1204
1205<pre><code class="language-bash">git clone https://github.com/Renovamen/jekyll-theme-gungnir.git
1206cd jekyll-theme-gungnir
1207</code></pre>
1208
1209<p>To run the theme locally, Ruby and Jekyll should be installed firstly, refer to <a href="https://jekyllrb.com/docs/installation/" target="_blank">here</a> for details. Then you could install the dependencies:</p>
1210
1211<pre><code class="language-bash">bundle config set path 'vendor/bundle'
1212bundle install
1213</code></pre>
1214
1215<p>Then you could start the development server and preview the blog by:</p>
1216
1217<pre><code class="language-bash">bundle exec jekyll serve --watch
1218</code></pre>
1219
1220<p>
1220To modify the source code of the theme, you may need to install <a href="https://gruntjs.com/" target="_blank">Grunt</a> (for compressing js files):</p>
1221
1222<pre><code class="language-bash">npm install
1223</code></pre>
1224
1225<p>Then:</p>
1226
1227<pre><code class="language-bash">npm run dev
1228</code></pre>
1229
1230<h2 id="configuration">Configuration</h2>
1231
1232<p class="info">All the following options should be configured in <code>_config.yml</code>.</p>
1233
1234<h3 id="site-settings">Site Settings</h3>
1235<pre><code class="language-yaml">title: Renovamen # title of your site
1236SEOTitle: Renovamen's blog # SEO title of your site
1237description: Hmm, interesting blog. # description of your site
1238keyword: "blog, personal website" # keywords of your site
1239url: "https://renovamen.ink" # URL of your site
1240baseurl: "" # Base URL of your site. If you site is hosted on 'https://renovamen.ink/blog', it should be '/blog'
1241avatar: "img/header-avatar.jpeg" # path of the avatar showing on home page
1242</code></pre>
1243
1244<h3 id="theme-style">Theme Style</h3>
1245<pre><code class="language-yaml">theme_style: 
1246  highlight:  # syntax highlighting theme
1247  alert:  # style of alerts
1248  post_preview: # style of the post list showing on home page
1249</code></pre>
1250
1251<h4 id="highlight">Highlight</h4>
1252
1253<p><a href="https://highlightjs.org/" target="_blank">Highlight.js</a> instead of <a href="http://rouge.jneen.net/" target="_blank">Rouge</a> is used as syntax highlighter. The default syntax highlighting theme of this blog looks like this:</p>
1254
1255<pre><code class="language-python">import food
1256
1257class Dragon:
1258    def __init__(self, happiness):
1259        self.happiness = happiness
1260    def code(self):
1261        """ just code """
1262        self.happiness -= 60
1263    def eat(self, n)
1264        # just eat
1265        self.happiness += n * food.size
1266
1267me = Dragon(100)
1268
1269while True:
1270    me.code()
1271    me.eat(10)
1272</code></pre>
1273
1274<p>Click the span in the upper-right corner to make the code block full screen.</p>
1275
1276<p>The default highlighting theme is <code>dark</code>, you can also switch it to <code>light</code>:</p>
1277
1278<pre><code class="language-yaml">highlight: # "dark" (default), "light"
1279</code></pre>
1280
1281<p>Highlighting stylesheets could be found <a href="https://github.com/Renovamen/jekyll-theme-gungnir/tree/master/_sass/highlight" target="_blank">here</a>. You can also modify them to create your own theme, or just import the <a href="https://github.com/highlightjs/highlight.js/tree/master/src/styles" target="_blank">stylesheets</a> provided by Highlight.js.</p>
1282
1283<h4 id="alert">Alert</h4>
1284
1285<p>Showing alerts in articles is supported, refer to <a href="#alert-1">here</a> for more information about the usages. You can specify the style of alerts:</p>
1286
1287<pre><code class="language-yaml">alert:  # "flat" (default), "modern"
1288</code></pre>
1289
1290<p>The default style is <code>flat</code>, like <a href="#configuration">this</a>. <code>modern</code> style alerts look like this:</p>
1291
1292<p><img src="../img/docs/alert-modern.png" alt="alert-modern"></p>
1293
1294<h4 id="post-list">Post List</h4>
1295
1296<p><code>image</code> (default) means showing featured image of each article on home page, while <code>text</code> means showing text only:</p>
1297
1298<pre><code class="language-yaml">post_preview: # "image" (default), "text"
1299</code></pre>
1300
1301<p><code>image</code>:
1302<img src="../img/docs/preview-image.jpg" alt="preview-image"></p>
1303
1304<p><code>text</code>:
1305<img src="../img/docs/preview-text.jpg" alt="preview-text"></p>
1306
1307<h3 id="social-network">Social Network</h3>
1308
1309<pre><code class="language-yaml">sns:
1310  github_username: # Github
1311  weibo_username: # Weibo
1312  zhihu_username: # Zhihu
1313  twitter_username: # Twitter
1314  facebook_username: # Facebook
1315  linkedin_username:  # Linkedin
1316  email_address: # Email Address
1317</code></pre>
1318
1319<p>Links of your social networks will be shown on home page and about page.</p>
1320
1321<h3 id="navigation">Navigation</h3>
1322
1323<p>Configuration of the first level menu is like this:</p>
1324
1325<pre><code class="language-yaml">menus:
1326  - title: Home
1327    font: fab fa-fort-awesome
1328    url: /
1329  - title: Archive
1330    font: fas fa-archive
1331    url: /archive/
1332</code></pre>
1333
1334<p>You should specify the name, URL and icon of each page. <a href="https://fontawesome.com" target="_blank">Font Awesome</a> is used as icon set, you can search for icons <a href="https://fontawesome.com/icons" target="_blank">here</a>.</p>
1335
1336<p>Use key <code>submenus</code> to add the second level menu:</p>
1337
1338<pre><code class="language-yaml">menus:
1339  - title: About
1340    font: fas fa-paw
1341    submenus:
1342      - title: Me
1343        font: fas fa-user-astronaut
1344        url: /about/
1345      - title: Theme
1346        font: fas fa-meteor
1347        url: /theme/
1348</code></pre>
1349
1350<h3 id="comment">Comment</h3>
1351
1352<pre><code class="language-yaml">comment: 
1353  provider: # false (default), "disqus", "gitalk", "valine"
1354</code></pre>
1355
1356<p>Disqus, Gitalk and Valine are supported as third party comment systems. You should specify the name of your prefer comment system or use <code>false</code> to disable comments.</p>
1357
1358<h4 id="disqus">Disqus</h4>
1359
1360<p>Apply for a <em>shortname</em> on <a href="https://disqus.com/" target="_blank">Disqus</a>, then:</p>
1361
1362<pre><code class="language-yaml">comment: 
1363  provider: disqus
1364  disqus_username: # Disqus shortname
1365</code></pre>
1366
1367<h4 id="gitalk">Gitalk</h4>
1368
1369<p>Register a <a href="https://github.com/settings/applications/new">Github Application</a> and get the Client ID and Client Secret, then:</p>
1370
1371<pre><code class="language-yaml">comment: 
1372  provider: gitalk
1373  gitalk:
1374    clientID: # Github Application Client ID
1375    clientSecret: # Github Application Client Secret
1376    repo: # Github repo for storing comments
1377    owner: # owners of the above mentioned repo
1378    admin: 
1379      - admin1
1380      - admin2
1381      - ...
1382</code></pre>
1383
1384<p>Refer to the <a href="https://github.com/gitalk/gitalk" target="_blank">documentation of Gitalk</a> for more information.</p>
1385
1386<h4 id="valine">Valine</h4>
1387
1388<p>Create a new application on <a href="https://leancloud.cn/">Leancloud</a>
1388 and get the APP ID and APP Key, then:</p>
1389
1390<pre><code class="language-yaml">comment: 
1391  provider: valine
1392  valine:
1393    appID: # LeanCloud App ID
1394    appKey: # LeanCloud App Key
1395</code></pre>
1396
1397<p>Refer to the <a href="https://valine.js.org/" target="_blank">documentation of Valine</a> for more information.</p>
1398
1399<h3 id="analytics">Analytics</h3>
1400
1401<p>Google Analytics and Baidu Tongji are supported as the site analytics tools.</p>
1402
1403<h4 id="baidu-tongji">Baidu Tongji</h4>
1404
1405<p>Paste the code offered by <a href="https://tongji.baidu.com/web/welcome/login" target="_blank">Baidu Tongji</a> here:</p>
1406
1407<pre><code class="language-yaml">analytics:
1408  ba_track_id: # your tracking code
1409</code></pre>
1410
1411<h4 id="google-analytics">Google Analytics</h4>
1412
1413<p>Paste the code offered by <a href="https://tongji.baidu.com/web/welcome/login" target="_blank">Google Analytics</a> here:</p>
1414
1415<pre><code class="language-yaml">analytics:
1416  ga_track_id: 'G-ZYM02DSEHS' # your tracking code
1417</code></pre>
1418
1419<h3 id="cdn">CDN</h3>
1420
1421<pre><code class="language-yaml">cdn: # "jsdelivr" (default), "bootcdn", "unpkg", "cdnjs"
1422</code></pre>
1423
1424<p><a href="https://www.jsdelivr.com/" target="_blank">jsDelivr</a> is used as the default CDN provider. You can also choose <a href="https://www.bootcdn.cn/" target="_blank">BootCDN</a>, <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/" target="_blank">cdnjs</a> to be your CDN provider. All CDN URLs can be found in <code>_data/cdn.yml</code>.</p>
1425
1426<h3 id="additional-functions-for-markdown">Additional Functions for Markdown</h3>
1427
1428<pre><code class="language-yaml">math: 
1429    enable: # if to enable math rendering for all articles
1430            # false (default), true
1431    engine: # specify the math rendering engine
1432            # "katex" (default), "mathjax"
1433chart: # if to enable Chart.js: false (defaule), true
1434mermaid: # if to enable mermaid: false (default), true
1435emoji-plus: # if to enable additional emoji: false (default), true
1436</code></pre>
1437
1438<p>Refer to <a href="#additional-functions-for-markdown-1">here</a> for more information.</p>
1439
1440<h3 id="hitokoto">Hitokoto</h3>
1441
1442<pre><code class="language-yaml">hitokoto: true # default: false
1443</code></pre>
1444
1445<p>Set <code>hitokoto</code> to <code>true</code> to enable the Hitokoto bubble on home page. The bubble will appear when you hover your mouse cursor over the avatar:</p>
1446
1447<p><img src="../img/docs/hitokoto-bubble.jpg" alt="Hitokoto Bubble"></p>
1448
1449<h2 id="page">Page</h2>
1450
1451<h3 id="home">Home</h3>
1452
1453<p>Switching among multiple cover images is supported. The path and the RGB value of the mask of each cover image should be specified in the Front-matter of <code>index.html</code>:</p>
1454
1455<pre><code class="language-yaml">description: # the sentence you want to show on the home page
1456header-img:
1457    -   url: # path of the cover image1
1458        mask: # RGB value of the mask of the cover image1 (optional), like: rgba(40, 57, 101, .4)
1459    -   url: # path of the cover image2
1460        mask: # RGB value of the mask of the cover image2 (optional)
1461</code></pre>
1462
1463<p>The <em>mask</em> is the translucent overlay placed on the cover image. It will be helpful when your cover image is so complex that your title can not stand out.</p>
1464
1465<h3 id="about">About</h3>
1466
1467<p>Just refer to the <a href="/about" target="_blank">About page</a> and its <a href="https://github.com/Renovamen/jekyll-theme-gungnir/blob/master/about.html" target="_blank">Front-matter</a> of this site.</p>
1468
1469<h3 id="links">Links</h3>
1470
1471<p>Just refer to the <a href="/links" target="_blank">Links page</a> and its <a href="https://github.com/Renovamen/jekyll-theme-gungnir/blob/master/links.html" target="_blank">Front-matter</a> of this site. (Repeat *1)</p>
1472
1473<p>If any of the links’ avatar is not specified, <code>img/links/default.jpg</code> will be shown as the default avatar.</p>
1474
1475<p>If you want to enable comments in this page, you should enable comments in <code>_config.yml</code> and set <code>comment: true</code> in the Front-matter of this page.</p>
1476
1477<h2 id="content">Content</h2>
1478
1479<h3 id="post">Post</h3>
1480
1481<p>Create your posts (Markdown files) under <code>_posts/</code> directory. The format of their filename should be <code>year-month-day-title.md</code>. Their YAML Front-matter should be like this:</p>
1482
1483<pre><code class="language-yaml">---
1484layout: post
1485title: # title
1486subtitle: # subtitle
1487author: # author's name, defaults to the site's title
1488header-img: # path of the cover image
1489header-mask: # RGB value of the mask of the cover image, like: rgba(40, 57, 101, .4)
1490header-style: text # add this line if you don't want a cover image
1491catalog: # if to enable catalog: false (default), true
1492math: # if to enable math rendering
1493tags: # tags
1494  - tag1
1495  - tag2
1496  - ...
1497---
1498</code></pre>
1499
1500<p>It should be noted that, <code>header-img</code> will be shown on both <a href="#post-list">home page</a> and post page. Refer to <a href="#math-rendering">here</a> for the information about the configuration of <code>math</code>.</p>
1501
1502<h3 id="additional-functions-for-markdown-1">Additional Functions for Markdown</h3>
1503
1504<h4 id="math-rendering">Math Rendering</h4>
1505
1506<p><a href="https://github.com/mathjax/MathJax" target="_blank">Mathjax</a> and <a href="https://github.com/KaTeX/KaTeX" target="_blank">Katex</a> are supported for rendering mathematical formulas in articles.</p>
1507
1508<p>Katex is faster than Mathjax (check it out <a href="https://katex.org/" target="_blank">here</a>), but the number of Tex functions it supports is less than Mathjax (<a href="https://katex.org/docs/supported.html" target="_blank">here</a> is all functions supported by Katex).</p>
1509
1510<p>Math rendering will only be enabled for the articles with <code>math: true</code> in their Front-matter when <code>math.enable: false</code> is set in <code>_config.yml</code>:</p>
1511
1512<pre><code class="language-yaml">---
1513layout: post
1514math: true
1515---
1516</code></pre>
1517
1518<p>Otherwise, this function will be enabled for all articles (including <code>post</code> and <code>keynote</code>).</p>
1519
1520<p>Example:</p>
1521
1522<p>Inline math: 
1522<script type="math/tex">E = mc^2</script>
1522</p>
1523
1524<p>Display math:</p>
1525
1526<script type="math/tex; mode=display">i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.</script>
1526
1527
1528<pre><code class="language-plaintext">$$ E = mc^2 $$
1529
1530$$
1531i \hbar \frac{\partial \psi}{\partial t}
1532= \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi
1533$$
1534</code></pre>
1535
1536<h4 id="chart-and-diagram">Chart and Diagram</h4>
1537
1538<h5 id="chart-chartjs">Chart (Chart.js)</h5>
1539
1540<p><a href="https://github.com/chartjs/Chart.js" target="_blank">Chart.js</a> is used to create interactive charts in articles. Refer to the <a href="https://www.chartjs.org/docs/latest/" target="_blank">documentation of Chart.js</a> for the methods of creating charts.</p>
1541
1542<p>Example:</p>
1543
1544<pre><code class="language-chart">{
1545    "type": "bar",
1546    "data": {
1547        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
1548        "datasets": [{
1549            "label": "# of Votes",
1550            "data": [12, 19, 3, 5, 2, 3],
1551            "backgroundColor": [
1552                "rgba(255, 99, 132, 0.2)",
1553                "rgba(54, 162, 235, 0.2)",
1554                "rgba(255, 206, 86, 0.2)",
1555                "rgba(75, 192, 192, 0.2)",
1556                "rgba(153, 102, 255, 0.2)",
1557                "rgba(255, 159, 64, 0.2)"
1558            ],
1559            "borderColor": [
1560                "rgba(255, 99, 132, 1)",
1561                "rgba(54, 162, 235, 1)",
1562                "rgba(255, 206, 86, 1)",
1563                "rgba(75, 192, 192, 1)",
1564                "rgba(153, 102, 255, 1)",
1565                "rgba(255, 159, 64, 1)"
1566            ],
1567            "borderWidth": 1
1568        }]
1569    },
1570    "options": {
1571        "scales": {
1572            "yAxes": [{
1573                "ticks": {
1574                    "beginAtZero": true
1575                }
1576            }]
1577        }
1578    }
1579}
1580</code></pre>
1581
1582<pre><code class="json">```chart
1583{
1584    "type": "bar",
1585    "data": {
1586        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
1587        "datasets": [{
1588            "label": "# of Votes",
1589            "data": [12, 19, 3, 5, 2, 3],
1590            "backgroundColor": [
1591                "rgba(255, 99, 132, 0.2)",
1592                "rgba(54, 162, 235, 0.2)",
1593                "rgba(255, 206, 86, 0.2)",
1594                "rgba(75, 192, 192, 0.2)",
1595                "rgba(153, 102, 255, 0.2)",
1596                "rgba(255, 159, 64, 0.2)"
1597            ],
1598            "borderColor": [
1599                "rgba(255, 99, 132, 1)",
1600                "rgba(54, 162, 235, 1)",
1601                "rgba(255, 206, 86, 1)",
1602                "rgba(75, 192, 192, 1)",
1603                "rgba(153, 102, 255, 1)",
1604                "rgba(255, 159, 64, 1)"
1605            ],
1606            "borderWidth": 1
1607        }]
1608    },
1609    "options": {
1610        "scales": {
1611            "yAxes": [{
1612                "ticks": {
1613                    "beginAtZero": true
1614                }
1615            }]
1616        }
1617    }
1618}
1619```
1620</code></pre>
1621
1622<p><code class="warning">Note</code>:the <code>key</code> in <code>json</code> should be with <strong>quotes</strong>, or there will be some unexpected errors…</p>
1623
1624<h5 id="diagram-mermaid">Diagram (mermaid)</h5>
1625
1626<p><a href="https://github.com/knsv/mermaid" target="_blank">mermaid</a> is used to create diagrams in articles. Refer to the <a href="https://mermaid-js.github.io/mermaid/" target="_blank">documentation of mermaid</a> for the methods of creating diagrams.</p>
1627
1628<p>Example:</p>
1629
1630<pre><code class="language-mermaid">sequenceDiagram
1631    Alice-&gt;&gt;John: Hello John, how are you?
1632    John--&gt;&gt;Alice: Great!
1633</code></pre>
1634
1635<pre><code>```mermaid
1636sequenceDiagram
1637    Alice-&gt;&gt;John: Hello John, how are you?
1638    John--&gt;&gt;Alice: Great!
1639```
1640</code></pre>
1641
1642<h4 id="tag">Tag</h4>
1643<p><code class="info">info</code></p>
1644
1645<pre><code class="language-markdown">`info`{:.info}
1646</code></pre>
1647
1648<p><code class="success">success</code></p>
1649
1650<pre><code class="language-markdown">`success`{:.success}
1651</code></pre>
1652
1653<p><code class="warning">warning</code></p>
1654
1655<pre><code class="language-markdown">`warning`{:.warning}
1656</code></pre>
1657
1658<p><code class="error">error</code></p>
1659
1660<pre><code class="language-markdown">`error`{:.error}
1661</code></pre>
1662
1663<h4 id="alert-1">Alert</h4>
1664<p class="info">A info alert.</p>
1665
1666<pre><code class="language-markdown">A info alert.
1667{:.info}
1668</code></pre>
1669
1670<p class="success">A success alert.</p>
1671
1672<pre><code class="language-markdown">A success alert.
1673{:.success}
1674</code></pre>
1675
1676<p class="warning">A warning alert.</p>
1677
1678<pre><code class="language-markdown">A warning alert.
1679{:.warning}
1680</code></pre>
1681
1682<p class="error">An error alert.</p>
1683
1684<pre><code class="language-markdown">An error alert.
1685{:.error}
1686</code></pre>
1687
1688<h4 id="emoji">Emoji</h4>
1689
1690<p><a href="https://github.com/jekyll/jemoji" target="_blank">jemoji</a> is used to generate emojis. This plugin should be installed manually:</p>
1691
1692<pre><code class="language-bash">gem install jemoji
1693</code></pre>
1694
1695<p><a href="https://pages.github.com/versions/" target="_blank">Here</a> we can know that jemoji has already been installed on Github Pages. Code of all emojis can be found <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">here</a>.</p>
1696
1697<p>Example:</p>
1698
1699<p><img class="emoji" title=":smile:" alt=":smile:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png" height="20" width="20"> <img class="emoji" title=":smirk:" alt=":smirk:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f60f.png" height="20" width="20"> <img class="emoji" title=":racehorse:" alt=":racehorse:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f40e.png" height="20" width="20"> <img class="emoji" title=":wolf:" alt=":wolf:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f43a.png" height="20" width="20"></p>
1700
1701<pre><code class="language-markdown">:smile: :smirk: :racehorse: :wolf:
1702</code></pre>
1703
1704<h4 id="image-annotation">Image Annotation</h4>
1705
1706<p><img src="../img/theme.jpg" alt=""></p>
1707
1708<p class="desc">This is an image.</p>
1709
1710<pre><code class="markdown">![](../img/theme.jpg)
1711
1712    This is an image.
1713    {:.desc}
1714</code></pre>
1715
1716<h2 id="libraries">Libraries</h2>
1717
1718<p>Here are all open source libraries used by this theme.</p>
1719
1720<h3 id="css">CSS</h3>
1721
1722<ul>
1723  <li><a href="https://github.com/twbs/bootstrap" target="_blank">Bootstrap</a></li>
1724  <li><a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome</a></li>
1725  <li>
1726<a href="https://github.com/l-lin/font-awesome-animation" target="_blank">Font Awesome Animation</a> (animation of icons)</li>
1727</ul>
1728
1729<h3 id="javascript">JavaScript</h3>
1730<ul>
1731  <li><a href="https://github.com/jquery/jquery" target="_blank">jQuery</a></li>
1732  <li>
1733<a href="https://github.com/jlmakes/scrollreveal" target="_blank">ScrollReveal</a> (enter animation of the post list (home page) and timeline (about page))</li>
1734  <li>
1735<a href="https://github.com/tscanlin/tocbot" target="_blank">Tocbot</a> (catalog of articles)</li>
1736  <li>
1737<a href="https://github.com/bryanbraun/anchorjs/" target="_blank">AnchorJS</a> (anchors of articles)</li>
1738  <li><a href="https://github.com/gitalk/gitalk" target="_blank">Gitalk</a></li>
1739  <li><a href="https://github.com/xCss/Valine" target="_blank">Valine</a></li>
1740  <li>
1741<a href="https://github.com/chartjs/Chart.js" target="_blank">Chart.js</a> (<a href="#chart-chartjs">charts</a>)</li>
1742  <li>
1743<a href="https://github.com/mermaid-js/mermaid" target="_blank">mermaid</a> (<a href="#diagram-mermaid">diagrams</a>)</li>
1744  <li>
1745<a href="https://github.com/mathjax/MathJax" target="_blank">MathJax</a> (math rendering)</li>
1746  <li>
1747<a href="https://github.com/KaTeX/KaTeX" target="_blank">Katex</a> (math rendering)</li>
1748  <li>
1749<a href="https://github.com/highlightjs/highlight.js" target="_blank">Hightlight.js</a> (syntax highlighting)</li>
1750  <li>
1751<a href="https://github.com/wcoder/highlightjs-line-numbers.js/" target="_blank">hightlight-line-number.js</a> (Highlight.js line numbers plugin)</li>
1752  <li>
1753<a href="https://github.com/christian-fei/Simple-Jekyll-Search" target="_blank">Simple-Jekyll-Search</a> (search)</li>
1754  <li>
1755<a href="https://github.com/ftlabs/fastclick" target="_blank">fastclick</a> (remove click delays on mobile browsers)</li>
1756</ul>
1757
1758</div>
1759
1760        <hr style="visibility: hidden;">
1761        <ul class="pager">
1762          
1763
1764          
1765        </ul>
1766        <hr style="visibility: hidden;">
1767
1768        <!------------ 今日诗词: https://www.jinrishici.com/ ------------>
1769<section class="author-profile">
1770  <div class="info">
1771    <div class="avatar">
1772      <img src="/img/header-avatar.jpeg">
1773    </div>
1774    <h1>Gungnir</h1>
1775  </div>
1776  <span>
1777    <a href="https://www.jinrishici.com/" target="_blank">
1778      <i class="fas fa-pencil-alt"></i>
1779    </a>
1780    <p id="poem-item">作诗中...</p>
1781    <br>
1782    <p id="poem-info"></p>
1783  </span>
1784</section>
1785
1786<script type="text/javascript">
1787  // async load function
1788  function async(u, c) {
1789    var d = document,
1790      t = "script",
1791      o = d.createElement(t),
1792      s = d.getElementsByTagName(t)[0];
1793    o.src = u;
1794    if (c) {
1795      o.addEventListener(
1796        "load",
1797        function (e) {
1798          c(null, e);
1799        },
1800        false
1801      );
1802    }
1803    s.parentNode.insertBefore(o, s);
1804  }
1805  async("https://sdk.jinrishici.com/v2/browser/jinrishici.js", function () {
1806    jinrishici.load(function (result) {
1807      var poem = document.querySelector("#poem-item");
1808      var info = document.querySelector("#poem-info");
1809
1810      if (result.status === "success") {
1811        var data = result.data;
1812        poem.innerHTML = data.content;
1813        info.innerHTML =
1814          "【" +
1815          data.origin.dynasty +
1816          "】" +
1817          data.origin.author +
1818          "《" +
1819          data.origin.title +
1820          "》";
1821      }
1822    });
1823  });
1824</script>
1824
1825
1826
1827        
1828          
1829<!----------------- Gitalk ----------------->
1830<div class="comment">
1831  <div id="gitalk-container"></div>
1832</div>
1833<script type="text/javascript">
1834  var gitalk = new Gitalk({
1835    clientID: "faf464da633b08ff5317",
1836    clientSecret: "402324fc860894e5fcba6320fddbddd1ec7f5644",
1837    repo: "gitalk-comments",
1838    owner: "This-is-an-Apple",
1839    admin: ['Renovamen', 'This-is-an-Apple'],
1840    id: md5(location.pathname),
1841    distractionFreeMode: false
1842  });
1843  gitalk.render("gitalk-container");
1844</script>
1844
1845
1846
1847
1848
1849        
1850      </div>
1851
1852      <!-- Side Catalog Container -->
1853      
1854        <!-- Side Catalog Container -->
1855<div class="col-lg-2 col-lg-offset-0 sidebar-container catalog-container">
1856  <div class="side-catalog">
1857    <hr class="hidden-sm hidden-xs">
1858    <h5>
1859      <a class="catalog-toggle" href="#">CATALOG</a>
1860    </h5>
1861    <ul class="catalog-body"></ul>
1862  </div>
1863</div>
1864<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tocbot.css" rel="stylesheet" type="text/css">
1865
1866<script type="text/javascript">
1867  function generateCatalog(selector) {
1868    // links page
1869    if ("post" == "links") {
1870      _containerSelector = "div.link-list";
1871    }
1872    // interop with multilangual
1873    else {
1874      if ("true" == "true") {
1875        _containerSelector = "div.post-container.active";
1876      } else {
1877        _containerSelector = "div.post-container";
1878      }
1879    }
1880
1881    tocbot.init({
1882      // Where to render the table of contents.
1883      tocSelector: selector,
1884      // Where to grab the headings to build the table of contents.
1885      contentSelector: _containerSelector,
1886      // Which headings to grab inside of the contentSelector element.
1887      headingSelector: "h2, h3, h4, h5, h6",
1888    });
1889    return true;
1890  }
1891
1892  generateCatalog(".catalog-body");
1893
1894  // toggle side catalog
1895  $(".catalog-toggle").click(function (e) {
1896    e.preventDefault();
1897    $(".side-catalog").toggleClass("fold");
1898  });
1899</script>
1899
1900
1901      
1902    </div>
1903  </div>
1904</article>
1905
1906<!-- add support for mathjax by voleking-->
1907
1908  
1909    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
1910<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
1910
1911
1912<script>
1913  $("script[type='math/tex']").replaceWith(function () {
1914    var tex = $(this).text();
1915    return katex.renderToString(tex, { displayMode: false });
1916  });
1917
1918  $("script[type='math/tex; mode=display']").replaceWith(function () {
1919    var tex = $(this).html();
1920    return katex.renderToString(tex.replace(/%.*/g, ""), { displayMode: true });
1921  });
1922</script>
1922
1923
1924  
1925
1926
1927<!-- Renovamen: add support for chart and mermaid -->
1928
1929  <!-- Borrowed from: https://github.com/kitian616/jekyll-TeXt-theme -->
1930<!-- Chart.js: https://www.chartjs.org/docs/latest/ -->
1931<script>
1932  var $canvas = null,
1933    $this = null,
1934    _ctx = null,
1935    _text = "";
1936  $(".language-chart").each(function () {
1937    $this = $(this);
1938    $canvas = $("<canvas></canvas>");
1939    _text = $this.text();
1940    $this.text("").append($canvas);
1941    _ctx = $canvas.get(0).getContext("2d");
1942    _ctx &&
1943      _text &&
1944      new Chart(_ctx, JSON.parse(_text)) &&
1945      $this.attr("data-processed", true);
1946  });
1947
1948  $(".language-chart").parent().css({
1949    "background-color": "transparent",
1950    border: "none",
1951  });
1952</script>
1952
1953
1954
1955
1956
1957  <!-- Borrowed from: https://github.com/kitian616/jekyll-TeXt-theme -->
1958<!-- mermaid.js: https://mermaid-js.github.io/mermaid/ -->
1959<script>
1960  mermaid.initialize({
1961    startOnLoad: true,
1962  });
1963  mermaid.init(undefined, ".language-mermaid");
1964
1965  $(".language-mermaid").parent().css({
1966    "background-color": "transparent",
1967    border: "none",
1968  });
1969</script>
1969
1970
1971
1972
1973<!-- Renovamen: add support for enhancement emoji -->
1974
1975  
1975<script>
1976  $(".emoji-plus").each(function () {
1977    let $this = $(this);
1978    const imgURL = "/img/emoji/bilitv/" + $this.text() + ".gif";
1979    const $img = $(
1980      '<img class="emoji-plus" src="' +
1981        imgURL +
1982        '" height="30" width="30">'
1983    );
1984    $this.replaceWith($img);
1985  });
1986</script>
1986
1987
1988
1989
1990
1991  <!-- anchor.js: http://bryanbraun.github.io/anchorjs/ -->
1992<script>
1993  anchors.options = {
1994    visible: "always",
1995    placement: "right",
1996    icon: "#",
1997  };
1998  anchors
1999    .add()
2000    .remove(".intro-header h1")
2001    .remove(".subheading")
2002    .remove(".sidebar-container h5");
2003</script>
2003
2004<style>
2005  /* place left on bigger screen */
2006  @media all and (min-width: 800px) {
2007    .anchorjs-link {
2008      position: absolute;
2009      left: -0.75em;
2010      font-size: 1.1em;
2011      margin-top: -0.1em;
2012    }
2013  }
2014</style>
2015
2016
2017
2018
2019
2020      <!-- Footer -->
2021<footer>
2022  <div class="container">
2023    <div class="row">
2024      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
2025        <!-- SNS Link -->
2026        <!-- 
2027
2028
2029<div class="list-inline text-center">
2030
2031  
2032  <a target="_blank" href="https://github.com/Renovamen">
2033    <span class="fa-stack fa-lg">
2034      <i class="fas fa-circle fa-stack-2x"></i>
2035      <i class="fab fa-github-alt fa-stack-1x fa-inverse"></i>
2036    </span>
2037  </a>
2038  
2039
2040  
2041  <a target="_blank" href="https://www.linkedin.com/in/xiaohan-zou-55bba0160">
2042    <span class="fa-stack fa-lg">
2043      <i class="fas fa-circle fa-stack-2x"></i>
2044      <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
2045    </span>
2046  </a>
2047  
2048
2049  
2050  <a target="_blank" href="https://www.facebook.com/renovamen.zou">
2051    <span class="fa-stack fa-lg">
2052      <i class="fas fa-circle fa-stack-2x"></i>
2053      <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
2054    </span>
2055  </a>
2056  
2057
2058  
2059  <a target="_blank" href="https://twitter.com/renovamen_zxh">
2060    <span class="fa-stack fa-lg">
2061      <i class="fas fa-circle fa-stack-2x"></i>
2062      <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
2063    </span>
2064  </a>
2065  
2066
2067  
2068  <a target="_blank" href="https://www.zhihu.com/people/chao-neng-gui-su">
2069    <span class="fa-stack fa-lg">
2070      <i class="fas fa-circle fa-stack-2x"></i>
2071      <i class="fas fa-stack-1x fa-inverse">知</i>
2072    </span>
2073  </a>
2074  
2075
2076  
2077
2078  
2079  <a href="mailto:[email protected]">
2080    <span class="fa-stack fa-lg">
2081      <i class="fas fa-circle fa-stack-2x"></i>
2082      <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
2083    </span>
2084  </a>
2085  
2086
2087  
2088  <a target="_blank" href="/feed.xml">
2089    <span class="fa-stack fa-lg">
2090      <i class="fas fa-circle fa-stack-2x"></i>
2091      <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
2092    </span>
2093  </a>
2094  
2095</div>
2096 -->
2097        <p class="copyright">
2098          © <a href="https://github.com/Renovamen" target="_blank">Renovamen</a> 2018-2020
2099          <br>
2100          Powered by <a href="https://jekyllrb.com/" target="_blank">Jekyll</a> &amp; <a href="https://github.com/Renovamen/jekyll-theme-gungnir" target="_blank">Gungnir</a>
2101        </p>
2102      </div>
2103    </div>
2104  </div>
2105</footer>
2106
2107<!-- add dark / light mode switcher -->
2108<!-- dark / light detection, borrowed from gridsome.org -->
2109<script>
2110  (function () {
2111    window.__onThemeChange = function () {};
2112    function setTheme(newTheme) {
2113      window.__theme = newTheme;
2114      preferredTheme = newTheme;
2115      document.body.setAttribute("data-theme", newTheme);
2116      window.__onThemeChange(newTheme);
2117      setThemeIcon(newTheme);
2118    }
2119
2120    var preferredTheme;
2121    try {
2122      preferredTheme = localStorage.getItem("theme");
2123    } catch (err) {}
2124
2125    window.__setPreferredTheme = function (newTheme) {
2126      setTheme(newTheme);
2127      try {
2128        localStorage.setItem("theme", newTheme);
2129      } catch (err) {}
2130    };
2131
2132    var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
2133
2134    darkQuery.addListener(function (e) {
2135      window.__setPreferredTheme(e.matches ? "dark" : "light");
2136    });
2137
2138    setTheme(preferredTheme || (darkQuery.matches ? "dark" : "light"));
2139  })();
2140</script>
2140
2141<!-- Theme JavaScript -->
2142<script src="/js/gungnir/gungnir.min.js"></script>
2142
2143
2144
2145<!-- Service Worker -->
2146
2147<script src="/js/gungnir/sw-registration.js"></script>
vendor: 1 bytes, line 2147
2147
2148<script src="/js/gungnir/snackbar.js"></script>
2148
2149
2150
2151
2152
2153
2154
2155<!--fastClick.js -->
2156<script>
2157  var $nav = document.querySelector("nav");
2158  if($nav) FastClick.attach($nav);
2159</script>
2159
2160
2161
2162<!-- Google Analytics -->
2163
2164  <!-- Google Analytics -->
vendor: 64 bytes, lines 2164-2165
2164
2165<script async src="https://www.googletagmanager.com/gtag/js?id=
2165G-ZYM02DSEHS
vendor: 12 bytes, line 2165
2165"></script>
2166<script>
2167  
vendor: 142 bytes, lines 2167-2172
2167window.dataLayer = window.dataLayer || [];
2168  function gtag() {
2169    dataLayer.push(arguments);
2170  }
2171  gtag("js", new Date());
2172  gtag("config", "
2172G-ZYM02DSEHS
vendor: 4 bytes, line 2172
2172");
2173</script>
2173
2174
2175
2176
2177
2178<!-- Baidu Tongji -->
2179
2180  <!-- Baidu Tongji -->
2181<script>
2182  // dynamic User by Hux
2183  var _baId = "00504d7a0bf51278aa92b36e60e830b5";
2184
2185  // Originial
2186  var _hmt = _hmt || [];
2187  (function () {
2188    var hm = document.createElement("script");
2189    hm.src = "//hm.baidu.com/hm.js?" + _baId;
2190    var s = document.getElementsByTagName("script")[0];
2191    s.parentNode.insertBefore(hm, s);
2192  })();
2193</script>
2193
2194
2195
2196
2197
2198<!-- Multi-Lingual -->
2199
2200  <!-- Handle Language Change -->
2201<script type="text/javascript">
2202  // get nodes
2203  var $zh = document.querySelector(".zh");
2204  var $en = document.querySelector(".en");
2205  var $select = document.querySelector("select");
2206
2207  // bind hashchange event
2208  // Changes at v1.7.2: change the language flag from hash-basing to in-memory basing
2209  // due to its confliction with catalog anchors.
2210  // window.addEventListener('hashchange', _render);
2211
2212  // handle render
2213  function _render(_hash) {
2214    var _hash = _hash || window.location.hash;
2215    // en
2216    if (_hash == "#en") {
2217      $select.selectedIndex = 1;
2218      $en.style.display = "block";
2219      $en.classList.add("active");
2220      $zh.style.display = "none";
2221      $zh.classList.remove("active");
2222    }
2223    // zh by default
2224    else {
2225      // not trigger onChange, otherwise cause a loop call.
2226      $select.selectedIndex = 0;
2227      $zh.style.display = "block";
2228      $zh.classList.add("active");
2229      $en.style.display = "none";
2230      $en.classList.remove("active");
2231    }
2232    // interop with catalog
2233    if ("true") generateCatalog(".catalog-body");
2234  }
2235
2236  // handle select change
2237  function onLanChange(index) {
2238    if (index == 0) {
2239      _hash = "#zh";
2240    } else {
2241      _hash = "#en";
2242    }
2243    _render(_hash);
2244  }
2245
2246  // init
2247  _render();
2248</script>
2248
2249
2250
2251
2252    </div>
2253
2254    <!-- modify styles of navbar on mobile -->
2255    <div class="mobile-nav">
2256  <div class="mobile-menu-avatar">
2257    <div class="avatar-container">
2258      <img src="/img/header-avatar.jpeg">
2259    </div>
2260  </div>
2261
2262  <p class="mobile-menu-heading">Meow?</p>
2263
2264  
2265
2266
2267<div class="list-inline text-center">
2268
2269  
2270  <a target="_blank" href="https://github.com/Renovamen">
2271    <span class="fa-stack fa-lg">
2272      <i class="fas fa-circle fa-stack-2x"></i>
2273      <i class="fab fa-github-alt fa-stack-1x fa-inverse"></i>
2274    </span>
2275  </a>
2276  
2277
2278  
2279  <a target="_blank" href="https://www.linkedin.com/in/xiaohan-zou-55bba0160">
2280    <span class="fa-stack fa-lg">
2281      <i class="fas fa-circle fa-stack-2x"></i>
2282      <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
2283    </span>
2284  </a>
2285  
2286
2287  
2288  <a target="_blank" href="https://www.facebook.com/renovamen.zou">
2289    <span class="fa-stack fa-lg">
2290      <i class="fas fa-circle fa-stack-2x"></i>
2291      <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
2292    </span>
2293  </a>
2294  
2295
2296  
2297  <a target="_blank" href="https://twitter.com/renovamen_zxh">
2298    <span class="fa-stack fa-lg">
2299      <i class="fas fa-circle fa-stack-2x"></i>
2300      <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
2301    </span>
2302  </a>
2303  
2304
2305  
2306  <a target="_blank" href="https://www.zhihu.com/people/chao-neng-gui-su">
2307    <span class="fa-stack fa-lg">
2308      <i class="fas fa-circle fa-stack-2x"></i>
2309      <i class="fas fa-stack-1x fa-inverse">知</i>
2310    </span>
2311  </a>
2312  
2313
2314  
2315
2316  
2317  <a href="mailto:[email protected]">
2318    <span class="fa-stack fa-lg">
2319      <i class="fas fa-circle fa-stack-2x"></i>
2320      <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
2321    </span>
2322  </a>
2323  
2324
2325  
2326  <a target="_blank" href="/feed.xml">
2327    <span class="fa-stack fa-lg">
2328      <i class="fas fa-circle fa-stack-2x"></i>
2329      <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
2330    </span>
2331  </a>
2332  
2333</div>
2334
2335  <ul>
2336    
2337    <li>
2338      
2339      <a href="/" class="faa-parent animated-hover">
2340      
2341        
2342        <i class="fab fa-fort-awesome fa-lg faa-wrench"></i>
2343        
2344        Home
2345      </a>
2346
2347      
2348    </li>
2349    
2350    <li>
2351      
2352      <a class="faa-parent animated-hover">
2353      
2354        
2355        <i class="fas fa-paw fa-lg faa-wrench"></i>
2356        
2357        About
2358      </a>
2359
2360      
2361      <ul class="sub-menu">
2362        
2363        <li>
2364          <a href="/about/" class="faa-parent animated-hover">
2365          <i class="fas fa-user-astronaut fa-lg faa-wrench"></i>
2366          Me
2367          </a>
2368        </li>
2369        
2370        <li>
2371          <a href="/theme/" class="faa-parent animated-hover">
2372          <i class="fas fa-meteor fa-lg faa-wrench"></i>
2373          Theme
2374          </a>
2375        </li>
2376        
2377      </ul>
2378      
2379    </li>
2380    
2381    <li>
2382      
2383      <a href="/archive/" class="faa-parent animated-hover">
2384      
2385        
2386        <i class="fas fa-archive fa-lg faa-wrench"></i>
2387        
2388        Archive
2389      </a>
2390
2391      
2392    </li>
2393    
2394    <li>
2395      
2396      <a href="/links/" class="faa-parent animated-hover">
2397      
2398        
2399        <i class="fas fa-link fa-lg faa-wrench"></i>
2400        
2401        Links
2402      </a>
2403
2404      
2405    </li>
2406    
2407
2408    <li>
2409      <a id="mobile-search-btn" class="faa-parent animated-hover">
2410        <i class="fas fa-search fa-lg faa-wrench"></i> Search
2411      </a>
2412    </li>
2413  </ul>
2414</div>
2415
2416
2417    <!-- support search -->
2418    <div id="search" class="search-page">
2419  <i class="search-close fas fa-chevron-down"></i>
2420  <p class="search-title text-center"></p>
2421
2422  <div class="input">
2423    <input id="search-input" type="text" class="search-field" placeholder="Just search ..." style="background-color: transparent">
2424  </div>
2425  <div id="search-results" class="search-results"></div>
2426</div>
2427
2428<script>
2429  // simple-jekyll-search.js
2430  SimpleJekyllSearch({
2431    searchInput: document.getElementById("search-input"),
2432    resultsContainer: document.getElementById("search-results"),
2433    json: "/search.json",
2434    searchResultTemplate:
2435      '<li class="result-item item"><a href="{url}" title="{desc}"><div class="result-item-title">{title}</div><div class="result-item-subtitle">{subtitle}</div></a></li>',
2436    noResultsText:
2437      '<li class="result-item item"><div class="result-item-title">No Results</div></li>',
2438    limit: 20,
2439    fuzzy: false,
2440  });
2441
2442  function autoFocus() {
2443    setTimeout(function () {
2444      document.querySelector(".search-page input").focus();
2445    }, 400);
2446  }
2447
2448  // open search page
2449  $("#search-btn").click(function () {
2450    $(".search-page").toggleClass("open");
2451    autoFocus();
2452  });
2453
2454  // open search page (mobile)
2455  $("#mobile-search-btn").click(function () {
2456    $(".search-page").toggleClass("open");
2457    autoFocus();
2458  });
2459
2460  // close search page
2461  $(".search-close").click(function () {
2462    $(".search-page").toggleClass("open");
2463  });
2464</script>
2464
2465
2466
2467  <!-- Migrate from head to bottom, no longer block render and still work -->
2468  </body>
2469</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.