1
0

569 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN" class="loading">
<head>
<!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>使用 Markdown 编写基于 Latex 的报告 - Blog</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="google" content="notranslate" />
<meta name="keywords" content="Developer, Python, C++, JavaScript, Java,">
<meta name="description" content="DavidZ&#39;s Blog,¶前言
计算机这个专业,有很多报告要做。在山威的时候,报告格式没有什么限制 WordPDF 都可以,那个时候我开始使用 Markdown 作为我的排版工具,因为实在是没有时间经历去研究 Word ,">
<meta name="author" content="DavidZ">
<link rel="alternative" href="atom.xml" title="Blog" type="application/atom+xml">
<link rel="icon" href="/img/favicon.png">
<link href="https://fonts.loli.net/css?family=Roboto+Mono|Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1429596_nzgqgvnmkjb.css">
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/codemirror.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/theme/dracula.css">
<link rel="stylesheet" href="/css/obsidian.css">
<link rel="stylesheet" href="/css/ball-atom.min.css">
<meta name="generator" content="Hexo 4.2.0"><!-- hexo-inject:begin --><!-- hexo-inject:end --></head>
<body class="loading">
<!-- hexo-inject:begin --><!-- hexo-inject:end --><div class="loader">
<div class="la-ball-atom la-2x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<span id="config-title" style="display:none">Blog</span>
<div id="loader"></div>
<div id="single">
<div class="scrollbar gradient-bg-rev"></div>
<div id="top" style="display: block;">
<div class="bar" style="width: 0;"></div>
<div class="navigation animated fadeIn fast delay-1s">
<img id="home-icon" class="icon-home" src="/img/favicon.png" alt="" data-url="https://blog.davidz.cn">
<div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>
<h3 class="subtitle">使用 Markdown 编写基于 Latex 的报告</h3>
<div class="social">
<!-- <div class="like-icon">-->
<!-- <a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
<!-- </div>-->
<div>
<div class="share">
<a href="javascript:;" class="iconfont icon-share1"></a>
<div class="share-component-cc" data-disabled="facebook,douban,linkedin,diandian,tencent,google"></div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class=article-header-wrapper>
<div class="article-header">
<div class="article-cover animated fadeIn" style="
animation-delay: 600ms;
animation-duration: 1.2s;
background-image:
radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.65), #100e17),
url(//davidz.cn/static/blog/2020-02-12-write-latex-report-with-markdown/cover.jpg);">
</div>
<div class="else">
<p class="animated fadeInDown">
<a href="/categories/Productivity"><b>
</b>PRODUCTIVITY<b></b></a>
二月 12, 2020
</p>
<h3 class="post-title animated fadeInDown"><a href="/write-latex-report-with-markdown/" title="使用 Markdown 编写基于 Latex 的报告" class="">使用 Markdown 编写基于 Latex 的报告</a>
</h3>
<p class="post-count animated fadeInDown">
<span>
<b class="iconfont icon-text2"></b> <i>文章字数</i>
6.7k
</span>
<span>
<b class="iconfont icon-timer__s"></b> <i>阅读约需</i>
6 mins.
</span>
<span id="busuanzi_container_page_pv">
<b class="iconfont icon-read"></b> <i>阅读次数</i>
<span id="busuanzi_value_page_pv">0</span>
</span>
</p>
<ul class="animated fadeInDown post-tags-list" itemprop="keywords"><li class="animated fadeInDown post-tags-list-item"><a class="animated fadeInDown post-tags-list-link" href="/tags/Markdown/" rel="tag">Markdown</a></li><li class="animated fadeInDown post-tags-list-item"><a class="animated fadeInDown post-tags-list-link" href="/tags/Windows/" rel="tag">Windows</a></li></ul>
</div>
</div>
</div>
<div class="screen-gradient-after">
<div class="screen-gradient-content">
<div class="screen-gradient-content-inside">
<div class="bold-underline-links screen-gradient-sponsor">
<p>
<span class="animated fadeIn delay-1s"></span>
</p>
</div>
</div>
</div>
</div>
<div class="article">
<div class='main'>
<div class="content markdown animated fadeIn">
<h2 id="前言"><a class="header-anchor" href="#前言"></a>前言</h2>
<p>计算机这个专业,有很多报告要做。在山威的时候,报告格式没有什么限制 WordPDF 都可以,那个时候我开始使用 Markdown 作为我的排版工具,因为实在是没有时间经历去研究 Word 的各种高级功能(<s>主要是懒</s>。Markdown 十分简单,易学,在<a href="https://github.com" target="_blank" rel="noopener">Github</a>等计算机专业相关平台使用也非常广泛,还可以通过各种模板快速生成<strong>好看</strong><strong>美观</strong><strong>专业</strong>的文档。</p>
<p>后来到了澳国立,老师教授们开始极力鼓吹 Latex 和 PDF基本上算是软性要求我们使用 Latex 编写,还规定了衬线字体,非衬线字体,字号,段落等等,图片还需要是 SVG 格式的矢量图片(最奇葩的是竟然一整节课只讲这个😂),最后生成 PDF 提交(据说这样分数高一些)。所以我开始了漫漫 Latex 学习之路。然而整个过程十分痛苦,装个 TeX Live 跑了好几个小时,换个字体换的我一脸懵逼,预览竟然都不是实时的!!!我甚至觉得还不如 Word 好用,又开始找那些 Latex 编辑器(同学的 MacOS 上有很不错的,然而我是 Windows之后是在线编辑器<a href="https://www.overleaf.com/" target="_blank" rel="noopener">Overleaf</a>,体验还行,但是一边学习 Latex 一边做实验写报告的体验实在是太差劲了,人都要<s>有丝</s>分裂了。我就先用 Markdown 记录下来,想着之后再改成 Latex 吧。然后,我用了 2 天左右的时间,找到了 Markdown 直接转报告的方法,就没再碰 Latex<s>还是懒</s>)。</p>
<h2 id="样例"><a class="header-anchor" href="#样例"></a>样例</h2>
<p><a href="https://github.com/Wandmalfarbe/pandoc-latex-template/#example-images" target="_blank" rel="noopener">eisvogel 主题样例</a></p>
<p>你也可以从<a href="//davidz.cn/static/blog/2020-02-12-write-latex-report-with-markdown/report.pdf" target="_blank" rel="noopener">这里</a>看一下我的成果作为参考,我觉得完全符合我的要求。</p>
<h2 id="思路"><a class="header-anchor" href="#思路"></a>思路</h2>
<p>其实思路很简单,一切的一切都是因为<a href="https://pandoc.org/" target="_blank" rel="noopener">Pandoc</a>这个文档转换软件软件(类似于影音界的格式工厂?)的存在。它官网有一张巨型图片描述了它可以从那些格式转换成那些格式,基本上可以说覆盖了常见的所有文档格式。所以我们就可以用它把 Markown 语言写的文档转换成 PDF 格式的报告,过程中再用一套模板修饰一下就好啦。</p>
<blockquote>
<p>注意<br>
Pandoc 通过 Markdown -&gt; Latex -&gt; PDF 的方式得到 PDF中间文件是 Latex</p>
</blockquote>
<h2 id="准备"><a class="header-anchor" href="#准备"></a>准备</h2>
<h3 id="Markdown-语法"><a class="header-anchor" href="#Markdown-语法"></a>Markdown 语法</h3>
<blockquote>
<p>注意<br>
Markdown 实际上和 HTML 是“近亲”,你甚至可以直接使用 HTML 标签。</p>
</blockquote>
<p>这个百度或者谷歌一下很容易找到教程学起来也很简单10 分钟上手1 天熟练。</p>
<h3 id="Markdown-编辑器"><a class="header-anchor" href="#Markdown-编辑器"></a>Markdown 编辑器</h3>
<p>下面这俩我都有,看心情切换😄。</p>
<h4 id="选项-1-VSCode"><a class="header-anchor" href="#选项-1-VSCode"></a>选项 1: VSCode</h4>
<p><img src="//davidz.cn/static/blog/2020-02-12-write-latex-report-with-markdown/vscode.png" alt="VSCode with Markdown Preview Enhanced"></p>
<p>微软出品,宇宙最强 IDE <code>Visual Studio</code> 的“弟弟”,宇宙最强编辑器。</p>
<p><a href="https://code.visualstudio.com/" target="_blank" rel="noopener">官网</a>|<a href="https://github.com/microsoft/vscode" target="_blank" rel="noopener">Github</a>下载安装包,双击安装即可。</p>
<p>虽然 <code>VSCode</code> 原生支持 Markdown但是下面这几个属于增强型插件</p>
<ol>
<li><code>Markdown Preview Enhanced</code>,增强对 Markdown 的预览。</li>
<li><code>Code Spell Checker</code>,检查你报告里的拼写错误(不过只支持英文)。</li>
<li><code>Markdownlint</code>,检查 Markdown 的语法规范(强迫症专属)。</li>
</ol>
<h4 id="选项-2-Typora"><a class="header-anchor" href="#选项-2-Typora"></a>选项 2: Typora</h4>
<p><img src="//davidz.cn/static/blog/2020-02-12-write-latex-report-with-markdown/typora.png" alt="Typora"></p>
<p>写作体验一级棒👍。</p>
<p><a href="https://www.typora.io/" target="_blank" rel="noopener">官网</a>下载安装包,双击安装即可。</p>
<h3 id="Latex-Engine"><a class="header-anchor" href="#Latex-Engine"></a>Latex Engine</h3>
<blockquote>
<p>注意<br>
Latex 是个语言规范Latex Engine 是它的实现,下面这俩都是 Latex Engine 的集合</p>
</blockquote>
<p>因为 Scoop 里面只有 MiKTeX所以我选择 MiKTeX。反正我只是写个报告选哪个应该都无所谓吧。</p>
<h4 id="选项-1-MiKTeX"><a class="header-anchor" href="#选项-1-MiKTeX"></a>选项 1: MiKTeX</h4>
<p>通过 Scoop 安装:</p>
<pre><code class="language-powershell">scoop install latex
</code></pre>
<p>或者<a href="https://miktex.org/" target="_blank" rel="noopener">官网</a>下载安装。</p>
<h4 id="选项-2-TeX-Live"><a class="header-anchor" href="#选项-2-TeX-Live"></a>选项 2: TeX Live</h4>
<p><a href="http://tug.org/texlive/" target="_blank" rel="noopener">官网</a>下载安装。</p>
<h3 id="Pandoc"><a class="header-anchor" href="#Pandoc"></a>Pandoc</h3>
<p>这个就是前文所说的万能文档格式转换器软件了。</p>
<p>通过 Scoop 安装:</p>
<pre><code class="language-powershell">scoop install pandoc
</code></pre>
<p>或者<a href="https://www.pandoc.org/" target="_blank" rel="noopener">官网</a>下载安装。</p>
<p>用到的过滤器(类似于插件):</p>
<ol>
<li><a href="https://github.com/lierdakil/pandoc-crossref" target="_blank" rel="noopener">pandoc-crossref</a>,用于 pandoc 中的交叉引用,图片,公式,章节等,这个我也是用 Scoop 安装的,没有 Scoop 的话看看<a href="https://github.com/lierdakil/pandoc-crossref#installation" target="_blank" rel="noopener">安装教程</a>吧。</li>
</ol>
<h3 id="Eisvogel-主题"><a class="header-anchor" href="#Eisvogel-主题"></a>Eisvogel 主题</h3>
<p><img src="//davidz.cn/static/blog/2020-02-12-write-latex-report-with-markdown/eisvogel.png" alt="Eisvogel"></p>
<p>这个是我找到的计算机专业风格的论文/报告/书籍/幻灯片的开源模板,对于我来说是真的很合适了,美观,简约又专业。</p>
<p><a href="https://github.com/Wandmalfarbe/pandoc-latex-template" target="_blank" rel="noopener">Github Release</a>下载,放到<a href="https://github.com/Wandmalfarbe/pandoc-latex-template#installation" target="_blank" rel="noopener">指定路径</a>就完了,很简单。</p>
<h2 id="配置"><a class="header-anchor" href="#配置"></a>配置</h2>
<pre><code class="language-YAML">---
title: COMP 2310 Assignment 1 Report
author: Jiahao Zhang U6921098
date: Sept. 27, 2019
documentclass: article
papersize: a4
geometry: margin=2cm
mainfont: Calibri
fontsize: 10pt
titlepage: true
header-right: Jiahao Zhang U6921098
footer-left: Australian National University
autoSectionLabels: true
listings: true
subfigGrid: true
---
</code></pre>
<p>在每个 Markdown 文件最上面形如上面 YAML 代码的叫做<code>YAML Front Matter</code>,可以理解为对全文的配置。这里主要是一些对<a href="https://www.pandoc.org/MANUAL.html#variables" target="_blank" rel="noopener">Pandoc 的配置</a>以及对<a href="https://github.com/Wandmalfarbe/pandoc-latex-template#custom-template-variables" target="_blank" rel="noopener">Eisvogel 主题的配置</a></p>
<h2 id="生成"><a class="header-anchor" href="#生成"></a>生成</h2>
<p>运行下面的命令就可以生成 PDF 啦😄。</p>
<pre><code class="language-powershell">pandoc Report.md `
-o Report.pdf `
--standalone `
--listings `
--number-sections `
--pdf-engine=xelatex `
--filter pandoc-crossref `
--template eisvogel
</code></pre>
<p>简单解释一下,</p>
<ul>
<li><code>-o</code> 指定输出文件</li>
<li><code>--standalone</code> 独立完整文件</li>
<li><code>--listings</code> 使用<a href="https://ctan.org/pkg/listings" target="_blank" rel="noopener">listings</a>高亮代码</li>
<li><code>--number-sections</code> 启用段落编号</li>
<li><code>--pdf-engine=xelatex</code> 指定 PDF 的 engine 为 <code>xelatex</code></li>
<li><code>--filter pandoc-crossref</code> 指定过滤器为 <code>pandoc-crossref</code></li>
<li><code>--template eisvogel</code> 指定模板为 <code>eisvogel</code></li>
</ul>
<h2 id="想法"><a class="header-anchor" href="#想法"></a>想法</h2>
<p>完整的捣鼓下来其实也和学习 Latex 难度差不多了,但是配置完了这一套,只要要求不变,我再写报告的速度会加快很多很多,因为我只需要专注的写 Markdown 就好了😄。</p>
<p>PS: 这个博客所有的文章就是使用 Markdown 编写的。</p>
<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<audio id="audio" loop="1" preload="auto" controls="controls"
data-autoplay="false">
<source type="audio/mpeg" src="//davidz.cn/static/blog/mp3/huozun---juanzhulian.mp3">
</audio>
<div id='gitalk-container' class="comment link"
data-ae='true'
data-ci='489076c5dd3f5ba13f67'
data-cs='d6e3b245787b0b74d0dbe2639ef87f452a401194'
data-r='blog.davidz.cn'
data-o='DavidZhang73'
data-a='DavidZhang73'
data-d=''
>留言</div>
</div>
<div class="sidebar">
<div class="box animated fadeInRight">
<div class="subbox">
<img src="//davidz.cn/static/blog/img/avator.jpg" height=300 width=300></img>
<p>DavidZ</p>
<span>凡事都要留几分</span>
<dl>
<dd><a href="https://github.com/DavidZhang73" target="_blank"><span
class=" iconfont icon-github"></span></a></dd>
<dd><a href="https://twitter.com/david731998" target="_blank"><span
class=" iconfont icon-twitter"></span></a></dd>
<dd><a href="https://stackoverflow.com/users/12693553/davidz" target="_blank"><span
class=" iconfont icon-stack-overflow"></span></a></dd>
</dl>
</div>
<ul>
<li><a href="/">8 <p>文章</p></a></li>
<li><a href="/categories">5 <p>分类</p></a></li>
<li><a href="/tags">11 <p>标签</p></a></li>
</ul>
</div>
<div class="box sticky animated fadeInRight faster">
<div id="toc" class="subbox">
<h4>目录</h4>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">¶前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#样例"><span class="toc-number">2.</span> <span class="toc-text">¶样例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#思路"><span class="toc-number">3.</span> <span class="toc-text">¶思路</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#准备"><span class="toc-number">4.</span> <span class="toc-text">¶准备</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Markdown-语法"><span class="toc-number">4.1.</span> <span class="toc-text">¶Markdown 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Markdown-编辑器"><span class="toc-number">4.2.</span> <span class="toc-text">¶Markdown 编辑器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#选项-1-VSCode"><span class="toc-number">4.2.1.</span> <span class="toc-text">¶选项 1: VSCode</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#选项-2-Typora"><span class="toc-number">4.2.2.</span> <span class="toc-text">¶选项 2: Typora</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Latex-Engine"><span class="toc-number">4.3.</span> <span class="toc-text">¶Latex Engine</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#选项-1-MiKTeX"><span class="toc-number">4.3.1.</span> <span class="toc-text">¶选项 1: MiKTeX</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#选项-2-TeX-Live"><span class="toc-number">4.3.2.</span> <span class="toc-text">¶选项 2: TeX Live</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Pandoc"><span class="toc-number">4.4.</span> <span class="toc-text">¶Pandoc</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Eisvogel-主题"><span class="toc-number">4.5.</span> <span class="toc-text">¶Eisvogel 主题</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置"><span class="toc-number">5.</span> <span class="toc-text">¶配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#生成"><span class="toc-number">6.</span> <span class="toc-text">¶生成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#想法"><span class="toc-number">7.</span> <span class="toc-text">¶想法</span></a></li></ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="back-to-top" class="animated fadeIn faster">
<div class="flow"></div>
<span class="percentage animated fadeIn faster">0%</span>
<span class="iconfont icon-top02 animated fadeIn faster"></span>
</div><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</body>
<footer>
<p class="copyright" id="copyright">
&copy; 2020
<span class="gradient-text">
DavidZ
</span>.
Powered by <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
Theme
<span class="gradient-text">
<a href="https://github.com/TriDiamond/hexo-theme-obsidian" title="Obsidian" target="_blank" rel="noopener">Obsidian</a>
</span>
<small><a href="https://github.com/TriDiamond/hexo-theme-obsidian/blob/master/CHANGELOG.md" title="v1.4.3" target="_blank" rel="noopener">v1.4.3</a></small>
</p>
</footer>
<script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
MathJax.Hub.Config({
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX", "TeX"],
linebreaks: {
automatic: true
},
EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
},
tex2jax: {
inlineMath: [
["$", "$"],
["\\(", "\\)"]
],
processEscapes: true,
ignoreClass: "tex2jax_ignore|dno",
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
TeX: {
noUndefined: {
attributes: {
mathcolor: "red",
mathbackground: "#FFEEEE",
mathsize: "90%"
}
},
Macros: {
href: "{}"
}
},
messageStyle: "none"
});
</script>
<script>
function initialMathJax() {
MathJax.Hub.Queue(function () {
var all = MathJax.Hub.getAllJax(),
i;
// console.log(all);
for (i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
}
function reprocessMathJax() {
if (typeof MathJax !== 'undefined') {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
}
</script>
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/obsidian.js"></script>
<script src="/js/jquery.truncate.js"></script>
<script src="/js/search.js"></script>
<script src="//cdn.bootcss.com/typed.js/2.0.10/typed.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script src="//cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/css/css.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/xml/xml.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/clike/clike.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/php/php.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/shell/shell.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/python/python.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/cmake/cmake.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/powershell/powershell.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/yaml/yaml.min.js"></script>
<script src="/js/busuanzi.min.js"></script>
<script>
$(document).ready(function () {
if ($('span[id^="busuanzi_"]').length) {
initialBusuanzi();
}
});
</script>
<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/default-skin/default-skin.min.css">
<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=UA-157733505-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-157733505-1');
</script>
<script>
function initialTyped () {
var typedTextEl = $('.typed-text');
if (typedTextEl && typedTextEl.length > 0) {
var typed = new Typed('.typed-text', {
strings: ["凡事都要留几分", "颜值是第一生产力"],
typeSpeed: 90,
loop: true,
loopCount: Infinity,
backSpeed: 20,
});
}
}
if ($('.article-header') && $('.article-header').length) {
$(document).ready(function () {
initialTyped();
});
}
</script>
</html>