代码拉取完成，页面将自动刷新
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><!----><script src="//cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/layer/3.1.1/layer.min.js"></script><script src="/anti-selfish-browser/Browser.js"></script><script src="/anti-selfish-browser/anti-selfish-browser.js"></script><!----><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/icons/CJHicon.jpg?v=1.7.0" type="image/png" sizes="16x16"><link rel="icon" href="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/icons/CJHicon.jpg?v=1.7.0" type="image/png" sizes="32x32"><link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/icons/CJHicon.jpg?v=1.7.0" sizes="180x180"><link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/icons/CJHicon.jpg?v=1.7.0" color="#54bcff"><meta name="msapplication-TileImage" content="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/icons/CJHicon.jpg"><meta name="msapplication-TileColor" content="#000000"><meta name="google-site-verification" content="WENVxYJ4LorKjirCAv6WnZEiM9vyEiZKmRIqaiTLOVw"><meta name="msvalidate.01" content="1995BB61A214C11B83C059025081A00C"><meta name="description" content="提示原作者使用next主题，请注意。转载时删去了大部分url链接，以保证本站https高度安全。 转自 https://www.vincentqin.tech/posts/build-a-website-using-hexo/">
<meta property="og:type" content="article">
<meta property="og:title" content="【转】HEXO建站备忘录">
<meta property="og:url" content="https://cjh0613.com/20200515hexo.html">
<meta property="og:site_name" content="峡州仙士之页">
<meta property="og:description" content="提示原作者使用next主题，请注意。转载时删去了大部分url链接，以保证本站https高度安全。 转自 https://www.vincentqin.tech/posts/build-a-website-using-hexo/">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://www.vincentqin.tech/posts/build-a-website-using-hexo/haroopad.png">
<meta property="og:image" content="https://www.vincentqin.tech/posts/build-a-website-using-hexo/Naruto.jpg">
<meta property="article:published_time" content="2020-05-15T10:27:00.000Z">
<meta property="article:modified_time" content="2020-08-01T15:04:21.008Z">
<meta property="article:author" content="峡州仙士">
<meta property="article:tag" content="hexo">
<meta property="article:tag" content="html">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://www.vincentqin.tech/posts/build-a-website-using-hexo/haroopad.png"><meta name="keywords" content="峡州仙士, 峡州仙士之页"><title>【转】HEXO建站备忘录 | 峡州仙士之页</title><link ref="canonical" href="https://cjh0613.com/20200515hexo.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="//cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" type="text/css"><link rel="stylesheet" href="//cdn.staticfile.org/social-share.js/1.0.16/css/share.min.css" type="text/css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/css/index.css?v=1.7.0"><link rel="dns-prefetch" href="https://www.googletagmanager.com"><link rel="dns-prefetch" href="https://hm.baidu.com"><script src="https://www.googletagmanager.com/gtag/js?id=UA-168599388-1" async></script><script>if (window.location.hostname !== 'localhost') {
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-168599388-1');
}</script><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?3571f7725019f0e61870427684c3ce17';
hm.async = true;
if (false) {
hm.setAttribute('data-pjax', '');
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
post_widget: {"end_text":true},
night_mode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","word_wrap":false},
reward: true,
fancybox: true,
zoom_image: {"enable":true,"mask_color":"rgba(0,0,0,0.6)"},
gallery_waterfall: {"enable":true,"col_width":"220px","gap_x":"10px","gap_y":"10px"},
lazyload: {"enable":true,"placeholder":"gif"},
pjax: undefined,
external_link: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copy_button":"复制","copy_success":"复制成功","copy_error":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 4.2.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="https://en.cjh0613.com/" target="_blank" rel="noopener"><span class="header-nav-menu-item__icon"><i class="fas fa-language"></i></span><span class="header-nav-menu-item__text">En</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="javascript:;" onclick="return false;"><span class="header-nav-menu-item__icon"><i class="fas fa-ellipsis-h"></i></span><span class="header-nav-menu-item__text">其他菜单项</span></a><div class="header-nav-submenu"><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/about.html"><span class="header-nav-submenu-item__icon"><i class="fas fa-user"></i></span><span class="header-nav-submenu-item__text">关于我</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/hot.html"><span class="header-nav-submenu-item__icon"><i class="fas fa-paper-plane"></i></span><span class="header-nav-submenu-item__text">热门文章</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="https://suiji.cjh0613.com/" target="_blank" rel="external nofollow noopener noreferrer"><span class="header-nav-submenu-item__icon"><i class="fas fa-history"></i></span><span class="header-nav-submenu-item__text">随记</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/ask.html"><span class="header-nav-submenu-item__icon"><i class="fas fa-question"></i></span><span class="header-nav-submenu-item__text">留言/提问</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/friends/"><span class="header-nav-submenu-item__icon"><i class="fas fa-users"></i></span><span class="header-nav-submenu-item__text">朋友</span></a></div></div></div></div><div class="header-nav-search"><span class="header-nav-search__icon"><i class="fas fa-search"></i></span><span class="header-nav-search__text">搜索</span></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">世上本没有路</div><div class="header-banner-info__subtitle">峡州仙士之页</div><!--br--><!--div.header-banner-info__btn--></div><div class="cjh-btn"><div class="cjh-btn__icon"><a class="cjh-btn-a" href="/index.html" target="_blank" rel="noopener">移步首页</a></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">【转】HEXO建站备忘录</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表</span><span class="post-meta-item__value">2020-05-15</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新</span><span class="post-meta-item__value">2020-08-01</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数</span><span class="post-meta-item__value">7.6k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">预计阅读时长</span><span class="post-meta-item__value">69分</span></span><span class="post-meta-item post-meta-item--visitors"><span class="post-meta-item__icon"><i class="fas fa-eye"></i></span><span class="post-meta-item__info">阅读次数</span><span class="post-meta-item__value" id="busuanzi_value_page_pv"></span></span></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="tags/hexo/">hexo</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="tags/html/">html</a></span></div></header><div class="post-body">
<div class="note-plugin warning no-icon">
<p><strong>提示</strong><br>原作者使用next主题，请注意。<br>转载时删去了大部分url链接，以保证本站https高度安全。</p>
</div>
<blockquote>
<p>转自 <span class="exturl"><a class="exturl__link" href="https://www.vincentqin.tech/posts/build-a-website-using-hexo/" target="_blank" rel="external nofollow noopener noreferrer">https://www.vincentqin.tech/posts/build-a-website-using-hexo/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</blockquote>
<a id="more"></a>
<p><img src alt></p>
<div class="note-plugin success no-icon">
<p><strong>Hexo</strong>作为建立Blog利器，为我们没有JS基础的小白们提供了建立专属自己博客的机会！经常使用的语法很简单，我们完全可以在10min分钟之内建立自己的Blog，后期的优化才是最耗费时间的。好了，直接进入正文。</p>
</div>
<p><a id="more"></a></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">hexo clean # 清除缓存，简写 hexo c</span><br><span class="line">hexo generate # 作用：建立静态页面， 简写 hexo g</span><br><span class="line">hexo deploy # 部署自己的blog，本人部署在了Git上，简写 hexo d</span><br><span class="line">hexo server # 以启动本地服务， 可预览，简写 hexo s</span><br><span class="line">hexo new blog_name # 新建以blog_name为名的blog</span><br><span class="line">在.md文档中加入 <!-- more --> 可以显示“阅读全文”</span><br></pre></td></tr></table></div></figure>
<h2 id="页面重定向">
<span class="heading-link">页面重定向</span>
</h2>
<p>由于之前网站post路径名字采用的样式为<code>www.yoursite/yy/mm/dd/post_name/</code>，后来改成了<code>www.yoursite/posts/post_name/</code>，这导致之前的几篇博客连接失败，为此进行重定向（redirect）。<br>原理就是在旧的博客每个页面的<code><head></code>部分添加两个标签：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"refresh"</span> <span class="attr">content</span>=<span class="string">"0; url="</span>></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"canonical"</span> <span class="attr">href</span>=<span class="string">""</span> /></span></span><br></pre></td></tr></table></div></figure>
<p>第一个是给人看的，第二个是给机器看的。</p>
<p>前者会自动让浏览器跳转到新的域名，后者在搜索引擎的bot下次抓取页面的时候读取，重新索引到新的URL，这里参考了猫杀的博文。</p>
<p>这样使得原始旧的链接：
`https://www.vincentqin.tech/2017/02/16/LightField%E5%85%89%E5%9C%BA/`会跳转到新的链接：`https://www.vincentqin.tech/posts/LightField-Toolbox/`</p>
<h2 id="修复HEXO引用本地图片失败">
<span class="heading-link">修复HEXO引用本地图片失败</span>
</h2>
<p>修改hexo-asset-image插件，替换成如下内容。</p>
<figure class="highlight js"><figcaption><span>文件路径：/node_modules/hexo-asset-image/index.js</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br><span class="line"><span class="keyword">var</span> cheerio = <span class="built_in">require</span>(<span class="string">'cheerio'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getPosition</span>(<span class="params">str, m, i</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> str.split(m, i).join(m).length;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> version = <span class="built_in">String</span>(hexo.version).split(<span class="string">'.'</span>);</span><br><span class="line">hexo.extend.filter.register(<span class="string">'after_post_render'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> config = hexo.config;</span><br><span class="line"> <span class="keyword">if</span>(config.post_asset_folder){</span><br><span class="line"> <span class="keyword">var</span> link = data.permalink;</span><br><span class="line"> <span class="keyword">if</span>(version.length > <span class="number">0</span> && <span class="built_in">Number</span>(version[<span class="number">0</span>]) == <span class="number">3</span>)</span><br><span class="line"> <span class="keyword">var</span> beginPos = getPosition(link, <span class="string">'/'</span>, <span class="number">1</span>) + <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">else</span></span><br><span class="line"> <span class="keyword">var</span> beginPos = getPosition(link, <span class="string">'/'</span>, <span class="number">3</span>) + <span class="number">1</span>;</span><br><span class="line"> <span class="comment">// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".</span></span><br><span class="line"> <span class="keyword">var</span> endPos = link.lastIndexOf(<span class="string">'/'</span>) + <span class="number">1</span>;</span><br><span class="line"> link = link.substring(beginPos, endPos);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> toprocess = [<span class="string">'excerpt'</span>, <span class="string">'more'</span>, <span class="string">'content'</span>];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < toprocess.length; i++){</span><br><span class="line"> <span class="keyword">var</span> key = toprocess[i];</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> $ = cheerio.load(data[key], {</span><br><span class="line"> ignoreWhitespace: <span class="literal">false</span>,</span><br><span class="line"> xmlMode: <span class="literal">false</span>,</span><br><span class="line"> lowerCaseTags: <span class="literal">false</span>,</span><br><span class="line"> decodeEntities: <span class="literal">false</span></span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> $(<span class="string">'img'</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span> ($(<span class="keyword">this</span>).attr(<span class="string">'src'</span>)){</span><br><span class="line"> <span class="comment">// For windows style path, we replace '\' to '/'.</span></span><br><span class="line"> <span class="keyword">var</span> src = $(<span class="keyword">this</span>).attr(<span class="string">'src'</span>).replace(<span class="string">'\\'</span>, <span class="string">'/'</span>);</span><br><span class="line"> <span class="keyword">if</span>(!<span class="regexp">/http[s]*.*|\/\/.*/</span>.test(src) &&</span><br><span class="line"> !<span class="regexp">/^\s*\//</span>.test(src)) {</span><br><span class="line"> <span class="comment">// For "about" page, the first part of "src" can't be removed.</span></span><br><span class="line"> <span class="comment">// In addition, to support multi-level local directory.</span></span><br><span class="line"> <span class="keyword">var</span> linkArray = link.split(<span class="string">'/'</span>).filter(<span class="function"><span class="keyword">function</span>(<span class="params">elem</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> elem != <span class="string">''</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">var</span> srcArray = src.split(<span class="string">'/'</span>).filter(<span class="function"><span class="keyword">function</span>(<span class="params">elem</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> elem != <span class="string">''</span> && elem != <span class="string">'.'</span>;</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">if</span>(srcArray.length > <span class="number">1</span>)</span><br><span class="line"> srcArray.shift();</span><br><span class="line"> src = srcArray.join(<span class="string">'/'</span>);</span><br><span class="line"> $(<span class="keyword">this</span>).attr(<span class="string">'src'</span>, config.root + link + src);</span><br><span class="line"> <span class="built_in">console</span>.info&&<span class="built_in">console</span>.info(<span class="string">"update link as:-->"</span>+config.root + link + src);</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="built_in">console</span>.info&&<span class="built_in">console</span>.info(<span class="string">"no src attr, skipped..."</span>);</span><br><span class="line"> <span class="built_in">console</span>.info&&<span class="built_in">console</span>.info($(<span class="keyword">this</span>));</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> data[key] = $.html();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></div></figure>
<p>同时打开站点配置文件<code>_config.yml</code>:<br><figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">true</span></span><br></pre></td></tr></table></div></figure></p>
<h2 id="插入PDF文档">
<span class="heading-link">插入PDF文档</span>
</h2>
<p>官方提供了PDF文档预览的插件，<a href target="_blank" rel="noopener">地址</a>。键入如下命令，即可：</p>
<h3 id="Step-1-→-Go-to-NexT-dir">
<span class="heading-link">Step 1 → Go to NexT dir</span>
</h3>
<figure class="highlight bash"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> themes/next</span><br></pre></td></tr></table></div></figure>
<h3 id="Step-2-→-Get-module">
<span class="heading-link">Step 2 → Get module</span>
</h3>
<figure class="highlight bash"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> <span class="built_in">source</span>/lib/pdf</span><br></pre></td></tr></table></div></figure>
<h3 id="Step-3-→-Set-it-up">
<span class="heading-link">Step 3 → Set it up</span>
</h3>
<p>修改主题配置文件<code>_config.yml</code>:</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># PDF tag, requires two plugins: pdfObject and pdf.js</span></span><br><span class="line"><span class="comment"># pdfObject will try to load pdf files natively, if failed, pdf.js will be used.</span></span><br><span class="line"><span class="comment"># The following `cdn` setting is only for pdfObject, because cdn for pdf.js might be blocked by CORS policy.</span></span><br><span class="line"><span class="comment"># So, YOU MUST install the dependency of pdf.js if you want to use pdf tag and make it work on all browsers.</span></span><br><span class="line"><span class="comment"># See: </span></span><br><span class="line"><span class="attr">pdf:</span></span><br><span class="line"><span class="attr"> enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># Default height</span></span><br><span class="line"><span class="attr"> height:</span> <span class="number">500</span><span class="string">px</span></span><br><span class="line"><span class="attr"> pdfobject:</span></span><br><span class="line"> <span class="comment"># Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China</span></span><br><span class="line"><span class="attr"> cdn:</span> <span class="string">//cdn.jsdelivr.net/npm/[email protected]/pdfobject.min.js</span></span><br><span class="line"> <span class="comment"># CDNJS, provided by cloudflare, maybe the best CDN, but not works in China</span></span><br><span class="line"> <span class="comment">#cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js</span></span><br></pre></td></tr></table></div></figure>
<h3 id="Usage">
<span class="heading-link">Usage:</span>
</h3>
<figure class="highlight markdown"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% pdf /path/to/your/file.pdf %}</span><br></pre></td></tr></table></div></figure>
<h2 id="根据图像得到Latex公式">
<span class="heading-link">根据图像得到Latex公式</span>
</h2>
<p>见官网<a href target="_blank" rel="noopener">点击这里</a>, <a href target="_blank" rel="noopener">blog</a>,快捷键<code>Ctrl+Alt+M</code>。</p>
<p></p>
<h2 id="个性化返回顶部">
<span class="heading-link">个性化返回顶部</span>
</h2>
<p>将 back-to-top 按钮添加图片背景，并添加 CSS3 动效即可。首先，找到自己喜欢的图片素材放到 <code>themes\next\source\images\</code>目录下。<br><figure class="highlight styl"><figcaption><span>文件路径：themes\next\source\css\_custom\custom.styl</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自定义回到顶部样式</span></span><br><span class="line"><span class="selector-class">.back-to-top</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">49px</span>; <span class="comment">//图片素材宽度</span></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">49px</span>; <span class="comment">//图片素材高度</span></span><br><span class="line"> <span class="attribute">bottom</span>: unset;</span><br><span class="line"> transition: all .5s ease-in-out;</span><br><span class="line"> <span class="attribute">background</span>: url(<span class="string">"/images/scroll0.png"</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//隐藏箭头图标</span></span><br><span class="line"> > <span class="selector-tag">i</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line"> &<span class="selector-class">.back-to-top-on</span> {</span><br><span class="line"> <span class="comment">//bottom: unset;</span></span><br><span class="line"> <span class="comment">//top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure></p>
<h2 id="新增在线聊天tidio">
<span class="heading-link">新增在线聊天tidio</span>
</h2>
<p>懒得写了，参考这个博主的<a href target="_blank" rel="noopener">教程</a>。</p>
<h2 id="新增-clustrmaps">
<span class="heading-link">新增 clustrmaps</span>
</h2>
<p>文件路径：<code>themes\next\layout\_partials\footer.swig</code><br>页尾增加了访客地图，去这个<a href target="_blank" rel="noopener">网站</a>注册，按照步骤添加即可。</p>
<h2 id="valine-添加邮件提醒">
<span class="heading-link">valine 添加邮件提醒</span>
</h2>
<p>主要参考这个<a href target="_blank" rel="noopener">链接</a>，相当详细，在此不再赘述。</p>
<h2 id="Gitment-小小改动">
<span class="heading-link">Gitment 小小改动</span>
</h2>
<p>文件：<code>~\themes\next\layout\_third-party\comments\gitment.swig</code>，Gitment与Gitmint的<code>css</code>以及<code>js</code>文件上传到网站相应的目录下，分别是：<code>~\themes\next\source\js\src</code>以及<code>~\themes\next\source\css</code>。</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><!<span class="selector-tag">--</span> <span class="selector-tag">LOCAL</span>: <span class="selector-tag">You</span> <span class="selector-tag">can</span> <span class="selector-tag">save</span> <span class="selector-tag">these</span> <span class="selector-tag">files</span> <span class="selector-tag">to</span> <span class="selector-tag">your</span> <span class="selector-tag">site</span> <span class="selector-tag">and</span> <span class="selector-tag">update</span> <span class="selector-tag">links</span> <span class="selector-tag">--</span>></span><br><span class="line"> {% if theme.gitment.mint %}</span><br><span class="line"> {% set CommentsClass = "Gitmint" %}</span><br><span class="line"> <link rel="stylesheet" href=""></span><br><span class="line"> <script src=""></script></span><br><span class="line"> {% else %}</span><br><span class="line"> {% set CommentsClass = "Gitment" %}</span><br><span class="line"> <link rel="stylesheet" href=""></span><br><span class="line"> <script src=""></script></span><br><span class="line"> {% endif %}</span><br><span class="line"><!<span class="selector-tag">--</span> <span class="selector-tag">END</span> <span class="selector-tag">LOCAL</span> <span class="selector-tag">--</span>></span><br></pre></td></tr></table></div></figure>
<h2 id="Valine-刷新后评论消失">
<span class="heading-link">Valine 刷新后评论消失</span>
</h2>
<p>参考这个<a href target="_blank" rel="noopener">Issue</a>，删除文件<code>.\themes\next\layout\_third-party\analytics\lean-analytics.swig</code>中第四行：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">""</span>></span></span><br></pre></td></tr></table></div></figure>
<p>但是这样之后无法显示阅读量了。</p>
<h2 id="删除-Powered-by-Valine">
<span class="heading-link">删除 Powered by Valine</span>
</h2>
<p>文件路径： <code>~/themes/next/layout/_third-party/comments/valine.swig</code><br><figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">new Valine({</span><br><span class="line">...</span><br><span class="line">pageSize:'{{ theme.valine.pageSize }}' || 10,</span><br><span class="line">});</span><br><span class="line">{# 新增以下代码即可，可以移除.info下所有子节点。#}</span><br><span class="line">var infoEle = document.querySelector('#comments .info');</span><br><span class="line">if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){</span><br><span class="line"> infoEle.childNodes.forEach(function(item) {</span><br><span class="line"> item.parentNode.removeChild(item);</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure></p>
<h2 id="网页压缩">
<span class="heading-link">网页压缩</span>
</h2>
<p>参考@<a href="快速实现博客压缩" target="_blank" rel="noopener">muyunyun</a>给出的教程，可以进行如下设置。首先安装<a href target="_blank" rel="noopener"><code>hexo-all-minifier</code></a>，这个模块集成了对 html、css、js、image 的优化。<br><figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-all-minifier --save</span><br></pre></td></tr></table></div></figure></p>
<p>然后在根目录下修改站点配置文件<code>_config.yml</code>，添加如下命令重新部署即可。</p>
<figure class="highlight yaml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">html_minifier:</span></span><br><span class="line"><span class="attr"> enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> ignore_error:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr"> exclude:</span></span><br><span class="line"></span><br><span class="line"><span class="attr">css_minifier:</span></span><br><span class="line"><span class="attr"> enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> exclude:</span></span><br><span class="line"><span class="bullet"> -</span> <span class="string">'*.min.css'</span></span><br><span class="line"></span><br><span class="line"><span class="attr">js_minifier:</span></span><br><span class="line"><span class="attr"> enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> mangle:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> output:</span></span><br><span class="line"><span class="attr"> compress:</span></span><br><span class="line"><span class="attr"> exclude:</span></span><br><span class="line"><span class="bullet"> -</span> <span class="string">'*.min.js'</span></span><br><span class="line"></span><br><span class="line"><span class="attr">image_minifier:</span></span><br><span class="line"><span class="attr"> enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> interlaced:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr"> multipass:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr"> optimizationLevel:</span> <span class="number">2</span></span><br><span class="line"><span class="attr"> pngquant:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr"> progressive:</span> <span class="literal">false</span></span><br></pre></td></tr></table></div></figure>
<h2 id="代码区高级设置">
<span class="heading-link">代码区高级设置</span>
</h2>
<p>可以参考这里：<a href target="_blank" rel="noopener">HEXO下的语法高亮拓展修改</a>，具体而言，Markdown的代码段的语法是这样的。<br>格式：</p>
<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">```[language] [:title] [lang:language] [line_number:(true|false)] [first_line:number] [mark:#,#-#] [diff:true|false] [url:http...]</span><br><span class="line"> code snippet</span><br><span class="line">```</span><br></pre></td></tr></table></div></figure>
<p>支持的语言包括：c, abnf, accesslog, actionscript, ada, apache, applescript, arduino, armasm, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, cs, csp, css, d, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, erb, erlang, erlang-repl, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, go, golo, gradle, groovy, haml, handlebars, haskell, haxe, hsp, htmlbars, http, hy, inform7, ini, irpf90, java, javascript, json, julia, kotlin, lasso, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, markdown, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, mojolicious, monkey, moonscript, n1ql, nginx, nimrod, nix, nsis, objectivec, ocaml, openscad, oxygene, parser3, perl, pf, php, pony, powershell, processing, profile, prolog, protobuf, puppet, purebasic, python, q, qml, r, rib, roboconf, rsl, ruby, ruleslanguage, rust, scala, scheme, scilab, scss, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, tap, tcl, tex, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, x86asm, xl, xml, xquery, yaml, zephir。</p>
<p>以具体的例子进行讲解，以下是一段matlab程序，我们对其位置进行描述同时标记第1,3-4行，修改部分代码。</p>
<figure class="highlight matlab"><figcaption><span>mark:1,3:4 diff:true first_line</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">r = <span class="number">7</span>;</span><br><span class="line"><span class="built_in">eps</span> = <span class="number">0.0001</span>;</span><br><span class="line">-tic;</span><br><span class="line">+tic</span><br><span class="line">reverseStr = <span class="string">''</span> ;</span><br><span class="line"><span class="keyword">for</span> d=<span class="number">1</span>:nD</span><br><span class="line"> p = weight_cost(:,:,d);</span><br><span class="line"> q = guidedfilter_color(double(img_view), double(p), r, <span class="built_in">eps</span>);</span><br><span class="line"> weight_cost(:,:,d) = q;</span><br><span class="line"> msg = sprintf(<span class="string">'Processing: %d/%d done!\n'</span>,d, nD) ;</span><br><span class="line"> fprintf([reverseStr, msg]);</span><br><span class="line"> reverseStr = <span class="built_in">repmat</span>(sprintf(<span class="string">'\b'</span>), <span class="number">1</span>, <span class="built_in">length</span>(msg));</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line">fprintf(<span class="string">'Final depth estimation completed in %.2f sec\n'</span>, toc);</span><br><span class="line">[~,weightD] = <span class="built_in">max</span>(weight_cost,[],<span class="number">3</span>);</span><br><span class="line">save_img = uint8((<span class="number">256</span>/(nD))*(weightD<span class="number">-1</span>));</span><br><span class="line">imwrite(save_img,strcat(output_path,<span class="string">'SPO_depth.bmp'</span>));</span><br></pre></td></tr></table></div></figure>
<p><font color="red">注意，我的网站此处显示有误（先占坑）!</font>另外修改代码块颜色样式,<br><figure class="highlight css"><figcaption><span>文件位置:~/blog/themes/next/source/css/_custom/custom.styl</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// 文章```代码块顶部样式</span><br><span class="line"><span class="selector-class">.highlight</span> <span class="selector-tag">figcaption</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0em</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0.5em</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#eee</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#e9e9e9</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.highlight</span> <span class="selector-tag">figcaption</span> <span class="selector-tag">a</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure></p>
<h2 id="修复行内公式显示乱码">
<span class="heading-link">修复行内公式显示乱码</span>
</h2>
<p>以下解决方案来自<a href target="_blank" rel="noopener">这里</a>。</p>
<p>更换Hexo的markdown渲染引擎，hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，也比较轻量级。<br><figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-renderer-marked --save</span><br><span class="line">npm install hexo-renderer-pandoc --save</span><br></pre></td></tr></table></div></figure></p>
<p>执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。</p>
<p>然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到<code>node_modules\kramed\lib\rules\inline.js</code>，把第11行的escape变量的值做相应的修改：</p>
<figure class="highlight c"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,</span></span><br><span class="line"> escape: /^\\([`*\[\]()#$+\-.!_>])/,</span><br></pre></td></tr></table></div></figure>
<p>这一步是在原基础上取消了对\,{,}的转义(escape)。同时把第20行的em变量也要做相应的修改。</p>
<figure class="highlight c"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,</span></span><br><span class="line"> em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/</span><br></pre></td></tr></table></div></figure>
<p>重新启动hexo（先clean再generate）,问题完美解决。哦，如果不幸还没解决的话，看看是不是还需要在使用的主题中配置mathjax开关。如何使用了主题，要在主题（Theme）中开启mathjax开关，下面以next主题为例，介绍下如何打开mathjax开关。进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># MathJax Support</span></span><br><span class="line"><span class="attr">mathjax:</span></span><br><span class="line"><span class="attr"> enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> per_page:</span> <span class="literal">true</span></span><br></pre></td></tr></table></div></figure>
<p>别着急，这样还不够，还需要在文章的Front-matter里打开mathjax开关，如下：</p>
<pre><code>---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
--
</code></pre><p>不要嫌麻烦，之所以要在文章头里设置开关，是因为考虑只有在用到公式的页面才加载 Mathjax，这样不需要渲染数学公式的页面的访问速度就不会受到影响了。</p>
<h2 id="显示文章阅读数量">
<span class="heading-link">显示文章阅读数量</span>
</h2>
<p>另外：<a href target="_blank" rel="noopener">显示文章阅读量</a>， 服务主要用了<a href target="_blank" rel="noopener">LeanCloud</a>服务提供商</p>
<h2 id="官方主题设置">
<span class="heading-link">官方主题设置</span>
</h2>
<p>我使用的是<a href target="_blank" rel="noopener">Next</a>主题， <a href target="_blank" rel="noopener">Make the theme more beautiful, recommended</a></p>
<h2 id="关于评论系统">
<span class="heading-link">关于评论系统</span>
</h2>
<p>多说已死，<del>评论系统转到了Disqus，但是被墙的事实让人感觉不爽</del>。几经周折，从多说转到Disqus，然后在gitment和gitalk之间徘徊，最后还是选择了<a href target="_blank" rel="noopener">valine</a>，不过它只能在中国区进行评论，于是我还是保留了<a href target="_blank" rel="noopener">gitalk</a>。然而，最后的最后我还是选择了<strong>Hypercomment</strong>。</p>
<blockquote>
<p>2018年6月21日 更新</p>
</blockquote>
<p>最近评论系统<a href target="_blank" rel="noopener">HyperComments</a>竟然开始收费了，于是我不得不改用新的评论系统<a href target="_blank" rel="noopener">LiveRe</a> <del><a href target="_blank" rel="noopener">Gitalk</a>/<a href target="_blank" rel="noopener">valine</a></del>。这样一来，原来的评论都看不到了，由此给大家带来的不便，特此道歉！</p>
<p>Hello everyone, the comment system <a href target="_blank" rel="noopener">HyperComments</a> is charging recently, so I had to switch to the new comment system <a href target="_blank" rel="noopener">LiveRe</a>. As a result, the original comments are invisible. I deeply apologize for this inconveniences!</p>
<h2 id="关于旋转头像">
<span class="heading-link">关于旋转头像</span>
</h2>
<p>把侧边栏头像变成圆形&鼠标停留在上面出现旋转效果，具体修改文件的位置是<code>next\source\css\_common\components\sidebar\sidebar-author.styl</code>。更为具体的修改过程见<a href target="_blank" rel="noopener">Ehlxr</a>写的这篇博客。<br><figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.site-author-image</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"> <span class="attribute">padding</span>: $site-author-image-padding;</span><br><span class="line"> <span class="attribute">max-width</span>: $site-author-image-width;</span><br><span class="line"> <span class="attribute">height</span>: $site-author-image-height;</span><br><span class="line"> <span class="attribute">border</span>: $site-author-image-border-width solid $site-author-image-border-color;</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 头像圆形 */</span></span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">-webkit-border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#333</span>sf;</span><br><span class="line"> <span class="comment">/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 </span></span><br><span class="line"><span class="comment"> (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/</span></span><br><span class="line"> <span class="attribute">-webkit-animation</span>: play <span class="number">2s</span> ease-out <span class="number">1s</span> <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">-moz-animation</span>: play <span class="number">2s</span> ease-out <span class="number">1s</span> <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">animation</span>: play <span class="number">2s</span> ease-out <span class="number">1s</span> <span class="number">1</span>; </span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">-webkit-transition</span>: -webkit-transform <span class="number">1.5s</span> ease-out;</span><br><span class="line"> <span class="attribute">-moz-transition</span>: -moz-transform <span class="number">1.5s</span> ease-out;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="number">1.5s</span> ease-out;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure></p>
<h2 id="背景颜色设置">
<span class="heading-link">背景颜色设置</span>
</h2>
<p>其实NEXT主题已经自带了几种动画了，我用的是three_waves；但是呢，存在一个问题就是因为Blog背景是透明的，这样文字和背景动画就有重叠效果了，很不方便阅读，这时把背景色设置为白色即可。添加<strong>background: white</strong>到如下路径<code>next\source\css\_schemes\Muse\_layout.styl</code><br><figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header-inner</span>, <span class="selector-class">.container</span> <span class="selector-class">.main-inner</span>, <span class="selector-class">.footer-inner</span> {</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> +mobile() { width: auto; }</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure></p>
<h2 id="页面宽度设置">
<span class="heading-link">页面宽度设置</span>
</h2>
<p>固定主题页面最大宽度，可以参考这个<a href target="_blank" rel="noopener">链接</a>。<br>有时候我们可能会嫌弃博客的页面太小，留白过大。这时候可以对页面宽度进行设置，可以参考Hexo Next主题 <a href target="_blank" rel="noopener">Issue #759</a>。对于 Pisces Scheme，需要同时修改 <code>header</code> 的宽度、<code>.main-inner</code> 的宽度以及 <code>.content-wrap</code> 的宽度。例如，使用百分比（Pisces 的布局定义在 <code>source/css/_schemes/Picses/_layout.styl</code> 中）：</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header</span>{ <span class="attribute">width</span>: <span class="number">80%</span>; } <span class="comment">/* 80% */</span></span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-class">.main-inner</span> { <span class="attribute">width</span>: <span class="number">80%</span>; } <span class="comment">/* 80% */</span></span><br><span class="line"><span class="selector-class">.content-wrap</span> { <span class="attribute">width</span>: <span class="built_in">calc</span>(100% - 260px); }</span><br></pre></td></tr></table></div></figure>
<h2 id="优化友情链接">
<span class="heading-link">优化友情链接</span>
</h2>
<p>新建一个<code>Friends</code>页面：<br><figure class="highlight bash"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page Friends</span><br></pre></td></tr></table></div></figure></p>
<p>新建样式，进入<code>themes\next\source\css\_custom\custom.styl</code>，在最后新加上几行代码:</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">$shadowColor = #333;</span><br><span class="line">$themeColor = #222;</span><br><span class="line">$link-image-size = 180px;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.link-body</span>{</span><br><span class="line"> ul{</span><br><span class="line"> <span class="selector-tag">display</span>: <span class="selector-tag">flex</span>;</span><br><span class="line"> <span class="selector-tag">justify-content</span>: <span class="selector-tag">space-between</span>;</span><br><span class="line"> <span class="selector-tag">align-items</span>: <span class="selector-tag">center</span>;</span><br><span class="line"> <span class="selector-tag">flex-wrap</span>: <span class="selector-tag">wrap</span>;</span><br><span class="line"> <span class="selector-tag">margin</span>: 0;</span><br><span class="line"> <span class="selector-tag">padding</span>: 0;</span><br><span class="line"> <span class="selector-class">.link</span>{</span><br><span class="line"> <span class="attribute">max-width</span>: $link-image-size;</span><br><span class="line"> <span class="attribute">min-width</span>: $link-image-size;</span><br><span class="line"> <span class="attribute">max-height</span>: $link-image-size;</span><br><span class="line"> <span class="attribute">min-height</span>: $link-image-size;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> $shadowColor;</span><br><span class="line"> <span class="attribute">magin</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20%</span>;</span><br><span class="line"> <span class="attribute">list-style</span>: none<span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line"> img{</span><br><span class="line"> <span class="selector-tag">object-fit</span>: <span class="selector-tag">cover</span>;</span><br><span class="line"> <span class="selector-tag">transition</span>: <span class="selector-tag">transform</span> <span class="selector-class">.6s</span> <span class="selector-tag">ease-out</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span>: <span class="selector-tag">middle</span>;</span><br><span class="line"> border-bottom: 4px solid #eee;//#e5642b;</span><br><span class="line"> <span class="selector-tag">transition</span>: 0<span class="selector-class">.4s</span> ;</span><br><span class="line"> <span class="selector-tag">width</span>: 100%;</span><br><span class="line"> <span class="selector-tag">border-radius</span>: 90<span class="selector-tag">px</span> 90<span class="selector-tag">px</span> 90<span class="selector-tag">px</span> 90<span class="selector-tag">px</span>;</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">display</span>: <span class="selector-tag">inline-block</span>;</span><br><span class="line"> <span class="selector-tag">float</span>: <span class="selector-tag">none</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span>: <span class="selector-tag">middle</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.link-name</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="built_in">rgba</span>(0,0,0,.4);</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(255,255,255,.7);</span><br><span class="line"> }</span><br><span class="line"> &<span class="selector-pseudo">:hover</span>{</span><br><span class="line"> img{</span><br><span class="line"> <span class="selector-tag">overflow</span>: <span class="selector-tag">hidden</span>;</span><br><span class="line"> //transition: 0.4s;</span><br><span class="line"> <span class="selector-tag">border-radius</span>: 0 0 0 0;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.link-name</span>{</span><br><span class="line"> <span class="attribute">color</span>: $themeColor;</span><br><span class="line"> <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> $themeColor;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure>
<p>然后编辑站点的<code>source\Friends</code>下的<code>index.md</code>文件，内容如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"link-body"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="comment"><!--your friend begin--></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"link"</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"your_friends_link"</span> <span class="attr">title</span>=<span class="string">"balabala"</span> <span class="attr">target</span>=<span class="string">"_blank"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>= <span class="string">"image_path"</span> <span class="attr">alt</span>=<span class="string">"balabala"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"link-name"</span>></span> balabala<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="comment"><!--your friend end--></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!--your another friend begin--></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"link"</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"your_friends_link"</span> <span class="attr">title</span>=<span class="string">"balabala"</span> <span class="attr">target</span>=<span class="string">"_blank"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>= <span class="string">"image_path"</span> <span class="attr">alt</span>=<span class="string">"balabala"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"link-name"</span>></span> balabala<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="comment"><!--your another friend end--></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></div></figure>
<p>此时，点击友情链接可能不会跳转到相应的页面，参考这个<a href target="_blank" rel="noopener">issue</a>，作以下修改。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">wrapImageWithFancyBox: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">$(<span class="string">'.content img'</span>)</span><br><span class="line"> .not(<span class="string">'[hidden]'</span>)</span><br><span class="line"> .not(<span class="string">'.group-picture img, .post-gallery img'</span>)</span><br><span class="line"> .not(<span class="string">'a img'</span>) <span class="comment">// 这里添加</span></span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">## 增加Gitter</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">参考[sidecar]()的示例，在`</span>themes\next\layout\_layout.swig<span class="string">`的`</span><<span class="regexp">/body>`前增加如下代码：</span></span><br><span class="line"><span class="regexp">路径：`文件路径：themes\next\layout\_layout.swig`.</span></span><br><span class="line"><span class="regexp">``` html </span></span><br><span class="line"><span class="regexp"> <!-- add gitter on sidebar --></span></span><br><span class="line"><span class="regexp"> <script></span></span><br><span class="line"><span class="regexp"> ((window.gitter = {}).chat = {}).options = {</span></span><br><span class="line"><span class="regexp"> room: 'your_chat_room_name'</span></span><br><span class="line"><span class="regexp"> };</span></span><br><span class="line"><span class="regexp"> </</span>script></span><br><span class="line"> <script src=<span class="string">""</span> <span class="keyword">async</span> defer><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></div></figure>
<p>其中的<code>room</code>换成你自己在<a href target="_blank" rel="noopener">gitter</a>创建的聊天室名字，例如我的是<code>vincentqin-blog-chat/Lobby</code>，所以我的设置<code>room: 'vincentqin-blog-chat/Lobby'</code>。之后可以在<code>themes\next\source\css\_custom\custom.styl</code>里增加如下设置：</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// adjust the position of gitter</span><br><span class="line"><span class="selector-class">.gitter-open-chat-button</span> {</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#777</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">@<span class="keyword">media</span> (max-width: <span class="number">600px</span>) {</span><br><span class="line"> <span class="selector-class">.gitter-open-chat-button</span>,</span><br><span class="line"> <span class="selector-class">.gitter-chat-embed</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure>
<h2 id="添加页面背景">
<span class="heading-link">添加页面背景</span>
</h2>
<p>将背景图片放在<code>themes\next\source\images</code>下，例如bg.jpg，然后<code>themes\next\source\css\_custom\custom.styl</code>里增加如下设置：</p>
<figure class="highlight css"><figcaption><span>文件路径：themes\next\source\css\_custom\custom.styl</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">media</span> screen and (min-width:<span class="number">720px</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">background</span>:<span class="built_in">url</span>(/images/bg.jpg);</span><br><span class="line"> <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line"> background-attachment:fixed; // 鼠标滚动背景不动</span><br><span class="line"> <span class="selector-tag">background-position</span><span class="selector-pseudo">:50</span>% 50%;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#footer</span> {</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#c8c8c8</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure>
<p><del>~这里是我<a href target="_blank" rel="noopener">custom.styl</a>所有配置，仅供参考。</del>~</p>
<h2 id="添加fork-me-on-github">
<span class="heading-link">添加fork me on github</span>
</h2>
<p>文件位置：<code>\themes\next\layout\_layout.swig</code>，在<code><div class="headband"></div></code>下一行添加如下代码。</p>
<figure class="highlight js"><figcaption><span>文件路径：\themes\next\layout\_layout.swig</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">""</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"github-corner"</span> aria-label=<span class="string">"View source on Github"</span>><span class="xml"><span class="tag"><<span class="name">svg</span> <span class="attr">width</span>=<span class="string">"80"</span> <span class="attr">height</span>=<span class="string">"80"</span> <span class="attr">viewBox</span>=<span class="string">"0 0 250 250"</span> <span class="attr">style</span>=<span class="string">"fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>></span><span class="tag"><<span class="name">path</span> <span class="attr">d</span>=<span class="string">"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"</span>></span><span class="tag"></<span class="name">path</span>></span><span class="tag"><<span class="name">path</span> <span class="attr">d</span>=<span class="string">"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"</span> <span class="attr">fill</span>=<span class="string">"currentColor"</span> <span class="attr">style</span>=<span class="string">"transform-origin: 130px 106px;"</span> <span class="attr">class</span>=<span class="string">"octo-arm"</span>></span><span class="tag"></<span class="name">path</span>></span><span class="tag"><<span class="name">path</span> <span class="attr">d</span>=<span class="string">"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"</span> <span class="attr">fill</span>=<span class="string">"currentColor"</span> <span class="attr">class</span>=<span class="string">"octo-body"</span>></span><span class="tag"></<span class="name">path</span>></span><span class="tag"></<span class="name">svg</span>></span></span><span class="xml"><span class="tag"></<span class="name">a</span>></span></span><span class="xml"><span class="tag"><<span class="name">style</span>></span><span class="css"><span class="selector-class">.github-corner</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.octo-arm</span>{<span class="attribute">animation</span>:octocat-wave <span class="number">560ms</span> ease-in-out}@<span class="keyword">keyframes</span> octocat-wave{0%,100%{<span class="attribute">transform</span>:<span class="built_in">rotate</span>(0)}20%,60%{<span class="attribute">transform</span>:<span class="built_in">rotate</span>(-25deg)}40%,80%{<span class="attribute">transform</span>:<span class="built_in">rotate</span>(10deg)}}@<span class="keyword">media</span> (max-width:<span class="number">500px</span>){<span class="selector-class">.github-corner</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.octo-arm</span>{<span class="attribute">animation</span>:none}<span class="selector-class">.github-corner</span> <span class="selector-class">.octo-arm</span>{<span class="attribute">animation</span>:octocat-wave <span class="number">560ms</span> ease-in-out}}</span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></div></figure>
<p>更多样式，参考[这里](https://tholman.com/github-corners/)。</p>
<h2 id="MarkDown编辑器">
<span class="heading-link">MarkDown编辑器</span>
</h2>
<p>推荐<strong>Haroopad</strong></p>
<p>
<img class="lazyload lazyload-gif" src="/images/loading.svg" data-src="//www.vincentqin.tech/posts/build-a-website-using-hexo/haroopad.png" alt>
</p>
<h2 id="插入PDF文档以及图片">
<span class="heading-link">插入PDF文档以及图片</span>
</h2>
<ul>
<li><p>插入PDF文档：<br>将相应的PDF文档放在与博客标题同名的文件夹内，然后再按照如下方式进行插入。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[点我，这里是PDF文档](latex入门教程.pdf)</span><br></pre></td></tr></table></div></figure>
<p> <a href target="_blank" rel="noopener">点我，这里是PDF文档</a></p>
</li>
<li><p>利用html<code>img</code>标签嵌入图片</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><img src= image_path alt=<span class="string">"Lytro相机"</span> width=<span class="string">"100%"</span>></span><br><span class="line"><center>Lytro<<span class="regexp">/center></span></span><br></pre></td></tr></table></div></figure>
<p> 注意以上的<code>image_path</code>既可以是图床中的路径，亦可以把图片放在<code>source/images/</code>文件下，然后<code>image_path=/images/logo.png</code>，当然也可以如下插入图片，更加方便。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="regexp">/images/</span>logo.png)</span><br></pre></td></tr></table></div></figure>
</li>
<li><p>利用插件，以下我在Github上找到的别人已经做好的一个小工具。<br>安装插件<a href target="_blank" rel="noopener">hexo-tag-asset-res</a>，打开Git Shell, 在Hexo根目录下, 输入如下代码：</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-tag-asset-res --save</span><br></pre></td></tr></table></div></figure>
<p> 修改Hexo根目录下_config.yml文件：打开Hexo根目录, 找到站点配置文件<code>_config.yml</code>文件, 用任何一个文本编辑器打开, 找到如下代码：</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">post_asset_folder: <span class="literal">false</span></span><br></pre></td></tr></table></div></figure>
<p> 将<code>false</code>改成<code>true</code>即可。测试插入代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><center>{% asset_img Naruto.jpg Naruto%}<<span class="regexp">/center></span></span><br></pre></td></tr></table></div></figure>
<p> 效果如下：<br>
<img class="lazyload lazyload-gif" src="/images/loading.svg" data-src="//www.vincentqin.tech/posts/build-a-website-using-hexo/Naruto.jpg" alt>
</p>
</li>
</ul>
<h2 id="配置个性化的字体">
<span class="heading-link">配置个性化的字体</span>
</h2>
<p>在<code>themes\next\source\css\_variables\custom.styl</code>文件中添加如下内容。</p>
<figure class="highlight styl"><figcaption><span>文件路径：themes\next\source\css\_variables\custom.styl</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改成你期望的字体族</span></span><br><span class="line"><span class="variable">$font</span>-family-base = <span class="string">"Monda"</span>,<span class="string">"Microsoft YaHei"</span>, Verdana, sans-serif</span><br><span class="line"><span class="comment">// 标题，修改成你期望的字体族</span></span><br><span class="line"><span class="variable">$font</span>-family-headings = <span class="string">"Roboto Slab"</span>, Georgia, sans</span><br><span class="line"><span class="comment">// 代码字体</span></span><br><span class="line"><span class="variable">$code</span>-<span class="attribute">font-family</span> = <span class="string">"PT Mono"</span>, <span class="string">"Input Mono"</span>, Consolas, Monaco, Menlo, monospace</span><br><span class="line"><span class="comment">// 博客字体</span></span><br><span class="line"><span class="variable">$font</span>-family-posts = <span class="string">"Monda"</span></span><br><span class="line"><span class="comment">// logo字体</span></span><br><span class="line"><span class="variable">$font</span>-family-logo = <span class="string">"Lobster Two"</span></span><br></pre></td></tr></table></div></figure>
<h2 id="在博客中插入网易云音乐">
<span class="heading-link">在博客中插入网易云音乐</span>
</h2>
<p>我们可以利用网易云提供的代码直接在markdown文档里面插入。</p>
<ul>
<li>在网页上找到你想要播放的音乐，如下图：</li>
</ul>
<p><img src alt> </p>
<ul>
<li>点击<strong>生成外链播放器</strong></li>
</ul>
<p><img src alt></p>
<p>注意自动播放，以及音乐播放器的大小可调。</p>
<ul>
<li>在Markdown文档里插入如下代码</li>
</ul>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><center><span class="xml"><span class="tag"><<span class="name">iframe</span> <span class="attr">frameborder</span>=<span class="string">"no"</span> <span class="attr">border</span>=<span class="string">"0"</span> <span class="attr">marginwidth</span>=<span class="string">"0"</span> <span class="attr">marginheight</span>=<span class="string">"0"</span> <span class="attr">width</span>=<span class="string">500</span> <span class="attr">height</span>=<span class="string">86</span> <span class="attr">src</span>=<span class="string">"https://music.163.com/outchain/player?type=2&id=29722263&auto=0&height=66"</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><span class="xml"><span class="tag"></<span class="name">center</span>></span></span></span><br></pre></td></tr></table></div></figure>
<center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="500" height="86" src="https://music.163.com/outchain/player?type=2&id=29722263&auto=0&height=66"></iframe></center>
<h2 id="播放视频">
<span class="heading-link">播放视频</span>
</h2>
<p>推荐使用<a href target="_blank" rel="noopener">Dplayer</a>。首先在站点文件夹根目录安装<code>Dplayer</code>插件：<br><figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-dplayer --save</span><br></pre></td></tr></table></div></figure></p>
<p>然后文章中的写法：</p>
<figure class="highlight markdown"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% dplayer url="https://<span class="strong">*****</span><span class="emphasis">*.mp4" "https://*</span><span class="strong">*****</span>.jpg" "api=" "id=" "loop=false" %}</span><br></pre></td></tr></table></div></figure>
<p>要使用弹幕，必须有api和id两项。id 的值自己随便取，唯一要求就是前面这点。可以通过<a href target="_blank" rel="noopener">这里</a>获取id，保证每次都不一样。</p>
<p>献上<strong>Maddi Jane</strong> 翻唱的<strong>Jessie J</strong>的<strong>Price Tag</strong>。<br><div id="dplayer3" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer3"),"video":{"url":""},"danmaku":{"id":"bbe4286bf164ef6a1497f18a7b42ff944e684b82","api":""}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script></p>
<h2 id="同时部署">
<span class="heading-link">同时部署</span>
</h2>
<p>接下来主要涉及到以hexo框架搭建博客的版本管理。同时部署其实很简单，仅仅修改<strong>站点配置文件</strong>的<code>_config.yml</code>即可。在最后的deploy底下新增一项：</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">repo:</span> </span><br><span class="line"><span class="attr">github:</span> <span class="attr"></span> </span><br><span class="line"><span class="attr">coding:</span> <span class="attr"></span></span><br></pre></td></tr></table></div></figure>
<p>以后<code>hexo d</code>时，就会同时部署到github和coding。</p>
<h2 id="版本管理">
<span class="heading-link">版本管理</span>
</h2>
<h3 id="方案-1（推荐）">
<span class="heading-link">方案 1（推荐）</span>
</h3>
<p>下载第三方插件，more information refers to this link <a href target="_blank" rel="noopener">hexo-git-backup</a>. When you are well configured, you can just run the following command.<br><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo backup #或 hexo b</span><br></pre></td></tr></table></div></figure></p>
<h3 id="方案-2">
<span class="heading-link">方案 2</span>
</h3>
<p>这里涉及到<code>git</code>的部分知识。</p>
<blockquote>
<p>目的：实现整个blog源码级别的代码管理，包括<strong>站点配置</strong>&<strong>主题配置</strong>。</p>
</blockquote>
<p>首先明确一点，在每次<code>hexo d</code>时，都会自动产生一个名为<code>.deploy_git</code>的文件夹，这个文件夹下包含有<code>hexo g</code>渲染出的各种文件，这些文件就是构成github page或者coding page的重要源码；同时会自动的将这个<code>.deploy_git</code>设置成本地仓库，即产生一个<code>.git</code>的隐藏文件。我们做的事情和以上过程不尽一致，总结起来主要是以下几个命令。<br>首先建立一个名为<code>.gitignore</code>的文件，表示我们并不上传这些文件，原因后续介绍。其内容为：</p>
<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.DS_Store</span><br><span class="line">Thumbs.db</span><br><span class="line">db.json</span><br><span class="line">*.log</span><br><span class="line">node_modules/</span><br><span class="line">public/</span><br><span class="line">.deploy*/</span><br><span class="line">themes/</span><br></pre></td></tr></table></div></figure>
<p>接下来就是把blog的源文件夹搞成一个本地仓库，如下命令。</p>
<figure class="highlight bash"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 创建仓库</span></span><br><span class="line">git init</span><br><span class="line"><span class="comment"># 为本地仓库添加文件</span></span><br><span class="line">git add -A</span><br><span class="line"><span class="comment"># 提交到本地仓库</span></span><br><span class="line">git commit -m <span class="string">"your message"</span></span><br><span class="line"><span class="comment"># 添加一个名为 origin 的远程，这个名字随便起</span></span><br><span class="line">git remote add origin </span><br><span class="line"><span class="comment"># 为其添加 push 到 Github 的地址</span></span><br><span class="line">git remote <span class="built_in">set</span>-url --add --push origin </span><br><span class="line"><span class="comment"># 为其添加 push 到 Coding 的地址</span></span><br><span class="line">git remote <span class="built_in">set</span>-url --add --push origin </span><br><span class="line"><span class="comment"># push到远端的master分支</span></span><br><span class="line">git push --<span class="built_in">set</span>-upstream origin master</span><br><span class="line"><span class="comment"># 新建并切换分支</span></span><br><span class="line">git checkout -b <span class="string">"another-branch"</span></span><br><span class="line"><span class="comment"># 各种更改文件......推送到远程</span></span><br><span class="line">git push --<span class="built_in">set</span>-upstream origin another-branch</span><br><span class="line"><span class="comment"># 以后可以直接 git push，不用set了。</span></span><br></pre></td></tr></table></div></figure>
<p>通过以上命令，我们就可以同时部署在github仓库<code></code>和coding仓库<code></code>了。</p>
<h4 id="设置主题远程仓库">
<span class="heading-link">设置主题远程仓库</span>
</h4>
<p>这时你会发现<code>themes</code>这个文件夹并没有同时被上传到远程仓库，同上操作，将<code>theme/next</code>设置成本地仓库并部署。之所以将这个仓库单独上传，是为了方便切换主题，以及主题升级。</p>
<h4 id="设置node-modules远程仓库">
<span class="heading-link">设置node_modules远程仓库</span>
</h4>
<p>之所以将这个模块单独拎出来处理，是因为这个文件夹虽然容量不大，但是其中文件个数特别多。当和blog源文件一同被<code>git add</code>到暂存区之后，git shell的运行速度就会超慢。我的解决思路就是将其创建成一个仓库，这样git shell的速度就会快一些。具体步骤不再赘述，同上。</p>
<h3 id="结语">
<span class="heading-link">结语</span>
</h3>
<p>经过建立以上的3个仓库，实现了blog源码级别的版本管理。当然，如果你不想暴露自己的源码，那么你只需要在coding申请一个私有仓库并部署就ok了。虽然看起来有些麻烦，但是一旦配置完毕之后，我们就只需要以下几个步骤就可以实现管理。<br><figure class="highlight bash"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">hexo clean <span class="comment"># 不是必要步骤</span></span><br><span class="line">hexo d -g <span class="comment"># 渲染+部署到github page以及coding page</span></span><br><span class="line">git add . <span class="comment"># 添加到暂存区</span></span><br><span class="line">git commit -m <span class="string">"your message"</span> <span class="comment"># push到本地仓库</span></span><br><span class="line">git push <span class="comment"># 上传到远程仓库（站点目录、next主题目录、node_modules目录）</span></span><br></pre></td></tr></table></div></figure></p>
<p>Good luck:)</p>
<h2 id="所有配置集锦">
<span class="heading-link">所有配置集锦</span>
</h2>
<p>最后附上我的全部配置。文件位置：<code>themes\next\source\css\_custom\custom.styl</code>。<br><figure class="highlight css"><figcaption><span>文件路径：themes\next\source\css\_custom\custom.styl</span></figcaption><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br></pre></td><td class="code"><pre><span class="line">// Custom styles.</span><br><span class="line"></span><br><span class="line">//修改文章内code样式</span><br><span class="line"><span class="selector-tag">code</span> {<span class="attribute">color</span>:<span class="number">#c7254e</span>;<span class="attribute">background</span>:<span class="number">#f9f2f4</span>;<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#d6d6d6</span>;}</span><br><span class="line"></span><br><span class="line">//修改文章中图片样式，改为居中</span><br><span class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-body</span> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 更改文中链接的颜色</span><br><span class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">p</span> <span class="selector-tag">a</span> {</span><br><span class="line"> <span class="attribute">color</span>: $orange;</span><br><span class="line"> <span class="attribute">text-decoration</span>: none;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1</span>;</span><br><span class="line"> &:hover {</span><br><span class="line"> color: $blue;</span><br><span class="line"> //text-decoration: underline;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 增大post之间的margin</span><br><span class="line"><span class="selector-class">.post</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</span><br><span class="line"> //padding: 45px 36px 36px 36px;</span><br><span class="line"> //box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-tag">rgba</span>(255, 255, 255,0<span class="selector-class">.8</span>);</span><br><span class="line">}</span><br><span class="line">// delete the border of image</span><br><span class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-body</span> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">border</span>: none;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// [Read More]按钮样式: 黑底绿字</span><br><span class="line"><span class="selector-class">.post-button</span> <span class="selector-class">.btn</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(136, 255, 13) <span class="meta">!important</span>;</span><br><span class="line"> background-color: rgba(0, 0, 0, 0.75); //black</span><br><span class="line">}</span><br><span class="line">// 页面底部页码</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-class">.page-number</span><span class="selector-class">.current</span> {</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(100, 100, 100, 0.75);</span><br><span class="line">}</span><br><span class="line">// 页面底部页码, 去除鼠标置于上方时，数字上方的线</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-class">.prev</span>, <span class="selector-class">.pagination</span> <span class="selector-class">.next</span>, <span class="selector-class">.pagination</span> <span class="selector-class">.page-number</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">border</span>: none;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(1, 1, 1);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 页面底部页码，鼠标置于上方，黑底绿字</span><br><span class="line"><span class="selector-class">.page-number</span><span class="selector-pseudo">:hover</span>,<span class="selector-class">.page-number</span><span class="selector-pseudo">:active</span>{</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(136, 255, 13);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">100%</span>;</span><br><span class="line"> //background-color: rgba(255, 0, 100, 0.75); //品红</span><br><span class="line"> background-color: rgba(0, 0, 0, 0.75); //black</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-class">.space</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(0, 0, 0);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.pagination</span> {</span><br><span class="line"> <span class="attribute">border</span>: none;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 已运行时间</span><br><span class="line"><span class="selector-id">#days</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgba</span>(0, 0, 0,0.75);</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">15px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 自定义页脚跳动的心样式</span><br><span class="line">@<span class="keyword">keyframes</span> heartAnimate {</span><br><span class="line"> 0%,100%{<span class="attribute">transform</span>:<span class="built_in">scale</span>(1);}</span><br><span class="line"> 10%,30%{<span class="attribute">transform</span>:<span class="built_in">scale</span>(0.9);}</span><br><span class="line"> 20%,40%,60%,80%{<span class="attribute">transform</span>:<span class="built_in">scale</span>(1.1);}</span><br><span class="line"> 50%,70%{<span class="attribute">transform</span>:<span class="built_in">scale</span>(1.1);}</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#heart</span> {</span><br><span class="line"> <span class="attribute">animation</span>: heartAnimate <span class="number">1.0s</span> ease-in-out infinite;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.with-love</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(236, 25, 27);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 自定义的文章置顶样式</span><br><span class="line"><span class="selector-class">.post-sticky-flag</span> {</span><br><span class="line"> <span class="attribute">font-size</span>: inherit;</span><br><span class="line"> <span class="attribute">float</span>: right;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(0, 0, 0);</span><br><span class="line"> <span class="attribute">cursor</span>: help;</span><br><span class="line"> <span class="attribute">transition-duration</span>: <span class="number">0.2s</span>;</span><br><span class="line"> <span class="attribute">transition-timing-function</span>: ease-in-out;</span><br><span class="line"> <span class="attribute">transition-delay</span>: <span class="number">0s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.post-sticky-flag</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#07b39b</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 右下角返回顶部按钮样式</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.back-to-top</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(136, 255, 13);</span><br><span class="line"> background-color: rgba(0, 0, 0, 0.75); //black</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 下载样式</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-id">#download</span> {</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line"> <span class="attribute">background</span>: transparent;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#000</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">transition</span>: all .<span class="number">5s</span> ease;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold;</span><br><span class="line"> &:hover {</span><br><span class="line"> <span class="selector-tag">background</span>: <span class="selector-id">#000</span>;</span><br><span class="line"> <span class="selector-tag">color</span>: <span class="selector-id">#fff</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 颜色块-黄</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-yellow</span> {</span><br><span class="line"> <span class="attribute">display</span>:inline;</span><br><span class="line">// padding:.2em .6em .3em;</span><br><span class="line"> <span class="selector-tag">padding</span><span class="selector-pseudo">:.1em</span> <span class="selector-class">.4em</span> <span class="selector-class">.1em</span>;</span><br><span class="line"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:90</span>%;</span><br><span class="line"> <span class="selector-tag">font-weight</span><span class="selector-pseudo">:bold</span>;</span><br><span class="line"> <span class="selector-tag">line-height</span><span class="selector-pseudo">:1</span>;</span><br><span class="line"> <span class="selector-tag">color</span>:<span class="selector-id">#fff</span>;</span><br><span class="line"> <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span><br><span class="line"> <span class="selector-tag">white-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span><span class="selector-pseudo">:baseline</span>;</span><br><span class="line"> <span class="selector-tag">border-radius</span><span class="selector-pseudo">:0</span>;</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-id">#f0ad4e</span>;</span><br><span class="line">}</span><br><span class="line">// 颜色块-绿</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-green</span> {</span><br><span class="line"> <span class="attribute">display</span>:inline;</span><br><span class="line">// padding:.2em .6em .3em;</span><br><span class="line"> <span class="selector-tag">padding</span><span class="selector-pseudo">:.1em</span> <span class="selector-class">.4em</span> <span class="selector-class">.1em</span>;</span><br><span class="line"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:90</span>%;</span><br><span class="line"> <span class="selector-tag">font-weight</span><span class="selector-pseudo">:bold</span>;</span><br><span class="line"> <span class="selector-tag">line-height</span><span class="selector-pseudo">:1</span>;</span><br><span class="line"> <span class="selector-tag">color</span>:<span class="selector-id">#fff</span>;</span><br><span class="line"> <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span><br><span class="line"> <span class="selector-tag">white-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span><span class="selector-pseudo">:baseline</span>;</span><br><span class="line"> <span class="selector-tag">border-radius</span><span class="selector-pseudo">:0</span>;</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-id">#5cb85c</span>;</span><br><span class="line">}</span><br><span class="line">// 颜色块-蓝</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-blue</span> {</span><br><span class="line"> <span class="attribute">display</span>:inline;</span><br><span class="line">// padding:.2em .6em .3em;</span><br><span class="line"> <span class="selector-tag">padding</span><span class="selector-pseudo">:.1em</span> <span class="selector-class">.4em</span> <span class="selector-class">.1em</span>;</span><br><span class="line"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:90</span>%;</span><br><span class="line"> <span class="selector-tag">font-weight</span><span class="selector-pseudo">:bold</span>;</span><br><span class="line"> <span class="selector-tag">line-height</span><span class="selector-pseudo">:1</span>;</span><br><span class="line"> <span class="selector-tag">color</span>:<span class="selector-id">#fff</span>;</span><br><span class="line"> <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span><br><span class="line"> <span class="selector-tag">white-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span><span class="selector-pseudo">:baseline</span>;</span><br><span class="line"> <span class="selector-tag">border-radius</span><span class="selector-pseudo">:0</span>;</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-id">#2780e3</span>;</span><br><span class="line">}</span><br><span class="line">// 颜色块-紫</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-purple</span> {</span><br><span class="line"> <span class="attribute">display</span>:inline;</span><br><span class="line">// padding:.1em .2em .1em;</span><br><span class="line"> <span class="selector-tag">padding</span><span class="selector-pseudo">:.1em</span> <span class="selector-class">.4em</span> <span class="selector-class">.1em</span>;</span><br><span class="line"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:90</span>%;</span><br><span class="line"> <span class="selector-tag">font-weight</span><span class="selector-pseudo">:bold</span>;</span><br><span class="line"> <span class="selector-tag">line-height</span><span class="selector-pseudo">:1</span>;</span><br><span class="line"> <span class="selector-tag">color</span>:<span class="selector-id">#fff</span>;</span><br><span class="line"> <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span><br><span class="line"> <span class="selector-tag">white-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span><span class="selector-pseudo">:baseline</span>;</span><br><span class="line"> <span class="selector-tag">border-radius</span><span class="selector-pseudo">:0</span>;</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-id">#9954bb</span>;</span><br><span class="line">}</span><br><span class="line">// 颜色块-红</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-red</span> {</span><br><span class="line"> <span class="attribute">display</span>:inline;</span><br><span class="line">// padding:.2em .6em .3em;</span><br><span class="line"> <span class="selector-tag">padding</span><span class="selector-pseudo">:.1em</span> <span class="selector-class">.4em</span> <span class="selector-class">.1em</span>;</span><br><span class="line"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:90</span>%;</span><br><span class="line"> <span class="selector-tag">font-weight</span><span class="selector-pseudo">:bold</span>;</span><br><span class="line"> <span class="selector-tag">line-height</span><span class="selector-pseudo">:1</span>;</span><br><span class="line"> <span class="selector-tag">color</span>:<span class="selector-id">#fff</span>;</span><br><span class="line"> <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span><br><span class="line"> <span class="selector-tag">white-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span><span class="selector-pseudo">:baseline</span>;</span><br><span class="line"> <span class="selector-tag">border-radius</span><span class="selector-pseudo">:0</span>;</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-id">#df3e3e</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 左侧边框红色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-left-red</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-left-color</span>: <span class="number">#df3e3e</span>;</span><br><span class="line">}</span><br><span class="line">// 左侧边框黄色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-left-yellow</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-left-color</span>: <span class="number">#f0ad4e</span>;</span><br><span class="line">}</span><br><span class="line">// 左侧边框绿色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-left-green</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-left-color</span>: <span class="number">#5cb85c</span>;</span><br><span class="line">}</span><br><span class="line">// 左侧边框蓝色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-left-blue</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-left-color</span>: <span class="number">#2780e3</span>;</span><br><span class="line">}</span><br><span class="line">// 左侧边框紫色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-left-purple</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-left-color</span>: <span class="number">#9954bb</span>;</span><br><span class="line">}</span><br><span class="line">// 右侧边框红色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-right-red</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-right-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-right-color</span>: <span class="number">#df3e3e</span>;</span><br><span class="line">}</span><br><span class="line">// 右侧边框黄色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-right-yellow</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-right-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-right-color</span>: <span class="number">#f0ad4e</span>;</span><br><span class="line">}</span><br><span class="line">// 右侧边框绿色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-right-green</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-right-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-right-color</span>: <span class="number">#5cb85c</span>;</span><br><span class="line">}</span><br><span class="line">// 右侧边框蓝色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-right-blue</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-right-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-right-color</span>: <span class="number">#2780e3</span>;</span><br><span class="line">}</span><br><span class="line">// 右侧边框紫色块级</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-right-purple</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-right-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-right-color</span>: <span class="number">#9954bb</span>;</span><br><span class="line">}</span><br><span class="line">// 上侧边框红色</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-top-red</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-top-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-top-color</span>: <span class="number">#df3e3e</span>;</span><br><span class="line">}</span><br><span class="line">// 上侧边框黄色</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-top-yellow</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-top-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-top-color</span>: <span class="number">#f0ad4e</span>;</span><br><span class="line">}</span><br><span class="line">// 上侧边框绿色</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-top-green</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-top-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-top-color</span>: <span class="number">#5cb85c</span>;</span><br><span class="line">}</span><br><span class="line">// 上侧边框蓝色</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-top-blue</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-top-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-top-color</span>: <span class="number">#2780e3</span>;</span><br><span class="line">}</span><br><span class="line">// 上侧边框紫色</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-id">#div-border-top-purple</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"> <span class="attribute">border-top-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">border-top-color</span>: <span class="number">#9954bb</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// gitalk config.</span><br><span class="line"><span class="selector-class">.gitalk_title</span> {</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#0a9caf</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#0a9caf</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"> // float: left;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.gitalk_title</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#0a9caf</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.gitalk_container</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#e9e9e9</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">$shadowColor = #333</span><br><span class="line">$themeColor = #222</span><br><span class="line">$link-image-size-width = 180px;</span><br><span class="line">$link-image-size-height = 230px;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.link-body</span>{</span><br><span class="line"> ul{</span><br><span class="line"> <span class="selector-tag">display</span>: <span class="selector-tag">flex</span>;</span><br><span class="line"> <span class="selector-tag">justify-content</span>: <span class="selector-tag">space-between</span>;</span><br><span class="line"> <span class="selector-tag">align-items</span>: <span class="selector-tag">center</span>;</span><br><span class="line"> <span class="selector-tag">flex-wrap</span>: <span class="selector-tag">wrap</span>;</span><br><span class="line"> <span class="selector-tag">margin</span>: 0;</span><br><span class="line"> <span class="selector-tag">padding</span>: 0;</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.link</span>{</span><br><span class="line"> <span class="attribute">max-width</span>: $link-image-size-width;</span><br><span class="line"> <span class="attribute">min-width</span>: $link-image-size-width;</span><br><span class="line"> <span class="attribute">max-height</span>: $link-image-size-height;</span><br><span class="line"> <span class="attribute">min-height</span>: $link-image-size-height;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> $shadowColor;</span><br><span class="line"> <span class="attribute">magin</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20%</span>;</span><br><span class="line"> <span class="attribute">list-style</span>: none<span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line"> img{</span><br><span class="line"> <span class="selector-tag">object-fit</span>: <span class="selector-tag">cover</span>;</span><br><span class="line"> <span class="selector-tag">transition</span>: <span class="selector-tag">transform</span> <span class="selector-class">.6s</span> <span class="selector-tag">ease-out</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span>: <span class="selector-tag">middle</span>;</span><br><span class="line"> border-bottom: 4px solid #eee;//#e5642b;</span><br><span class="line"> <span class="selector-tag">transition</span>: 0<span class="selector-class">.4s</span> ;</span><br><span class="line"> <span class="selector-tag">width</span>: 100%;</span><br><span class="line"> <span class="selector-tag">border-radius</span>: 90<span class="selector-tag">px</span> 90<span class="selector-tag">px</span> 90<span class="selector-tag">px</span> 90<span class="selector-tag">px</span>;</span><br><span class="line"> <span class="selector-tag">display</span>: <span class="selector-tag">inline-block</span>;</span><br><span class="line"> <span class="selector-tag">float</span>: <span class="selector-tag">none</span>;</span><br><span class="line"> <span class="selector-tag">vertical-align</span>: <span class="selector-tag">middle</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.link-name</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">53px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> //text-shadow: 0 0 1px rgba(0,0,0,.4);</span><br><span class="line"> <span class="selector-tag">background</span>: <span class="selector-tag">rgba</span>(255,255,255,<span class="selector-class">.8</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.link-name-below</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">300</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">13px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> //text-shadow: 0 0 1px rgba(0,0,0,.4);</span><br><span class="line"> //background: rgba(255,255,255,.7);</span><br><span class="line"> }</span><br><span class="line"> &<span class="selector-pseudo">:hover</span>{</span><br><span class="line"> img{</span><br><span class="line"> <span class="selector-tag">overflow</span>: <span class="selector-tag">hidden</span>;</span><br><span class="line"> //transition: 0.4s;</span><br><span class="line"> <span class="selector-tag">border-radius</span>: 0 0 0 0;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.link-name</span>{</span><br><span class="line"> <span class="attribute">color</span>: $themeColor;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> //text-shadow: 0 0 1px $themeColor;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">// adjust the position of gitter</span><br><span class="line"><span class="selector-class">.gitter-open-chat-button</span> {</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(45,45,45,0.80);</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgba</span>(255,255,255,0.75)</span><br><span class="line">}</span><br><span class="line">@<span class="keyword">media</span> (max-width: <span class="number">600px</span>) {</span><br><span class="line"> <span class="selector-class">.gitter-open-chat-button</span>,</span><br><span class="line"> <span class="selector-class">.gitter-chat-embed</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@<span class="keyword">media</span> screen and (min-width:<span class="number">1200px</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">background</span>:<span class="built_in">url</span>(/images/50.jpg);</span><br><span class="line"> <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line"> <span class="attribute">background-attachment</span>:fixed;</span><br><span class="line"> <span class="attribute">background-position</span>:<span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-id">#footer</span> {</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#c8c8c8</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#coding</span><span class="selector-pseudo">:link</span>,<span class="selector-id">#coding</span><span class="selector-pseudo">:visited</span>{</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(153,153,153);</span><br><span class="line"> //font-weight: normal;</span><br><span class="line"> <span class="selector-tag">text-decoration</span>: <span class="selector-tag">none</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#coding</span><span class="selector-pseudo">:hover</span>,<span class="selector-id">#coding</span><span class="selector-pseudo">:active</span>{</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(153,153,153);</span><br><span class="line"> <span class="attribute">text-decoration</span>: none;</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure></p>
<h2 id="参考">
<span class="heading-link">参考</span>
</h2>
<ul>
<li><a href target="_blank" rel="noopener">主题优化</a></li>
<li><a href target="_blank" rel="noopener">Hexo 搭建个人博客系列：进阶设置篇</a></li>
</ul></div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束，感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://cjh0613.com">峡州仙士</a></span></div><div class="copyright-link"><span class="copyright-link__name">原文链接: </span><span class="copyright-link__value"><a href="https://cjh0613.com/20200515hexo.html">https://cjh0613.com/20200515hexo.html</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">声明: </span><span class="copyright-notice__value">如文章有更新，将先在本网站（峡州仙士之页）发布！（可百度）| 本网站所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow noopener noreferrer" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="tags/hexo/">hexo</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="tags/html/">html</a></span></div><div class="post-share"><div class="social-share" data-sites="qzone, qq, weibo, wechat, douban, linkedin, facebook, twitter, google">分享本文到: </div></div><div class="post-reward reward"><div class="reward-button">请我喝一杯凉虾~</div><div class="reward-qrcode"><a class="exturl__link" href="https://www.cjh0613.com/RedEnvelope" target="_blank" rel="external nofollow noopener noreferrer">（推荐）【免费打赏】手机用户点此一键领红包，您通过使用红包来支持站长</a><p>BTC地址（建议使用ETH）：3F7hk94nnBHrL4LuHZdtP4soPCefCV6CbU</p><p>ETH收款地址：0x2AdDE524665af970acE4CB3D50dE70136c88f90F</p><span class="reward-qrcode-alipay"><img class="reward-qrcode-alipay__img" src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/pasted-5.png"><div class="reward-qrcode-alipay__text">支付宝打赏</div></span><span class="reward-qrcode-wechat"><img class="reward-qrcode-wechat__img" src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/pasted-6.png"><div class="reward-qrcode-wechat__text">微信打赏</div></span></div></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/20200515comment.html"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">对比网站常用外部评论系统服务</span></a></div><div class="paginator-next"><a class="paginator-next__link" href="/20200513mechanical.html"><span class="paginator-prev__text">机械原理</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div><div class="comments" id="comments"><div id="waline-container"></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><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="#修复HEXO引用本地图片失败"><span class="toc-number">2.</span> <span class="toc-text">
修复HEXO引用本地图片失败
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插入PDF文档"><span class="toc-number">3.</span> <span class="toc-text">
插入PDF文档
</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Step-1-→-Go-to-NexT-dir"><span class="toc-number">3.1.</span> <span class="toc-text">
Step 1 → Go to NexT dir
</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Step-2-→-Get-module"><span class="toc-number">3.2.</span> <span class="toc-text">
Step 2 → Get module
</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Step-3-→-Set-it-up"><span class="toc-number">3.3.</span> <span class="toc-text">
Step 3 → Set it up
</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Usage"><span class="toc-number">3.4.</span> <span class="toc-text">
Usage:
</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#根据图像得到Latex公式"><span class="toc-number">4.</span> <span class="toc-text">
根据图像得到Latex公式
</span></a></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="#新增在线聊天tidio"><span class="toc-number">6.</span> <span class="toc-text">
新增在线聊天tidio
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#新增-clustrmaps"><span class="toc-number">7.</span> <span class="toc-text">
新增 clustrmaps
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#valine-添加邮件提醒"><span class="toc-number">8.</span> <span class="toc-text">
valine 添加邮件提醒
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Gitment-小小改动"><span class="toc-number">9.</span> <span class="toc-text">
Gitment 小小改动
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Valine-刷新后评论消失"><span class="toc-number">10.</span> <span class="toc-text">
Valine 刷新后评论消失
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#删除-Powered-by-Valine"><span class="toc-number">11.</span> <span class="toc-text">
删除 Powered by Valine
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#网页压缩"><span class="toc-number">12.</span> <span class="toc-text">
网页压缩
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码区高级设置"><span class="toc-number">13.</span> <span class="toc-text">
代码区高级设置
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#修复行内公式显示乱码"><span class="toc-number">14.</span> <span class="toc-text">
修复行内公式显示乱码
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#显示文章阅读数量"><span class="toc-number">15.</span> <span class="toc-text">
显示文章阅读数量
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#官方主题设置"><span class="toc-number">16.</span> <span class="toc-text">
官方主题设置
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关于评论系统"><span class="toc-number">17.</span> <span class="toc-text">
关于评论系统
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关于旋转头像"><span class="toc-number">18.</span> <span class="toc-text">
关于旋转头像
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#背景颜色设置"><span class="toc-number">19.</span> <span class="toc-text">
背景颜色设置
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#页面宽度设置"><span class="toc-number">20.</span> <span class="toc-text">
页面宽度设置
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#优化友情链接"><span class="toc-number">21.</span> <span class="toc-text">
优化友情链接
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#添加页面背景"><span class="toc-number">22.</span> <span class="toc-text">
添加页面背景
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#添加fork-me-on-github"><span class="toc-number">23.</span> <span class="toc-text">
添加fork me on github
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#MarkDown编辑器"><span class="toc-number">24.</span> <span class="toc-text">
MarkDown编辑器
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插入PDF文档以及图片"><span class="toc-number">25.</span> <span class="toc-text">
插入PDF文档以及图片
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置个性化的字体"><span class="toc-number">26.</span> <span class="toc-text">
配置个性化的字体
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在博客中插入网易云音乐"><span class="toc-number">27.</span> <span class="toc-text">
在博客中插入网易云音乐
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#播放视频"><span class="toc-number">28.</span> <span class="toc-text">
播放视频
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#同时部署"><span class="toc-number">29.</span> <span class="toc-text">
同时部署
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#版本管理"><span class="toc-number">30.</span> <span class="toc-text">
版本管理
</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#方案-1（推荐）"><span class="toc-number">30.1.</span> <span class="toc-text">
方案 1（推荐）
</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#方案-2"><span class="toc-number">30.2.</span> <span class="toc-text">
方案 2
</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#设置主题远程仓库"><span class="toc-number">30.2.1.</span> <span class="toc-text">
设置主题远程仓库
</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#设置node-modules远程仓库"><span class="toc-number">30.2.2.</span> <span class="toc-text">
设置node_modules远程仓库
</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#结语"><span class="toc-number">30.3.</span> <span class="toc-text">
结语
</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#所有配置集锦"><span class="toc-number">31.</span> <span class="toc-text">
所有配置集锦
</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考"><span class="toc-number">32.</span> <span class="toc-text">
参考
</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/icons/CJHicon.jpg" alt="avatar"></div><p class="sidebar-ov-author__text">这里也有我的痕迹(按排序)：</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="/20200402RSS.html" target="_blank" rel="noopener" data-popover="RSS订阅" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fas fa-rss"></i></span></a><a class="sidebar-ov-social-item" href="https://github.com/cjh0613" target="_blank" rel="external nofollow noopener noreferrer" data-popover="Github" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-github"></i></span></a><a class="sidebar-ov-social-item" href="https://www.thingiverse.com/cjh0613" target="_blank" rel="external nofollow noopener noreferrer" data-popover="Thingiverse" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fas fa-cube"></i></span></a><a class="sidebar-ov-social-item" href="https://t.me/cjh0613" target="_blank" rel="external nofollow noopener noreferrer" data-popover="Telegram" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-telegram"></i></span></a><a class="sidebar-ov-social-item" href="https://www.quora.com/profile/Bruce-Chen-199" target="_blank" rel="external nofollow noopener noreferrer" data-popover="Quora" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-quora"></i></span></a><a class="sidebar-ov-social-item" href="https://www.zhihu.com/people/cjh0613" target="_blank" rel="external nofollow noopener noreferrer" data-popover="知乎" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fas fa-question"></i></span></a><a class="sidebar-ov-social-item" href="/about.html" target="_blank" rel="noopener" data-popover="更多" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fas fa-ellipsis-h"></i></span></a></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">102</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">6</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">66</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="external nofollow noopener noreferrer" data-popover="知识共享" data-popover-pos="up"><img src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2020~2021</span><span class="footer__icon"><i class="fas fa-code"></i></span><span>峡州仙士</span><span class="footer__devider">|</span><span>粤ICP备12009483号（Gitee站）</span></div><!----><div class="busuanzi"><span class="busuanzi-siteuv"><span class="busuanzi-siteuv__icon"><i class="fas fa-user"></i></span><span class="busuanzi-siteuv__info">访问人数</span><span class="busuanzi-siteuv__value" id="busuanzi_value_site_uv"></span></span><span class="busuanzi-sitepv"><span class="busuanzi-siteuv__icon"><i class="fas fa-eye"></i></span><span class="busuanzi-siteuv__info">浏览总量</span><span class="busuanzi-siteuv__value" id="busuanzi_value_site_pv"></span></span></div><div>推荐使用电脑端访问本站</div><div class="webinfo-item"><span class="webinfo-runtime-name">本站持续运行时间 :</span><span class="webinfo-runtime-count" id="webinfo-runtime-count" start_date="2020/2/26 00:00:00"></span></div><div style="display:none"><script type="text/javascript" src="https://js.users.51.la/20667167.js"></script><script src="https://s96.cnzz.com/z_stat.php?id=1277785770&web_id=1277785770"></script></div><div><p><a class="exturl__link" href="/20200402RSS.html" target="_blank" rel="noopener">RSS</a> | <a class="exturl__link" href="https://en.cjh0613.com/index.html" target="_blank" rel="noopener">English I18N 国际站</a> | <a class="exturl__link" href="https://status.cjh0613.com/" target="_blank" rel="external nofollow noopener noreferrer">峡州仙士之页状态监控</a><br><a class="exturl__link" href="https://suyin-blog.club/" target="_blank" rel="noopener">苏寅</a> | <a class="exturl__link" href="https://www.avg.cx" target="_blank" rel="noopener">Yrh</a> | <a class="exturl__link" href="https://www.v6g.cn/" target="_blank" rel="noopener">微6g资源网</a><br><a class="exturl__link" href="https://cjh0613.com/archives/index.html" target="_blank" rel="noopener">归档页</a> |
sitemap（<a class="exturl__link" href="https://cjh0613.com/sitemap.xml" target="_blank" rel="noopener">1</a><a class="exturl__link" href="https://cjh0613.com/google-sitemap.xml" target="_blank" rel="noopener">2</a>）
| <a class="exturl__link" href="/friends/index.html" target="_blank" rel="noopener">更多友情链接</a></p></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><div class="search-mask"></div><script>//var btn = document.getElementById("cjh_search");
function cjh_search(){
var $input = $('.search-input input');var q = $input.val().toLowerCase().trim();
var url = "https://www.baidu.com/s";
var url = url + '?wd='+q+' "峡州仙士之页"';
if(q){
var tempwindow=window.open('_blank');
tempwindow.location=url;
}}
function cjh_g_search(){
var $input = $('.search-input input');var q = $input.val().toLowerCase().trim();
var url = "https://www.sanzhima.com/search";
var url = url + '?q='+q+' site:cjh0613.com';
if(q){
var tempwindow=window.open('_blank');
tempwindow.location=url;
}}
</script><div class="search-popup"><span class="search-close"></span><div class="search-input"><input placeholder="搜索文章（支持多关键词，请用空格分隔）"><div class="cjh-btn__icon" style="font-size:1rem"><a class="cjh-btn-a" href="javascript:;" onclick="cjh_g_search();return false;">谷歌搜索</a> <a class="cjh-btn-a" id="cjh_search" href="javascript:;" onclick="cjh_search();return false;">备用搜索</a></div><div style="text-align: center"><p>（您还可以在<a class="exturl__link" href="/blog/archives/" target="_blank" rel="noopener">归档页</a>搜索文章标题）</p></div></div><div class="search-results"></div></div><script src="//cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script><script src="//cdn.staticfile.org/velocity/1.5.2/velocity.min.js"></script><script src="//cdn.staticfile.org/velocity/1.5.2/velocity.ui.min.js"></script><script src="//cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script><script src="//cdn.staticfile.org/masonry/4.2.2/masonry.pkgd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.min.js"></script><script src="//cdn.staticfile.org/social-share.js/1.0.16/js/social-share.min.js"></script><script>function initSearch() {
var isXML = true;
var search_path = 'search.json';
if (!search_path) {
search_path = 'search.xml';
} else if (/json$/i.test(search_path)) {
isXML = false;
}
var path = '/' + search_path;
$.ajax({
url: path,
dataType: isXML ? 'xml' : 'json',
async: true,
success: function (res) {
var datas = isXML ? $('entry', res).map(function () {
// 将 XML 转为 JSON
return {
title: $('title', this).text(),
content: $('content', this).text(),
url: $('url', this).text()
};
}).get() : res;
var $input = $('.search-input input');
var $result = $('.search-results');
// 搜索对象（标题、内容）的权重，影响显示顺序
var WEIGHT = { title: 100, content: 1 };
var searchPost = function () {
var searchText = $input.val().toLowerCase().trim();
// 根据空白字符分隔关键字
var keywords = searchText.split(/[\s]+/);
// 搜索结果
var matchPosts = [];
// 有多个关键字时，将原文字整个保存下来
if (keywords.length > 1) {
keywords.push(searchText);
}
// 防止未输入字符时搜索
if (searchText.length > 0) {
datas.forEach(function (data) {
var isMatch = false;
// 没有标题的文章使用预设的 i18n 变量代替
var title = (data.title && data.title.trim()) || '[ 文章无标题 ]';
var titleLower = title && title.toLowerCase();
// 删除 HTML 标签 和 所有空白字符
var content = data.content && data.content.replace(/<[^>]+>/g, '');
var contentLower = content && content.toLowerCase();
// 删除重复的 /
var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/g, '/');
// 标题中匹配到的关键词
var titleHitSlice = [];
// 内容中匹配到的关键词
var contentHitSlice = [];
keywords.forEach(function (keyword) {
/**
* 获取匹配的关键词的索引
* @param {String} keyword 要匹配的关键字
* @param {String} text 原文字
* @param {Boolean} caseSensitive 是否区分大小写
* @param {Number} weight 匹配对象的权重。权重大的优先显示
* @return {Array}
*/
function getIndexByword (word, text, caseSensitive, weight) {
if (!word || !text) {
return [];
};
var startIndex = 0; // 每次匹配的开始索引
var index = -1; // 匹配到的索引值
var result = []; // 匹配结果
if (!caseSensitive) {
word = word.toLowerCase();
text = text.toLowerCase();
}
while((index = text.indexOf(word, startIndex)) !== -1) {
var hasMatch = false;
// 索引位置相同的关键词，保留长度较长的
titleHitSlice.forEach(function (hit) {
if (hit.index === index && hit.word.length < word.length) {
hit.word = word;
hasMatch = true;
}
});
startIndex = index + word.length;
!hasMatch && result.push({ index: index, word: word, weight: weight });
}
return result;
}
titleHitSlice = titleHitSlice.concat(getIndexByword(keyword, titleLower, false, WEIGHT.title));
contentHitSlice = contentHitSlice.concat(getIndexByword(keyword, contentLower, false, WEIGHT.content));
});
var hitTitle = titleHitSlice.length;
var hitContent = contentHitSlice.length;
if (hitTitle > 0 || hitContent > 0) {
isMatch = true;
}
if (isMatch) {
;[titleHitSlice, contentHitSlice].forEach(function (hit) {
// 按照匹配文字的索引的递增顺序排序
hit.sort(function (left, right) {
return left.index - right.index;
});
});
/**
* 给文本中匹配到的关键词添加标记，从而进行高亮显示
* @param {String} text 原文本
* @param {Array} hitSlice 匹配项的索引信息
* @param {Number} start 开始索引
* @param {Number} end 结束索引
* @return {String}
*/
function highlightKeyword (text, hitSlice, start, end) {
if (!text || !hitSlice || !hitSlice.length) {
return;
}
var result = '';
var startIndex = start;
var endIndex = end;
hitSlice.forEach(function (hit) {
if (hit.index < startIndex) {
return;
}
var hitWordEnd = hit.index + hit.word.length;
result += text.slice(startIndex, hit.index);
result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
startIndex = hitWordEnd;
});
result += text.slice(startIndex, endIndex);
return result;
}
var postData = {};
// 文章总的搜索权重
var postWeight = titleHitSlice.length * WEIGHT.title + contentHitSlice.length * WEIGHT.content;
// 标记匹配关键词后的标题
var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
// 标记匹配关键词后的内容
var postContent;
// 显示内容的长度
var SHOW_WORD_LENGTH = 200;
// 命中关键词前的字符显示长度
var SHOW_WORD_FRONT_LENGTH = 20;
var SHOW_WORD_END_LENGTH = SHOW_WORD_LENGTH - SHOW_WORD_FRONT_LENGTH;
// 截取匹配的第一个字符，前后共 200 个字符来显示
if (contentHitSlice.length > 0) {
var firstIndex = contentHitSlice[0].index;
var start = firstIndex > SHOW_WORD_FRONT_LENGTH ? firstIndex - SHOW_WORD_FRONT_LENGTH : 0;
var end = firstIndex + SHOW_WORD_END_LENGTH;
postContent = highlightKeyword(content, contentHitSlice, start, end);
} else { // 未匹配到内容，直接截取前 200 个字符来显示
postContent = content.slice(0, SHOW_WORD_LENGTH);
}
postData.title = postTitle;
postData.content = postContent;
postData.url = postURL;
postData.weight = postWeight;
matchPosts.push(postData);
}
});
}
var resultInnerHtml = '';
if (matchPosts.length) {
// 按权重递增的顺序排序，使权重大的优先显示
matchPosts.sort(function (left, right) {
return right.weight - left.weight;
});
resultInnerHtml += '<ul>';
matchPosts.forEach(function (post) {
resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
resultInnerHtml += post.title;
resultInnerHtml += '</a><div class="search-results-content">';
resultInnerHtml += post.content;
resultInnerHtml += '</div></li>';
});
resultInnerHtml += '</ul>';
} else {
resultInnerHtml += '<div class="search-results-none"><i class="far fa-meh"></i></div>';
}
$result.html(resultInnerHtml);
};
$input.on('input', searchPost);
$input.on('keypress', function (e) {
if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
searchPost();
}
});
}
});
}
function closeSearch () {
$('body').css('overflow', 'auto');
$('.search-popup')
.removeClass('show')
.velocity('stop')
.velocity('transition.expandOut', {
duration: 300
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeOut', {
duration: 300
});
}
window.addEventListener('DOMContentLoaded', function () {
Stun.utils.pjaxReloadLocalSearch = function () {
$('.header-nav-search').on('click', function (e) {
e.stopPropagation();
$('body').css('overflow', 'hidden');
$('.search-popup')
.addClass('show')
.velocity('stop')
.velocity('transition.expandIn', {
duration: 300,
complete: function () {
$('.search-popup input').focus();
}
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeIn', {
duration: 300
});
initSearch();
});
$('.search-mask, .search-close').on('click', function () {
closeSearch();
});
$(document).on('keydown', function (e) {
// Escape <=> 27
if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
closeSearch();
}
});
};
Stun.utils.pjaxReloadLocalSearch();
}, false);</script><link href="https://cdn.staticfile.org/KaTeX/0.10.2/katex.min.css" rel="stylesheet" type="text/css"><link href="https://cdn.staticfile.org/KaTeX/0.10.2/contrib/copy-tex.css" rel="stylesheet" type="text/css"><script src="https://cdn.staticfile.org/KaTeX/0.10.2/contrib/copy-tex.min.js"></script><script src="https://cdn.jsdelivr.net/gh/sukkaw/busuanzi@latest/bsz.pure.mini.js" async></script><script src="https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js"></script><script>function loadWaline () {
var GUEST_INFO = ['nick', 'mail', 'link'];
var guest_info = 'nick,mail,link';
guest_info = guest_info.split(',').filter(function(item) {
return GUEST_INFO.indexOf(item) > -1;
});
new Waline({
el: '#waline-container',
serverURL: 'https://comment.cjh0613.com',
placeholder: '点这里输入评论。如果您需要咨询，还可TG联系。（请填写上方昵称与邮箱，邮箱不会公开显示。如果您有个人网站，也可以填写）',
pageSize: '10' || 10,
lang: '' || 'zh-cn',
visitor: false,
avatar: 'mp',
path: window.location.pathname,
meta: guest_info,
avatarCDN: 'https://dn-qiniu-avatar.qbox.me/avatar/',
langMode: { admin: '站长' }
//- avatarCDN: 'https://sdn.geekzu.org/avatar/'
});
}
if (false) {
loadWaline();
} else {
window.addEventListener('DOMContentLoaded', loadWaline, false);
}</script><script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script><script>(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: 'ca-pub-3992225808017393',
enable_page_level_ads: true
});</script><script src="https://cjh0613.com/js/counttime.js"></script><script src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/js/utils.js?v=1.7.0"></script><script src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/js/stun-boot.js?v=1.7.0"></script><script src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/js/scroll.js?v=1.7.0"></script><script src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/js/header.js?v=1.7.0"></script><script src="https://cdn.jsdelivr.net/gh/cjh0613/blog@master/js/sidebar.js?v=1.7.0"></script></body></html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手