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 <|-- Duck 824 Animal <|-- Fish 825 Animal <|-- 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 <|-- Duck 848 Animal <|-- Fish 849 Animal <|-- 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"> 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->>John: Hello John, how are you? 1632 John-->>Alice: Great! 1633</code></pre> 1634 1635<pre><code>```mermaid 1636sequenceDiagram 1637 Alice->>John: Hello John, how are you? 1638 John-->>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"> 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> & <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.