Skip to content

T
TRHX-github-io

IT.BOB / TRHX-github-io

通知 16
Star 2
Fork 1
T
TRHX-github-io

体验新版 GitCode，发现更多精彩内容 >>

提交 91b3f32e 编写于 作者: T TRHX
浏览文件
操作

Site updated: 2018-09-06 23:06:01

上级 80246e14
隐藏空白更改
内联 并排
Showing with 333 addition and 762 deletion
2018/08/10/hello-world/index.html 已删除 100644 → 0
浏览文件 @ 80246e14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World | TRHX&#39;s Blog - Live and Learn!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.">
<meta property="og:type" content="article">
<meta property="og:title" content="Hello World">
<meta property="og:url" content="http://yoursite.com/2018/08/10/hello-world/index.html">
<meta property="og:site_name" content="TRHX&#39;s Blog - Live and Learn!">
<meta property="og:description" content="Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-23T09:36:02.041Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hello World">
<meta name="twitter:description" content="Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.">
<link rel="alternative" href="/atom.xml" title="TRHX&#39;s Blog - Live and Learn!" type="application/atom+xml">
<link rel="icon" href="/img/trhx2.png">
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<!-- 加载特效 -->
<script src="/js/pace.js"></script>
<link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
<script>
var yiliaConfig = {
rootUrl: '/',
fancybox: true,
animate: true,
isHome: false,
isPost: true,
isArchive: false,
isTag: false,
isCategory: false,
open_in_new: false
}
</script>
</head>
<body>
<div id="container">
<div class="left-col">
<div class="overlay"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img lazy-src="/img/trhx.png" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/" title="Hi Mate">TRHX</a></h1>
</hgroup>
<p class="header-subtitle">天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣！</p>
<form>
<input type="text" class="st-default-search-input search" id="search" placeholder=" Search...">
</form>
<div id="switch-btn" class="switch-btn">
<div class="icon">
<div class="icon-ctn">
<div class="icon-wrap icon-house" data-idx="0">
<div class="birdhouse"></div>
<div class="birdhouse_holes"></div>
</div>
<div class="icon-wrap icon-ribbon hide" data-idx="1">
<div class="ribbon"></div>
</div>
<div class="icon-wrap icon-link hide" data-idx="2">
<div class="loopback_l"></div>
<div class="loopback_r"></div>
</div>
<div class="icon-wrap icon-me hide" data-idx="3">
<div class="user"></div>
<div class="shoulder"></div>
</div>
</div>
</div>
<div class="tips-box hide">
<div class="tips-arrow"></div>
<ul class="tips-inner">
<li>菜单</li>
<li>标签云</li>
<li>友情链接</li>
<li>关于我</li>
</ul>
</div>
</div>
<div id="switch-area" class="switch-area">
<div class="switch-wrap">
<section class="switch-part switch-part1">
<nav class="header-menu">
<ul>
<li><a href="http://trhx.top">博客首页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tags">静心阅读</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
<nav class="header-nav">
<ul class="social">
<a class="fl github" target="_blank" href="https://github.com/TRHX" title="github">github</a>
<a class="fl zhihu" target="_blank" href="https://www.zhihu.com/people/tan-70-56/activities" title="zhihu">zhihu</a>
<a class="fl mail" target="_blank" href="mailto:&#116;&#114;&#104;&#120;&#64;&#102;&#111;&#120;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;" title="mail">mail</a>
<a class="fl QQ" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273902448&site=qq&menu=yes" title="QQ">QQ</a>
<a class="fl weibo" target="_blank" href="http://weibo.com/TRHX1" title="weibo">weibo</a>
<a class="fl rss" target="_blank" href="https://blog.csdn.net/qq_36759224" title="rss">rss</a>
</ul>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
<a href="/tags/Github-Pages/" style="font-size: 10px;">Github Pages</a> <a href="/tags/Hexo/" style="font-size: 20px;">Hexo</a> <a href="/tags/Markdown/" style="font-size: 20px;">Markdown</a> <a href="/tags/主题个性化/" style="font-size: 10px;">主题个性化</a> <a href="/tags/人生/" style="font-size: 10px;">人生</a> <a href="/tags/技巧/" style="font-size: 10px;">技巧</a> <a href="/tags/梦想/" style="font-size: 10px;">梦想</a> <a href="/tags/编辑器/" style="font-size: 10px;">编辑器</a>
</div>
</section>
<section class="switch-part switch-part3">
<div id="js-friends">
<a target="_blank" class="main-nav-link switch-friends-link" href="https://www.hojun.cn">hojun</a>
<a target="_blank" class="main-nav-link switch-friends-link" href="https://luotaocheng.github.io">luotaocheng</a>
</div>
</section>
<section class="switch-part switch-part4">
<div id="js-aboutme">业余单车运动员、菜鸟级软件工程大学生、爱折腾、爱刺激、爱编程、爱科技</div>
</section>
</div>
</div>
</header>
</div>
<div style="position:absolute; bottom:100px; left:0px; width:50%">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=86 src="//music.163.com/outchain/player?type=2&id=32405683&auto=1&height=66"></iframe>
</div>
</div>
<div class="mid-col">
<nav id="mobile-nav">
<div class="overlay">
<div class="slider-trigger"></div>
<h1 class="header-author js-mobile-header hide"><a href="/" title="Me">TRHX</a></h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img lazy-src="/img/trhx.png" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/" title="Me">TRHX</a></h1>
</hgroup>
<p class="header-subtitle">天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣！</p>
<nav class="header-menu">
<ul>
<li><a href="http://trhx.top">博客首页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tags">静心阅读</a></li>
<li><a href="/about">关于我</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/TRHX" title="github">github</a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/tan-70-56/activities" title="zhihu">zhihu</a>
<a class="mail" target="_blank" href="mailto:&#116;&#114;&#104;&#120;&#64;&#102;&#111;&#120;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;" title="mail">mail</a>
<a class="QQ" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273902448&site=qq&menu=yes" title="QQ">QQ</a>
<a class="weibo" target="_blank" href="http://weibo.com/TRHX1" title="weibo">weibo</a>
<a class="rss" target="_blank" href="https://blog.csdn.net/qq_36759224" title="rss">rss</a>
</div>
</nav>
</header>
</div>
</nav>
<div class="body-wrap"><article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018/08/10/hello-world/" class="article-date">
<time datetime="2018-08-10T09:33:18.448Z" itemprop="datePublished">2018-08-10</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 class="article-title" itemprop="name">
Hello World
</h1>
</header>
<div class="article-info article-info-post">
<div class="clearfix"></div>
</div>
<div class="article-entry" itemprop="articleBody">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<a id="more"></a>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>
</div>
</div>
<div class="copyright">
<p><span>本文标题:</span><a href="/2018/08/10/hello-world/">Hello World</a></p>
<p><span>文章作者:</span><a href="/" title="访问 TRHX 的个人博客">TRHX</a></p>
<p><span>发布时间:</span>2018年08月10日 - 17时33分</p>
<p><span>最后更新:</span>2018年08月23日 - 17时36分</p>
<p>
<span>原始链接:</span><a class="post-url" href="/2018/08/10/hello-world/" title="Hello World">http://yoursite.com/2018/08/10/hello-world/</a>
<span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2018/08/10/hello-world/　　作者: TRHX" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
<script src="/js/clipboard.min.js"></script>
<script> var clipboard = new Clipboard('.copy-path'); </script>
</p>
<p>
<span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)" target = "_blank">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
</p>
</div>
<nav id="article-nav">
<a href="/2018/08/10/博客镇站之宝/" id="article-nav-newer" class="article-nav-link-wrap">
<strong class="article-nav-caption"><</strong>
<div class="article-nav-title">
本站镇站之宝
</div>
</a>
</nav>
</article>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Quick-Start"><span class="toc-number">1.</span> <span class="toc-text">Quick Start</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Create-a-new-post"><span class="toc-number">1.1.</span> <span class="toc-text">Create a new post</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Run-server"><span class="toc-number">1.2.</span> <span class="toc-text">Run server</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Generate-static-files"><span class="toc-number">1.3.</span> <span class="toc-text">Generate static files</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Deploy-to-remote-sites"><span class="toc-number">1.4.</span> <span class="toc-text">Deploy to remote sites</span></a></li></ol></li></ol>
</div>
<input type="button" id="tocButton" value="隐藏目录" title="点击按钮隐藏或者显示文章目录">
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
var valueHide = "隐藏目录";
var valueShow = "显示目录";
if ($(".left-col").is(":hidden")) {
$("#tocButton").attr("value", valueShow);
}
$("#tocButton").click(function() {
if ($("#toc").is(":hidden")) {
$("#tocButton").attr("value", valueHide);
$("#toc").slideDown(320);
}
else {
$("#tocButton").attr("value", valueShow);
$("#toc").slideUp(350);
}
})
if ($(".toc").length < 1) {
$("#toc, #tocButton").hide();
}
</script>
<div class="bdsharebuttonbox">
<a href="#" class="fx fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="fx fa-weixin bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="fx fa-qq bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="fx fa-facebook-official bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
<a href="#" class="fx fa-twitter bds_twi" data-cmd="twi" title="分享到Twitter"></a>
<a href="#" class="fx fa-linkedin bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
<a href="#" class="fx fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8zOTA3MS8xNTU5OA==">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
<div class="scroll" id="post-nav-button">
<a href="/2018/08/10/博客镇站之宝/" title="上一篇: 本站镇站之宝">
<i class="fa fa-angle-left"></i>
</a>
<a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
</div>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
$(".post-list-item a").attr("target","_blank");
$("#post-nav-button > a:nth-child(2)").click(function() {
$(".fa-bars, .fa-times").toggle();
$(".post-list").toggle(300);
if ($(".toc").length > 0) {
$("#toc, #tocButton").toggle(200, function() {
if ($(".switch-area").is(":visible")) {
$("#tocButton").attr("value", valueHide);
}
})
}
else {
}
})
</script>
<script>
</script>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info">
<div class="footer-left">
&copy; 2018 <a href="http://trhx.top" target="_blank"> TRHX </a>
</div>
<div class="footer-right">
<a href="http://hexo.io/" target="_blank">Hexo</a> Theme spfk by <a href="https://github.com/luuman/hexo-theme-spfk" target="_blank">luuman</a>
</div>
</div>
<div class="visit">
<span id="busuanzi_container_site_pv" style='display:none'>
<font size=2 color=#4094C7>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime()
{
var grt= new Date("08/10/2018 17:38:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = " 本站已运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒 ";
}
setInterval("createtime()",250);
</script>
</font>
||
<span id="site-visit" >本站到访数:
<span id="busuanzi_value_site_uv"></span>
</span>
</span>
<span> || </span>
<span id="busuanzi_container_page_pv" style='display:none'>
<span id="page-visit">本页阅读量:
<span id="busuanzi_value_page_pv"></span>
</span>
</span>
</div>
</div>
</footer>
</div>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script src="/js/main.js"></script>
<script>
$(document).ready(function() {
var backgroundnum = 71;
var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
$("#mobile-nav").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
$(".left-col").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
})
</script>
<div class="scroll" id="scroll">
<a href="#"><i class="fa fa-arrow-up"></i></a>
<a href="#comments"><i class="fa fa-comments-o"></i></a>
<a href="#footer"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
$(document).ready(function() {
if ($("#comments").length < 1) {
$("#scroll > a:nth-child(2)").hide();
};
})
</script>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<script language="javascript">
$(function() {
$("a[title]").each(function() {
var a = $(this);
var title = a.attr('title');
if (title == undefined || title == "") return;
a.data('title', title).removeAttr('title').hover(
function() {
var offset = a.offset();
$("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({
top: offset.top - a.outerHeight() - 15,
left: offset.left + a.outerWidth()/2 + 1
}).fadeIn(function() {
var pop = $(this);
setTimeout(function() {
pop.remove();
}, pop.text().length * 800);
});
}, function() {
$("#anchortitlecontainer").remove();
});
});
});
</script>
<script type="text/javascript">
window.onload = function(){
document.getElementById("search").onclick = function(){
console.log("search")
search();
}
}
function search(){
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
_st('install','A1Pz-LKMXbrzcFg2FWi6','2.0.0');
}
</script>
</div>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/love.js"></script>
\ No newline at end of file
2018/08/10/博客镇站之宝/index.html
浏览文件 @ 91b3f32e
......@@ -261,6 +261,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">46字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">1分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-info article-info-post">
......@@ -325,11 +348,6 @@
</a>
<a href="/2018/08/10/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
<div class="article-nav-title">Hello World</div>
<strong class="article-nav-caption">></strong>
</a>
</nav>
......@@ -413,12 +431,10 @@
<a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
<a href="/2018/08/10/hello-world/" title="下一篇: Hello World">
<i class="fa fa-angle-right"></i>
</a>
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
</div>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li></ul>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
......
2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/index.html
浏览文件 @ 91b3f32e
......@@ -290,6 +290,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">3,575字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">13分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-info article-info-post">
......@@ -607,7 +630,7 @@ $ hexo g -d
</a>
</div>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li></ul>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
......
2018/08/25/Markdown 语法&技巧总结/index.html
浏览文件 @ 91b3f32e
......@@ -14,7 +14,10 @@
<meta property="og:description" content="在写博客的时候遇到的 Markdown 各种方法技巧或者语法记录下来，方便查阅【持续更新】">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://i.imgur.com/UyEXrBi.jpg">
<meta property="og:updated_time" content="2018-08-29T15:17:49.040Z">
<meta property="og:image" content="https://i.imgur.com/6E1kQzO.png">
<meta property="og:image" content="https://i.imgur.com/uRdMA63.png">
<meta property="og:image" content="https://i.imgur.com/YOAVLsm.png">
<meta property="og:updated_time" content="2018-09-06T14:59:45.830Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Markdown 语法&amp;技巧总结">
<meta name="twitter:description" content="在写博客的时候遇到的 Markdown 各种方法技巧或者语法记录下来，方便查阅【持续更新】">
......@@ -263,6 +266,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">439字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">2分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-info article-info-post">
......@@ -284,13 +310,21 @@
<div class="article-entry" itemprop="articleBody">
<p><font color="#4094C7" size="4"><br><strong>在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！</strong><br></font></p>
<font color="#4094C7" size="4"><br><strong>在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！</strong><br></font>
<hr>
<h1 id="–-插入图片"><a href="#–-插入图片" class="headerlink" title="– 插入图片"></a>– 插入图片</h1><p><img src="https://i.imgur.com/UyEXrBi.jpg" alt=""></p>
<p>如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，如果是本地图片，可以上传到 <a href="https://imgur.com/" target="_blank" rel="noopener">imgur</a> ，之后就可以得到你图片的地址</p>
<blockquote>
<p>! [] ( <a href="https://i.imgur.com/UyEXrBi.jpg" target="_blank" rel="noopener">https://i.imgur.com/UyEXrBi.jpg</a> ) </p>
</blockquote>
<h1 id="–-插入图片"><a href="#–-插入图片" class="headerlink" title=" – 插入图片 "></a><font color="#FF0000"> – 插入图片 </font></h1><p><br></p>
<p><img src="https://i.imgur.com/UyEXrBi.jpg" alt="车"></p>
<p>如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，比如上面的图片代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![<span class="string">车</span>](<span class="link">https://i.imgur.com/UyEXrBi.jpg</span>)</span><br></pre></td></tr></table></figure>
<p><br></p>
<h1 id="–-插入音乐"><a href="#–-插入音乐" class="headerlink" title=" – 插入音乐 "></a><font color="#FF0000"> – 插入音乐 </font></h1><p><br><br>打开网页版<a href="https://music.163.com/" target="_blank" rel="noopener">网易云音乐</a>，选择你准备插入的音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码<br><img src="https://i.imgur.com/6E1kQzO.png" alt=""><br><img src="https://i.imgur.com/uRdMA63.png" alt=""></p>
<p>然后将此HTML代码粘贴到你想要放的地方，可自行调节播放器的大小，其中 <font color="#FF0000">auto=1</font> 表示打开网页自动播放音乐，<font color="#FF0000">auto=0</font> 表示关闭自动播放音乐，比如See You Again (中英文版) - 罗艺恒这首歌曲代码如下：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<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">330</span> <span class="attr">height</span>=<span class="string">86</span> <span class="attr">src</span>=<span class="string">"//music.163.com/outchain/player?type=2&amp;id=32405683&amp;auto=1&amp;height=66"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><br></p>
<h1 id="–-插入视频"><a href="#–-插入视频" class="headerlink" title=" – 插入视频 "></a><font color="#FF0000"> – 插入视频 </font></h1><p><br><br>高考毕业了我们为下一届的学弟学妹们录制高考加油视频，我担任后期制作，在这里就以该视频为例٩(๑❛ᴗ❛๑)۶，在腾讯视频播放页面找到分享按钮，复制该视频的通用代码（其他视频播放平台也一样）,粘贴到文章中对应位置即可，可根据情况调整视频播放器的大小<br><img src="https://i.imgur.com/YOAVLsm.png" alt=""></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">frameborder</span>=<span class="string">"0"</span> <span class="attr">width</span>=<span class="string">"1040"</span> <span class="attr">height</span>=<span class="string">"700"</span> <span class="attr">src</span>=<span class="string">"https://v.qq.com/txp/iframe/player.html?vid=x0643zvgtf7"</span> <span class="attr">allowFullScreen</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure>
<iframe frameborder="0" width="1040" height="700" src="https://v.qq.com/txp/iframe/player.html?vid=x0643zvgtf7" allowfullscreen="true"></iframe>
......@@ -303,7 +337,7 @@
<p><span>本文标题:</span><a href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&amp;技巧总结</a></p>
<p><span>文章作者:</span><a href="/" title="访问 TRHX 的个人博客">TRHX</a></p>
<p><span>发布时间:</span>2018年08月25日 - 17时57分</p>
<p><span>最后更新:</span>2018年08月29日 - 23时17分</p>
<p><span>最后更新:</span>2018年09月06日 - 22时59分</p>
<p>
<span>原始链接:</span><a class="post-url" href="/2018/08/25/Markdown 语法&技巧总结/" title="Markdown 语法&amp;技巧总结">http://yoursite.com/2018/08/25/Markdown 语法&amp;技巧总结/</a>
<span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2018/08/25/Markdown 语法&amp;技巧总结/　　作者: TRHX" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
......@@ -341,7 +375,7 @@
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#–-插入图片"><span class="toc-number">1.</span> <span class="toc-text">– 插入图片</span></a></li></ol>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#–-插入图片"><span class="toc-number">1.</span> <span class="toc-text"> – 插入图片 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-插入音乐"><span class="toc-number">2.</span> <span class="toc-text"> – 插入音乐 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-插入视频"><span class="toc-number">3.</span> <span class="toc-text"> – 插入视频 </span></a></li></ol>
</div>
<input type="button" id="tocButton" value="隐藏目录" title="点击按钮隐藏或者显示文章目录">
......@@ -422,7 +456,7 @@
</a>
</div>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li></ul>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
......
2018/08/27/Hexo 博客主题个性化/index.html
浏览文件 @ 91b3f32e
......@@ -5,13 +5,13 @@
<title>Hexo 博客主题个性化 | TRHX&#39;s Blog - Live and Learn!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客">
<meta name="description" content="Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客【持续更新】">
<meta name="keywords" content="主题个性化,Hexo">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo 博客主题个性化">
<meta property="og:url" content="http://yoursite.com/2018/08/27/Hexo 博客主题个性化/index.html">
<meta property="og:site_name" content="TRHX&#39;s Blog - Live and Learn!">
<meta property="og:description" content="Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客">
<meta property="og:description" content="Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客【持续更新】">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://i.imgur.com/mNjUFeP.png">
<meta property="og:image" content="https://i.imgur.com/I3DXQMC.png">
......@@ -21,10 +21,19 @@
<meta property="og:image" content="https://i.imgur.com/OgKwuQY.png">
<meta property="og:image" content="https://i.imgur.com/9oCg3Gx.png">
<meta property="og:image" content="https://i.imgur.com/LI7iFxx.png">
<meta property="og:updated_time" content="2018-08-29T15:18:01.538Z">
<meta property="og:image" content="https://i.imgur.com/ss300YU.png">
<meta property="og:image" content="https://i.imgur.com/vWhZElo.png">
<meta property="og:image" content="https://i.imgur.com/gqs8NKL.png">
<meta property="og:image" content="https://i.imgur.com/om8pIL9.png">
<meta property="og:image" content="https://i.imgur.com/6E1kQzO.png">
<meta property="og:image" content="https://i.imgur.com/uRdMA63.png">
<meta property="og:image" content="https://i.imgur.com/7Cv1iFZ.png">
<meta property="og:image" content="https://i.imgur.com/JPh5epQ.png">
<meta property="og:image" content="https://i.imgur.com/pDR4xYb.png">
<meta property="og:updated_time" content="2018-09-06T14:59:49.791Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo 博客主题个性化">
<meta name="twitter:description" content="Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客">
<meta name="twitter:description" content="Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客【持续更新】">
<meta name="twitter:image" content="https://i.imgur.com/mNjUFeP.png">
<link rel="alternative" href="/atom.xml" title="TRHX&#39;s Blog - Live and Learn!" type="application/atom+xml">
......@@ -270,6 +279,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">1,627字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">7分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-info article-info-post">
......@@ -294,8 +326,9 @@
<font color="#4094C7" size="4"><br><strong>本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 <a href="https://github.com/luuman/hexo-theme-spfk" target="_blank" rel="noopener">spfk</a> 主题为例）</strong><br></font>
<hr>
<h1 id="–-添加评论系统"><a href="#–-添加评论系统" class="headerlink" title=" – 添加评论系统 "></a><font color="#FF0000"> – 添加评论系统 </font></h1><p>主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统</p>
<p>进入<a href="https://livere.com" target="_blank" rel="noopener">来必力官网</a>，注册一个账号（注册时可能需要翻墙）<br><br></p>
<h1 id="–-添加评论系统"><a href="#–-添加评论系统" class="headerlink" title=" – 添加评论系统 "></a><font color="#FF0000"> – 添加评论系统 </font></h1><p><br></p>
<p>主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统</p>
<p>进入<a href="https://livere.com" target="_blank" rel="noopener">来必力官网</a>，注册一个账号（注册时可能需要翻墙） </p>
<p><img src="https://i.imgur.com/mNjUFeP.png" alt=""> </p>
<p><br><br>注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码<br><br></p>
<p><img src="https://i.imgur.com/I3DXQMC.png" alt=""></p>
......@@ -303,7 +336,7 @@
<p><img src="https://i.imgur.com/sCi7KKc.png" alt=""> </p>
<p><br><br>我们打开主题文件下的 <font color="#FF0000">_config.yml</font> 文件，添加如下代码：<br><br></p>
<p><img src="https://i.imgur.com/Lwfd9pZ.png" alt=""> </p>
<p><br><br>在 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\comments</font> 文件夹下新建一个 <font color="#FF0000">livere.ejs</font> 的文件，在里面填写来必力提供的代码：</p>
<p>在 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\comments</font> 文件夹下新建一个 <font color="#FF0000">livere.ejs</font> 的文件，在里面填写来必力提供的代码：</p>
<pre><code>&lt;!-- 来必力City版安装代码 --&gt;
&lt;div id=&quot;lv-container&quot; data-id=&quot;city&quot; data-uid=&quot;这里是你的uid&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
......@@ -323,11 +356,13 @@
&lt;/div&gt;
&lt;!-- City版安装代码已完成 --&gt;
</code></pre><p>打开 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\article.ejs </font>文件，在适当位置添加如下红框中的代码： </p>
<p><br><br><img src="https://i.imgur.com/OgKwuQY.png" alt=""> </p>
<p><img src="https://i.imgur.com/OgKwuQY.png" alt=""> </p>
<p><br><br>完成以上操作之后，我们就可以使用来必力评论系统了<br><br></p>
<p><img src="https://i.imgur.com/9oCg3Gx.png" alt=""><br><br></p>
<hr>
<h1 id="–-添加卡通人物"><a href="#–-添加卡通人物" class="headerlink" title=" – 添加卡通人物 "></a><font color="#FF000"> – 添加卡通人物 </font></h1><p>我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！<a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">点击此处</a>进入该项目地址 </p>
<p><br></p>
<h1 id="–-添加卡通人物"><a href="#–-添加卡通人物" class="headerlink" title=" – 添加卡通人物 "></a><font color="#FF000"> – 添加卡通人物 </font></h1><p><br></p>
<p>我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！<a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">点击此处</a>进入该项目地址 </p>
<p>输入如下命令获取 live2d ：</p>
<pre><code>$ npm install --save hexo-helper-live2d
</code></pre><p>输入以下命令，下载相应的模型，将 <font color="#FF0000">packagename</font> 更换成模型名称即可，更多模型选择请<a href="https://github.com/xiazeyu/live2d-widget-models" target="_blank" rel="noopener">点击此处</a>，各个模型的预览请<a href="https://huaji8.top/post/live2d-plugin-2.0/" target="_blank" rel="noopener">访问原作者的博客</a> </p>
......@@ -345,7 +380,31 @@
mobile:
show: false #是否在手机端显示
</code></pre><p>设置好过后我们就拥有了一个卡通人物<br><br></p>
<p><img src="https://i.imgur.com/LI7iFxx.png" alt=""></p>
<p><img src="https://i.imgur.com/LI7iFxx.png" alt=""><br><br></p>
<h1 id="–-添加鼠标点击爱心效果"><a href="#–-添加鼠标点击爱心效果" class="headerlink" title=" – 添加鼠标点击爱心效果 "></a><font color="#FF0000"> – 添加鼠标点击爱心效果 </font></h1><p><br></p>
<p>在<font color="#FF0000"> /themes/hexo-theme-spfk/source/js</font> 下新建文件 <font color="#FF0000">love.js</font>，在 <font color="#FF0000">love.js</font> 文件中添加以下代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">!<span class="function"><span class="keyword">function</span>(<span class="params">e,t,a</span>)</span>&#123;<span class="function"><span class="keyword">function</span> <span class="title">n</span>(<span class="params"></span>)</span>&#123;c(<span class="string">".heart&#123;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);&#125;.heart:after,.heart:before&#123;content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;&#125;.heart:after&#123;top: -5px;&#125;.heart:before&#123;left: -5px;&#125;"</span>),o(),r()&#125;<span class="function"><span class="keyword">function</span> <span class="title">r</span>(<span class="params"></span>)</span>&#123;<span class="keyword">for</span>(<span class="keyword">var</span> e=<span class="number">0</span>;e&lt;d.length;e++)d[e].alpha&lt;=<span class="number">0</span>?(t.body.removeChild(d[e].el),d.splice(e,<span class="number">1</span>)):(d[e].y--,d[e].scale+=<span class="number">.004</span>,d[e].alpha-=<span class="number">.013</span>,d[e].el.style.cssText=<span class="string">"left:"</span>+d[e].x+<span class="string">"px;top:"</span>+d[e].y+<span class="string">"px;opacity:"</span>+d[e].alpha+<span class="string">";transform:scale("</span>+d[e].scale+<span class="string">","</span>+d[e].scale+<span class="string">") rotate(45deg);background:"</span>+d[e].color+<span class="string">";z-index:99999"</span>);requestAnimationFrame(r)&#125;<span class="function"><span class="keyword">function</span> <span class="title">o</span>(<span class="params"></span>)</span>&#123;<span class="keyword">var</span> t=<span class="string">"function"</span>==<span class="keyword">typeof</span> e.onclick&amp;&amp;e.onclick;e.onclick=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;t&amp;&amp;t(),i(e)&#125;&#125;<span class="function"><span class="keyword">function</span> <span class="title">i</span>(<span class="params">e</span>)</span>&#123;<span class="keyword">var</span> a=t.createElement(<span class="string">"div"</span>);a.className=<span class="string">"heart"</span>,d.push(&#123;<span class="attr">el</span>:a,<span class="attr">x</span>:e.clientX<span class="number">-5</span>,<span class="attr">y</span>:e.clientY<span class="number">-5</span>,<span class="attr">scale</span>:<span class="number">1</span>,<span class="attr">alpha</span>:<span class="number">1</span>,<span class="attr">color</span>:s()&#125;),t.body.appendChild(a)&#125;<span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params">e</span>)</span>&#123;<span class="keyword">var</span> a=t.createElement(<span class="string">"style"</span>);a.type=<span class="string">"text/css"</span>;<span class="keyword">try</span>&#123;a.appendChild(t.createTextNode(e))&#125;<span class="keyword">catch</span>(t)&#123;a.styleSheet.cssText=e&#125;t.getElementsByTagName(<span class="string">"head"</span>)[<span class="number">0</span>].appendChild(a)&#125;<span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span><span class="string">"rgb("</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">","</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">","</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">")"</span>&#125;<span class="keyword">var</span> d=[];e.requestAnimationFrame=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span> e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;setTimeout(e,<span class="number">1e3</span>/<span class="number">60</span>)&#125;&#125;(),n()&#125;(<span class="built_in">window</span>,<span class="built_in">document</span>);</span><br></pre></td></tr></table></figure>
<p>在 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\layout.ejs</font> 文件末尾添加以下代码：</p>
<figure class="highlight xml"><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">&lt;!-- 页面点击小红心 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/love.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>完成以上操作后，当我们点击鼠标的时候就可以看见爱心的特效了</p>
<p><img src="https://i.imgur.com/ss300YU.png" alt=""></p>
<p><br></p>
<h1 id="–-添加字数统计和阅读时长"><a href="#–-添加字数统计和阅读时长" class="headerlink" title=" – 添加字数统计和阅读时长 "></a><font color="#FF0000"> – 添加字数统计和阅读时长 </font></h1><p><br></p>
<p>先在博客目录下执行以下命令安装 <font color="#FF0000">hexo-wordcount</font> 插件：<br><figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm i --<span class="keyword">save</span> hexo-<span class="built_in">wordcount</span></span><br></pre></td></tr></table></figure></p>
<p>之后在 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\_partial\post</font> 目录下创建 <font color="#FF0000">word.ejs</font> 文件，在 <font color="#FF0000">word.ejs</font> 文件中写入以下代码：</p>
<figure class="highlight erb"><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></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"margin-top:10px;"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-time"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-keyboard-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span> 字数统计: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span></span></span> wordcount(post.content) <span class="xml"><span class="tag">%&gt;</span>字<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-time"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> &amp;nbsp; | &amp;nbsp;</span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-hourglass-half"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span> 阅读时长: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span></span></span> min2read(post.content) <span class="xml"><span class="tag">%&gt;</span>分<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<p>然后在 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\_partial\article.ejs</font> 中适当位置添加以下代码：<br><img src="https://i.imgur.com/vWhZElo.png" alt=""></p>
<p>最后在主题目录下的 <font color="#FF0000">_config.yml</font> 添加以下配置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">word_count:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>如果显示的位置不好，可以自行更改其位置，成功配置后的效果如下：<br><img src="https://i.imgur.com/gqs8NKL.png" alt=""><br><img src="https://i.imgur.com/om8pIL9.png" alt=""></p>
<p><br></p>
<h1 id="–-添加背景音乐"><a href="#–-添加背景音乐" class="headerlink" title=" – 添加背景音乐 "></a><font color="#FF0000"> – 添加背景音乐 </font></h1><p><br><br>打开网页版<a href="https://music.163.com/" target="_blank" rel="noopener">网易云音乐</a>，选择你准备添加的背景音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码<br><img src="https://i.imgur.com/6E1kQzO.png" alt=""><br><img src="https://i.imgur.com/uRdMA63.png" alt=""></p>
<p>然后将此代码放到你想要放的地方，比如放在博客的左侧，则打开 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\_partial\left-col.ejs</font> 文件，将复制的HTML代码粘贴进去，再进行适当的位置设置让播放器更美观，其中 <font color="#FF0000">auto=1</font> 表示打开网页自动播放音乐，<font color="#FF0000">auto=0</font> 表示关闭自动播放音乐<br><img src="https://i.imgur.com/7Cv1iFZ.png" alt=""></p>
<p>最后效果如下：<br><img src="https://i.imgur.com/JPh5epQ.png" alt=""></p>
<p><br></p>
<h1 id="–-添加网站运行时间"><a href="#–-添加网站运行时间" class="headerlink" title=" – 添加网站运行时间 "></a><font color="#FF0000"> – 添加网站运行时间 </font></h1><p><br><br>一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的<br>在 \themes\hexo-theme-spfk-x\layout\_partial\footer.ejs 文件下添加以下代码：</p>
<figure class="highlight xml"><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="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"timeDate"</span>&gt;</span>载入天数...<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"times"</span>&gt;</span>载入时分秒...<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>(); </span></span><br><span class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">createtime</span>(<span class="params"></span>) </span>&#123; </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> grt= <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"08/10/2018 17:38:00"</span>);<span class="comment">//在此处修改你的建站时间</span></span></span><br><span class="line"><span class="undefined"> now.setTime(now.getTime()+250); </span></span><br><span class="line"><span class="javascript"> days = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>; dnum = <span class="built_in">Math</span>.floor(days); </span></span><br><span class="line"><span class="javascript"> hours = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> - (<span class="number">24</span> * dnum); hnum = <span class="built_in">Math</span>.floor(hours); </span></span><br><span class="line"><span class="javascript"> <span class="keyword">if</span>(<span class="built_in">String</span>(hnum).length ==<span class="number">1</span> )&#123;hnum = <span class="string">"0"</span> + hnum;&#125; minutes = (now - grt ) / <span class="number">1000</span> /<span class="number">60</span> - (<span class="number">24</span> * <span class="number">60</span> * dnum) - (<span class="number">60</span> * hnum); </span></span><br><span class="line"><span class="javascript"> mnum = <span class="built_in">Math</span>.floor(minutes); <span class="keyword">if</span>(<span class="built_in">String</span>(mnum).length ==<span class="number">1</span> )&#123;mnum = <span class="string">"0"</span> + mnum;&#125; </span></span><br><span class="line"><span class="undefined"> seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); </span></span><br><span class="line"><span class="javascript"> snum = <span class="built_in">Math</span>.round(seconds); <span class="keyword">if</span>(<span class="built_in">String</span>(snum).length ==<span class="number">1</span> )&#123;snum = <span class="string">"0"</span> + snum;&#125; </span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"timeDate"</span>).innerHTML = <span class="string">"本站已安全运行 "</span>+dnum+<span class="string">" 天 "</span>; </span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"times"</span>).innerHTML = hnum + <span class="string">" 小时 "</span> + mnum + <span class="string">" 分 "</span> + snum + <span class="string">" 秒"</span>; </span></span><br><span class="line"><span class="undefined"> &#125; </span></span><br><span class="line"><span class="javascript">setInterval(<span class="string">"createtime()"</span>,<span class="number">250</span>);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>最后效果如下：<br><br><br><img src="https://i.imgur.com/pDR4xYb.png" alt=""></p>
......@@ -358,7 +417,7 @@
<p><span>本文标题:</span><a href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></p>
<p><span>文章作者:</span><a href="/" title="访问 TRHX 的个人博客">TRHX</a></p>
<p><span>发布时间:</span>2018年08月27日 - 21时25分</p>
<p><span>最后更新:</span>2018年08月29日 - 23时18分</p>
<p><span>最后更新:</span>2018年09月06日 - 22时59分</p>
<p>
<span>原始链接:</span><a class="post-url" href="/2018/08/27/Hexo 博客主题个性化/" title="Hexo 博客主题个性化">http://yoursite.com/2018/08/27/Hexo 博客主题个性化/</a>
<span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2018/08/27/Hexo 博客主题个性化/　　作者: TRHX" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
......@@ -396,7 +455,7 @@
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加评论系统"><span class="toc-number">1.</span> <span class="toc-text"> – 添加评论系统 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加卡通人物"><span class="toc-number">2.</span> <span class="toc-text"> – 添加卡通人物 </span></a></li></ol>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加评论系统"><span class="toc-number">1.</span> <span class="toc-text"> – 添加评论系统 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加卡通人物"><span class="toc-number">2.</span> <span class="toc-text"> – 添加卡通人物 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加鼠标点击爱心效果"><span class="toc-number">3.</span> <span class="toc-text"> – 添加鼠标点击爱心效果 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加字数统计和阅读时长"><span class="toc-number">4.</span> <span class="toc-text"> – 添加字数统计和阅读时长 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加背景音乐"><span class="toc-number">5.</span> <span class="toc-text"> – 添加背景音乐 </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-添加网站运行时间"><span class="toc-number">6.</span> <span class="toc-text"> – 添加网站运行时间 </span></a></li></ol>
</div>
<input type="button" id="tocButton" value="隐藏目录" title="点击按钮隐藏或者显示文章目录">
......@@ -477,7 +536,7 @@
</a>
</div>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li></ul>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
......
2018/08/29/主流 Markdown 编辑器推荐/index.html
浏览文件 @ 91b3f32e
......@@ -37,7 +37,7 @@
<meta property="og:image" content="https://i.imgur.com/e47bDQA.png">
<meta property="og:image" content="https://i.imgur.com/Dib6V88.png">
<meta property="og:image" content="https://i.imgur.com/1DqvTX5.jpg">
<meta property="og:updated_time" content="2018-08-29T16:20:40.441Z">
<meta property="og:updated_time" content="2018-08-30T15:05:11.494Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="主流 Markdown 编辑器推荐">
<meta name="twitter:description" content="工欲善其事，必先利其器，选择一个合适自己的 Markdown 编辑器至关重要">
......@@ -286,6 +286,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">2,188字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">8分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-info article-info-post">
......@@ -392,7 +415,7 @@
<p><span>本文标题:</span><a href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></p>
<p><span>文章作者:</span><a href="/" title="访问 TRHX 的个人博客">TRHX</a></p>
<p><span>发布时间:</span>2018年08月29日 - 23时02分</p>
<p><span>最后更新:</span>2018年08月30日 - 00时20分</p>
<p><span>最后更新:</span>2018年08月30日 - 23时05分</p>
<p>
<span>原始链接:</span><a class="post-url" href="/2018/08/29/主流 Markdown 编辑器推荐/" title="主流 Markdown 编辑器推荐">http://yoursite.com/2018/08/29/主流 Markdown 编辑器推荐/</a>
<span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2018/08/29/主流 Markdown 编辑器推荐/　　作者: TRHX" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
......@@ -500,7 +523,7 @@
</a>
</div>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/29/主流 Markdown 编辑器推荐/">主流 Markdown 编辑器推荐</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/27/Hexo 博客主题个性化/">Hexo 博客主题个性化</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/25/Markdown 语法&技巧总结/">Markdown 语法&技巧总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用 Github Pages 和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/博客镇站之宝/">本站镇站之宝</a></li></ul>
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
......
about/index.html
浏览文件 @ 91b3f32e
......@@ -260,6 +260,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">226字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">1分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-info article-info-post">
......
archives/2018/08/index.html
浏览文件 @ 91b3f32e
......@@ -424,33 +424,6 @@
</div>
</article>
<article class="archive-article archive-type-post">
<div class="archive-article-inner">
<header class="archive-article-header">
<div class="article-meta">
<a href="/2018/08/10/hello-world/" class="archive-article-date">
<time datetime="2018-08-10T09:33:18.448Z" itemprop="datePublished">08-10</time>
</a>
</div>
<h1 itemprop="name">
<a class="archive-article-title" href="/2018/08/10/hello-world/">Hello World</a>
</h1>
<div class="article-info info-on-archive">
</div>
<div class="clearfix"></div>
</header>
</div>
</article>
</div></section>
......
archives/2018/index.html
浏览文件 @ 91b3f32e
......@@ -424,33 +424,6 @@
</div>
</article>
<article class="archive-article archive-type-post">
<div class="archive-article-inner">
<header class="archive-article-header">
<div class="article-meta">
<a href="/2018/08/10/hello-world/" class="archive-article-date">
<time datetime="2018-08-10T09:33:18.448Z" itemprop="datePublished">08-10</time>
</a>
</div>
<h1 itemprop="name">
<a class="archive-article-title" href="/2018/08/10/hello-world/">Hello World</a>
</h1>
<div class="article-info info-on-archive">
</div>
<div class="clearfix"></div>
</header>
</div>
</article>
</div></section>
......
archives/index.html
浏览文件 @ 91b3f32e
......@@ -424,33 +424,6 @@
</div>
</article>
<article class="archive-article archive-type-post">
<div class="archive-article-inner">
<header class="archive-article-header">
<div class="article-meta">
<a href="/2018/08/10/hello-world/" class="archive-article-date">
<time datetime="2018-08-10T09:33:18.448Z" itemprop="datePublished">08-10</time>
</a>
</div>
<h1 itemprop="name">
<a class="archive-article-title" href="/2018/08/10/hello-world/">Hello World</a>
</h1>
<div class="article-info info-on-archive">
</div>
<div class="clearfix"></div>
</header>
</div>
</article>
</div></section>
......
content.json
浏览文件 @ 91b3f32e
{"meta":{"title":"TRHX's Blog - Live and Learn!","subtitle":"天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣！","description":"一个大学生用于自学的个人博客","author":"TRHX","url":"http://yoursite.com"},"pages":[{"title":"About","date":"2018-08-19T13:50:37.000Z","updated":"2018-08-24T10:52:04.149Z","comments":true,"path":"about/index.html","permalink":"http://yoursite.com/about/index.html","excerpt":"","text":"About TRHX ▲ TRHX 武汉某二本院校大二学生，软件工程专业，平时爱捣鼓一切与IT有关的东西，对一切高科技产品非常感兴趣；▲ 爱编程，但又没技术，渴望成为技术大佬，但暂时看起来还是天方夜谭，在校学习C、C++、Java，准备自学Python；▲ 爱骑行，混迹于骑行界超过五年，走遍许多城市，想去西藏，奈何家里不同意，儿女情长什么的真的影响走江湖；▲ 爱听比较嗨的歌，尤其喜欢一边听歌一边搞学（che）习（dan），一边放低音炮一边骑车飞（zhuang）奔（bi）；▲ 性格正直，看不惯一切恶势力；▲ 爱吃辣，无辣不欢；不知道写什么，以后慢慢写吧，反正不是正式的，也没人看。 近期计划 ▲ 学好Python▲ 坚持写博客▲ 大二学好Java"}],"posts":[{"title":"主流 Markdown 编辑器推荐","slug":"主流 Markdown 编辑器推荐","date":"2018-08-29T15:02:46.857Z","updated":"2018-08-29T16:20:40.441Z","comments":true,"path":"2018/08/29/主流 Markdown 编辑器推荐/","link":"","permalink":"http://yoursite.com/2018/08/29/主流 Markdown 编辑器推荐/","excerpt":"","text":"Markdown ，2004年由 John Gruberis 设计和开发，是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，以下将介绍目前比较流行的一些 Markdown 编辑器（排名不分先后） - MarkdownPad 目前分为 MarkdownPad2 和 MarkdownPad Pro 版本，后者收费，我们使用前者足矣，用户可以通过键盘快捷键和工具栏按钮来使用或者移除 Markdown 各种语法格式，支持自定义配色方案、字体、大小和布局 、即时HTML预览、HTML和PDF导出，被很多人称赞为 Windows 平台最好用的 Markdown 编辑器，实用性强，仅支持 Windows 系统，个人觉得在 Windows 10 系统上界面并不是很好看，有时候添加音乐什么的，资源多了，实时预览会显示资源加载失败，点击此处访问 MarkdownPad 官网 - BookPad 无意间在 Microsoft Store 上发现的，完美搭配 Win10 系统，界面非常简洁漂亮，2017年9月份发布，大小30.82 MB，官方网站：https://sosfos.wordpress.com/ ，收费13人民币，可免费使用7天，各种功能应有尽有，和其他编辑器不相上下，本来想着百度百度看看有没有破解版，结果全网看不见 BookPad 的影子，估计是新出来的还不为人所知吧，可以直接在 Microsoft Store 搜索下载，或者点击链接获取：https://www.microsoft.com/store/apps/9N6P5ZH2SJSX - 小书匠 分为免费版和收费版，收费版¥20/年，其实免费版的功能已经足够强大了，多种编辑模式、多种主题选择、多种编辑器实现、丰富的语法支持、第三方同步、强大的文件管理功能，让人使用一次就爱上了它，支持 Windows 和 Web，推荐使用，点击此处访问小书匠官网 - Sublime Text 3Sublime Text 3 是基于 Vim 开发的跨平台代码编辑器，收费80美元，好像可以免费试用，支持 OS X、Windows、Ubuntu 等 UNIX 及 Linux 操作系统，由于其功能的多样性而广受好评，界面简约大方，定位专业，原生支持的编程语言就多达十几种，通过第三方插件，还能实现更多语法的支持，其中就包括 Markdown ，但也有个缺点，就是不能实时预览，但是用户可以通过 Markdown Preview 的插件实现对 Markdown 的预览，具体教程请点击此处查看，点击此处访问 Sublime Text 官网 - Mou Mou 是一款由国人独立开发者罗晨开发的实时预览型 Markdown 编辑器，仅支持 OS X操作系统，是目前同类应用中对汉字兼容性最好的作品，也是目前最好用的免费 Markdown 编辑器，提供语法高亮、在线预览、同步滚动、全屏模式，支持自定保存、自动匹配，允许自定义主题，支持 CSS，HTML 和 PDF 导出等功能，点击此处访问 Mou 官网 - AtomAtom 是 Github 专门为程序员推出的一个跨平台文本编辑器，具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言，当然也支持 Markdown ，支持宏，自动完成分屏功能，集成了文件管理器，点击此处访问 Atom 官网 - Smark国人编写的开源软件，Windows / Linux 等主流系统跨平台支持，完美支持 LaTex 数学公式、脚注、尾注等，支持使用本地 MathJax 调用，不需要在线访问 MathJax CDN，用户可配置的 Markdown 语法高亮显示，美观整洁，多种格式文件导出支持，简洁友好的界面布局，完备的各类快捷键，能极大地提高工作效率，点击此处访问 Smark 官网 - HaroopadHaroopad 覆盖三大主流桌面系统，支持 Windows、OS X 和 Linux，多种主题样式供你选择，语法标亮支持 54 种编程语言，该工具重点推荐 Ubuntu/Linux 用户使用，点击此处访问 Haroopad 官网 - TyporaTypora 同样支持 Windows、OS X 和 Linux，Typora 支持即时渲染技术，这也是与其他 Markdown 编辑器最显著的区别，支持数学编辑，可与 Word 直接格式转换，在 Pandoc 的支持下进行多种文档格式转换，Typora 适合那些对码字手速和排版顺畅度有要求的人群，譬如码农、网站小编等，点击此处访问 Typora 官网 - CuteMarkEdCuteMarkEd 是一个基于qt5的跨平台的 Markdown 编辑器，开源的， 提供实时 HTML 预览、数学表达式、源码高亮和PDF导出，点击此处 访问 CuteMarkEd 官网 - MarkPadMarkPad 是款开源的 Markdown 编辑器，与 Window 8 风格和谐友好的界面，可以直接在你的博客或者 GitHub 中打开、保存文档，直接将图片粘贴到 Markdown 文档中，点击此处访问 MarkPad 官网 - Cmd Markdown作业部落出品，是一款不错的工具和博客平台兼顾的产品，同时支持 Linux、Mac 和 Windows 操作系统，此外还提供 Web 在线创作，社交化批注、智能云同步，最简单的方法，满足多种写作需要，点击此处访问 Cmd Markdown 官网 - FarBox同样是一款不错的 Markdown 编辑器和博客平台兼顾的产品，让用户通过Dropbox（现在默认是自己的同步服务器）直接建立个人网站。FarBox编辑器免费，同时支持 Linux、Mac 和 Windows 操作系统，Farbox服务可以免费试用，在本地编辑器内写作自动同步发布在个人博客，对于希望有个人博客但却不愿折腾的小白来说，是个不错的选择，点击此处访问 FarBox 官网 - MiuMiu 是一款 Windows 下的 Markdown 编辑器，支持 Markdown 高亮、代码高亮、即时预览，以及可以快速发布到 Github Gist，小众软件，界面美观，已经找不到官网了，小众软件网有提供百度云下载，Miu 下载地址 - MacDownMacDown 引用了许多 Mou 的设计方式，仅支持 Mac ，开源免费，点击此处访问 MacDown 官网 - Ulysses一款由国外开发商 The Soulmen 制作的 Markdown 编辑器。与其它同类应用相比，Ulysses 最大的不同在于，它能根据内置的文件管理器，以及与 iCloud 云服务器的实时同步方案，达到最快捷的文章整理效率，支持OS X , iPad，26人民币每月，14天免费试用，点击此处访问 Ulysses 官网 - Byword一款轻量级的 Markdown 编辑器，支持Mac，iPhone和iPad，界面极简，功能强大，貌似要付费使用，点击此处 访问 Byword 官网 - Visual Studio CodeVisual Studio Code 是微软推出一款轻量级的文本编辑工具，类似于 Sublime，它已经默认集成 Markdown 文档编辑插件，原生就支持高亮 Markdown 的语法，但想要实时预览还需要选择 Markdown: Open Preview to the Side 命令实现，相关教程请点击此处，点击此处 访问 Visual Studio Code 官网 - MarxicoMarxico 中文名马克飞象，提供桌面客户端以及离线 Chrome App，支持移动端 Web，可以直接把文本存到印象笔记，点击此处访问 Marxico，点击此处访问 马克飞象 - MaHua一个在线编辑 Markdown 文档的编辑器，小众软件，VIM 快捷键支持，完美兼容 Github 的 Markdown 语法，界面稍许简陋，点击此处访问 MaHua - Dillinger来自国外的 Markdown 编辑器，漂亮强大，支持md、 html、pdf 文件导出，支持Dropbox、Github、Google Drive、Onedrive 一键保存，点击此处访问 Dillinger - 简书简书是一个优质的创作社区，你可以在线创作并发表到社区，是国内优质原创内容输出平台，简书从一开始就已经支持 Markdown 和富文本编辑，是一个为专门为作者打造的平台，点击此处访问简书官网 要细数 Markdown 编辑器的话，可能永远也数不尽，但最有质量的也就那么几个，而且每个人的看法也不同，正所谓萝卜白菜各有所爱，什么编辑器不是最重要的，重要的是我们能写出优质的文章，不断学习进步！不断提升自我！ 参考资料：《好用的Markdown编辑器一览》（By：月光）《10款流行的Markdown编辑器，总有一款适合你》（By：xiaoxiao_engineer）《解决作者们的焦虑：7 款优秀 Markdown 编辑工具推荐》（By：JailJT）","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"Markdown","slug":"Markdown","permalink":"http://yoursite.com/tags/Markdown/"},{"name":"编辑器","slug":"编辑器","permalink":"http://yoursite.com/tags/编辑器/"}]},{"title":"Hexo 博客主题个性化","slug":"Hexo 博客主题个性化","date":"2018-08-27T13:25:24.452Z","updated":"2018-08-29T15:18:01.538Z","comments":true,"path":"2018/08/27/Hexo 博客主题个性化/","link":"","permalink":"http://yoursite.com/2018/08/27/Hexo 博客主题个性化/","excerpt":"","text":"本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 spfk 主题为例） – 添加评论系统 主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统 进入来必力官网，注册一个账号（注册时可能需要翻墙） 注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码 我们打开主题文件下的 _config.yml 文件，添加如下代码： 在 \\themes\\hexo-theme-spfk\\layout\\_partial\\comments 文件夹下新建一个 livere.ejs 的文件，在里面填写来必力提供的代码： &lt;!-- 来必力City版安装代码 --&gt; &lt;div id=&quot;lv-container&quot; data-id=&quot;city&quot; data-uid=&quot;这里是你的uid&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt; (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === &apos;function&apos;) { return; } j = d.createElement(s); j.src = &apos;https://cdn-city.livere.com/js/embed.dist.js&apos;; j.async = true; e.parentNode.insertBefore(j, e); })(document, &apos;script&apos;); &lt;/script&gt; &lt;noscript&gt;为正常使用来必力评论功能请激活JavaScript&lt;/noscript&gt; &lt;/div&gt; &lt;!-- City版安装代码已完成 --&gt; 打开 \\themes\\hexo-theme-spfk\\layout\\_partial\\article.ejs 文件，在适当位置添加如下红框中的代码： 完成以上操作之后，我们就可以使用来必力评论系统了 – 添加卡通人物 我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！点击此处进入该项目地址 输入如下命令获取 live2d ： $ npm install --save hexo-helper-live2d 输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客 $ npm install packagename 打开站点目录下的 _config.yml 文件，添加如下代码： live2d: enable: true scriptFrom: local model: use: live2d-widget-model-haruto #模型选择 display: position: right #模型位置 width: 150 #模型宽度 height: 300 #模型高度 mobile: show: false #是否在手机端显示 设置好过后我们就拥有了一个卡通人物","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"主题个性化","slug":"主题个性化","permalink":"http://yoursite.com/tags/主题个性化/"},{"name":"Hexo","slug":"Hexo","permalink":"http://yoursite.com/tags/Hexo/"}]},{"title":"Markdown 语法&技巧总结","slug":"Markdown 语法&技巧总结","date":"2018-08-25T09:57:16.879Z","updated":"2018-08-29T15:17:49.040Z","comments":true,"path":"2018/08/25/Markdown 语法&技巧总结/","link":"","permalink":"http://yoursite.com/2018/08/25/Markdown 语法&技巧总结/","excerpt":"","text":"在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！ – 插入图片 如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，如果是本地图片，可以上传到 imgur ，之后就可以得到你图片的地址 ! [] ( https://i.imgur.com/UyEXrBi.jpg )","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"Markdown","slug":"Markdown","permalink":"http://yoursite.com/tags/Markdown/"},{"name":"技巧","slug":"技巧","permalink":"http://yoursite.com/tags/技巧/"}]},{"title":"如何使用 Github Pages 和 Hexo 搭建自己的独立博客","slug":"如何使用Github Pages和Hexo搭建自己独立博客","date":"2018-08-15T13:34:58.325Z","updated":"2018-08-29T15:17:51.644Z","comments":true,"path":"2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/","link":"","permalink":"http://yoursite.com/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/","excerpt":"","text":"– 前言首先感谢您能访问我的博客：TRHX’Blog 这是一篇有关如何使用 Github Pages 和 Hexo 搭建属于自己独立博客的详尽教程，本人是软件工程专业本科生，目前只学习了C和C++编程语言，对网站开发的有关知识几乎为零，这也是我搭建好自己的博客之后写的第一篇博客，刚开始搭建博客的时候自己也是网上各种百度，由于自己属于小白那种，历经了千辛万苦才弄好，所以借这个机会写一篇小白真正能看懂的博客搭建教程，教你一步一步走向成功的彼岸！ 推荐文章： 《我为什么写博客》 （By 知明所以） 《为什么你应该（从现在开始就）写博客》 (By 刘未鹏 | Mind Hacks) – 入门 Github Pages Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。 Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 – 安装 Node.js点击此处访问官网，按需下载相应版本，默认安装可以了 注：本人在安装过程中出现了Warning 1909,无法创建快捷方式，这种情况很少出现，如果在安装过程中也有这种情况请参考百度文库（win10系统实测可行）：《Win7安装程序警告1909无法创建快捷方式》 – 安装 Git点击此处访问官网，按需下载相应版本，默认安装即可 参考资料：《如何在windows下安装GIT》 （By 俊雨廷休） 《Pro Git（中文版）》 – 检验软件是否安装成功同时按下 Win 键和 R 键打开运行窗口,输入 cmd ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装，此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 Git GUI Here 和 Git Bash Here两个选项，第一个是图形界面的Git操作，另一个是命令行 $ git --version $ node -v $ npm -v – Hexo 安装选择一个磁盘，新建一个文件夹，自己重命名文件夹（如：我的文件夹为：Ｅ\\TRHX_Blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装，第一个命令表示安装 hexo，第二个命令表示安装 hexo 部署到 git page 的 deployer，如图所示即为安装成功 $ npm install hexo-cli -g $ npm install hexo-deployer-git --save – Hexo 初始化配置在刚才新建的文件夹里面再次新建一个 Hexo 文件夹（如：我的文件夹为：E\\TRHX_Blog\\Hexo）,进入该 Hexo 文件夹右键鼠标，点击 Git Bash Here，输入以下命令，如图所示则安装成功 $ hexo init Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下： – 本地查看效果执行以下命令，执行完即可登录 http://localhost:4000/ 查看效果 $ hexo generate $ hexo server 显示以下信息说明操作成功： INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 登录 http://localhost:4000/ 查看效果： – 将博客部署到 Github Pages 上到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到Github Pages上 一、注册 Github 账户：点击此处访问 Github 官网，点击 Sign Up 注册账户 二、创建项目代码库：点击 New repository 开始创建，步骤及注意事项见图： 三、配置 SSH 密钥：只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，在你第一次新建的文件夹里面（如：我的文件夹为：Ｅ\\TRHX_Blog） Git Bash Here 输入以下命令： $ ssh-keygen -t rsa -C &quot;your email@example.com&quot; //引号里面填写你的邮箱地址，比如我的是tanrenhou@126.com 之后会出现： Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): //到这里可以直接回车将密钥按默认文件进行存储 然后会出现： Enter passphrase (empty for no passphrase): //这里是要你输入密码，其实不需要输什么密码，直接回车就行 Enter same passphrase again: 接下来屏幕会显示： Your identification has been saved in /c/Users/you/.ssh/id_rsa. Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub. The key fingerprint is: 这里是各种字母数字组成的字符串，结尾是你的邮箱 The key&apos;s randomart image is: 这里也是各种字母数字符号组成的字符串 运行以下命令，将公钥的内容复制到系统粘贴板上 $ clip &lt; ~/.ssh/id_rsa.pub 四、在 GitHub 账户中添加你的公钥 1.登陆 GitHub，进入 Settings： 2.点击 SSH and GPG Keys： 3.选择 New SSH key： 4.粘贴密钥： 五、测试 输入以下命令：注意：git@github.com不要做任何更改！ $ ssh -T git@github.com 之后会显示： 输入 yes 后会显示： 此时表示设置正确 六、配置 Git 个人信息 Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致 $ git config --global user.name &quot;此处填你的用户名&quot; $ git config --global user.email &quot;此处填你的邮箱&quot; 到此为止 SSH Key 配置成功，本机已成功连接到 Github – 将本地的 Hexo 文件更新到 Github 的库中一、登录 Github 打开自己的项目 your name.github.io 二、鼠标移到 Clone or download 按钮，选择 Use SSH 三、一键复制地址 四、打开你创建的 Hexo 文件夹（如：E:\\TRHX_Blog\\Hexo），右键用记事本（或者Notepad++）打开该文件夹下的 _config.yml 文件 五、按下图修改 _config.yml 文件并保存 六、在 Hexo 文件夹下分别执行以下命令 $ hexo g $ hexo d 或者直接执行 $ hexo g -d 执行完之后会让你输入你的 Github 的账号和密码，如果此时报以下错误，说明你的 deployer 没有安装成功 ERROR Deployer not found: git 需要执行以下命令再安装一次： npm install hexo-deployer-git --save 再执行 hexo g -d，你的博客就会部署到 Github 上了 七、访问博客 你的博客地址：https://你的用户名.github.io，比如我的是：https://trhx.github.io ,现在每个人都可以通过此链接访问你的博客了 – 如何在博客上发表文章博客已经成功搭建了，但是我们该怎么写博客呢？ 一、新建一个空文章，输入以下命令，会在项目 \\Hexo\\source\\_posts 中生成 文章标题.md 文件，文章标题根据需要命名 $ hexo n &quot;文章标题&quot; 也可以直接在 \\Hexo\\source\\_posts 目录下右键鼠标新建文本文档，改后缀为 .md 即可，这种方法比较方便 二、用编辑器编写文章 md 全称 Markdown， Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后保存文件到 \\Hexo\\source\\_posts 文件夹下即可推荐 Windows 上使用 MarkdownPad2 编辑器，macOS 上使用 Mou 编辑器，Linux 上使用 Remarkable编辑器，Web 端上使用简书 当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上 $ hexo g $ hexo d 或者将两个命令合二为一输入以下命令： $ hexo d -g 现在访问你的博客就可以看见写好的文章啦！ 参考资料：《10款流行的Markdown编辑器》 （By xiaoxiao_engineer） 《献给写作者的 Markdown 新手指南》 （By 简书） 《认识与入门 Markdown》 （By Te_Lee） 《markdown简明语法》 （By 不如） 《markdown基本语法》 （By 高鸿祥） 《Markdown 公式指导手册》 （By Harries） – 如何为博客更换自己喜欢的主题博客也搭建好了，文章也会写了，但是！！！默认的主题并不喜欢怎么办？现在，我们就来为自己的博客更换自己喜欢的主题 点击此处进入 Hexo 官网的主题专栏，我们可以看见有许多的主题供我们选择 我们要做的就是把主题克隆过来，在此我们以主题 Aero-Dual 为例，点进去我们就可以看见该主题作者的博客，鼠标滑到底，我们可以看见 Theme By Levblanc 的字样（其他主题类似），点击作者 Levblanc ，页面就会跳转到该主题所有的相关文件在 Github 上的地址，复制该地址 再打开 Hexo 文件夹下的 themes 目录（如：E:\\TRHX_Blog\\Hexo\\themes），右键 Git Bash Here，输入以下命令： $ git clone 此处填写你刚才复制的主题地址 比如要安装 Aero-Dual 主题，则输入命令： $ git clone https://github.com/levblanc/hexo-theme-aero-dual 等待下载完成后即可在 themes 目录下生成 hexo-theme-aero-dual 文件夹，然后打开 Hexo 文件夹下的配置文件 _config.yml ，找到关键字 theme，修改参数为：theme：hexo-theme-aero-dual （其他主题修改成相应名称即可），再次注意冒号后面有一个空格！ 返回 Hexo 目录，右键 Git Bash Here ，输入以下命令开始部署主题： $ hexo g $ hexo s 此时打开浏览器，访问 http://localhost:4000/ 就可看见我们的主题已经更换了，如果感觉效果满意，我们就可以把它部署到Github上了 打开 Hexo 文件夹，右键 Git Bash Here ，输入以下命令： $ hexo clean //该命令的作用是清除缓存，若不输入此命令，服务器有可能更新不了主题 $ hexo g -d 此时访问自己的博客即可看见更换后的主题，但我们仍然需要对主题的相关配置进行修改，比如网站标题，图标等等，Hexo 中有两份主要的配置文件，名称都是 _config.yml ，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的：E:\\TRHX_Blog\\Hexo\\_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主题目录下（比如我的：E:\\TRHX_Blog\\Hexo\\themes\\hexo-theme-aero-dual\\_config.yml），这份配置由主题作者提供，主要用于配置主题相关的选项，一般 _config.yml 文件里都有相关注释，按需修改即可 参考资料：《有哪些好看的 Hexo 主题？》 （知乎） 《Hexo | 配置》 （Hexo官方文档） 《hexo常用命令笔记》 （By 小弟调调） – 为你的 Hexo 博客配置个性域名本人在配置域名的时候问题百出，百度的各种方法都不管用，打开网站总是 404，可能是我太笨了 o(╥﹏╥)o ，不过好在后来终于解决了这个问题 首先我们要购买域名，阿里云，腾讯云都可以，也不贵，一年几十块钱，最便宜几块钱也能买到，以阿里云为例，我购买的域名是 trhx.top，购买过程就不赘述了，选择阿里云的解析平台，来到阿里云的管理控制台，点击进入域名解析列表或者直接点击域名后面的解析 点击添加记录，需要添加两个记录，两个记录类型都是 CNAME ，记录值都是填你自己的博客地址（比如我的是：trhx.github.io），第一个主机记录为 @ ，第二个主机记录为 www ,保存之后域名解析就完成了！ 【注：百度大多数方法是这样的：两个记录类型为 A ，记录值都为博客的 IP 地址，IP 地址可以 cmd 中输入 ping 你的博客地址 获得（比如我的：ping trhx.github.io），但我尝试这种方法并没有成功，目前也不知道具体原因，强调一下，我还是这方面小白！小白！小白！所以不太懂，欢迎大佬来指点！】 为了使 GitHub 接收我们的域名，还需要在博客的根目录下添加一个名为 CNAME 的文件（注意不要加.txt，没有任何后缀名！），这个文件放到 Hexo 文件夹的 source 里面，（比如我的是：E:\\TRHX_Blog\\Hexo\\source），文件里面填写你的域名（去掉www），比如要填写我的域名，文件里面就放一句话：trhx.top，经过以上操作，别人就可以通过 www.trhx.top 、trhx.top 、trhx.github.io 三个当中任意一个访问我的博客了！你的也一样！ 如果你在其他平台购买域名，或者选择 DNSPod 等其他域名解析，操作方法大同小异，遇到问题可自行百度解决！ 参考资料：《推荐几家域名注册服务商》 （By Jelly Bool） 《盘点十大免费DNS域名解析服务：稳定、可靠》 – 结语一顿操作下来虽然有点儿累，但看见拥有了自己的博客还是非常有成就感的，人生就是需要折腾，那么现在就开始你的创作之旅吧！文章的不断积累，你会从中受益很多的！另外，这是一篇小白写的适用于小白的博客搭建教程，比较详细，有这方面基础的可以百度有简略一点儿的教程，文中如有错误还请大佬指出改正！文中涉及参考资料如有侵权请联系我删除！","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"http://yoursite.com/tags/Hexo/"},{"name":"Github Pages","slug":"Github-Pages","permalink":"http://yoursite.com/tags/Github-Pages/"}]},{"title":"本站镇站之宝","slug":"博客镇站之宝","date":"2018-08-10T09:38:00.000Z","updated":"2018-08-29T15:17:59.198Z","comments":true,"path":"2018/08/10/博客镇站之宝/","link":"","permalink":"http://yoursite.com/2018/08/10/博客镇站之宝/","excerpt":"","text":"人类的幸福和欢乐在于奋斗，而最有价值的是为理想而奋斗！ ———— 苏格拉底Human happiness and joy lie in struggle, and what is most valuable is striving for ideals! ———— Socrates","categories":[{"name":"励志视频","slug":"励志视频","permalink":"http://yoursite.com/categories/励志视频/"}],"tags":[{"name":"梦想","slug":"梦想","permalink":"http://yoursite.com/tags/梦想/"},{"name":"人生","slug":"人生","permalink":"http://yoursite.com/tags/人生/"}]},{"title":"Hello World","slug":"hello-world","date":"2018-08-10T09:33:18.448Z","updated":"2018-08-23T09:36:02.041Z","comments":true,"path":"2018/08/10/hello-world/","link":"","permalink":"http://yoursite.com/2018/08/10/hello-world/","excerpt":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","categories":[],"tags":[]}]}
\ No newline at end of file
{"meta":{"title":"TRHX's Blog - Live and Learn!","subtitle":"天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣！","description":"一个大学生用于自学的个人博客","author":"TRHX","url":"http://yoursite.com"},"pages":[{"title":"About","date":"2018-08-19T13:50:37.000Z","updated":"2018-08-24T10:52:04.149Z","comments":true,"path":"about/index.html","permalink":"http://yoursite.com/about/index.html","excerpt":"","text":"About TRHX ▲ TRHX 武汉某二本院校大二学生，软件工程专业，平时爱捣鼓一切与IT有关的东西，对一切高科技产品非常感兴趣；▲ 爱编程，但又没技术，渴望成为技术大佬，但暂时看起来还是天方夜谭，在校学习C、C++、Java，准备自学Python；▲ 爱骑行，混迹于骑行界超过五年，走遍许多城市，想去西藏，奈何家里不同意，儿女情长什么的真的影响走江湖；▲ 爱听比较嗨的歌，尤其喜欢一边听歌一边搞学（che）习（dan），一边放低音炮一边骑车飞（zhuang）奔（bi）；▲ 性格正直，看不惯一切恶势力；▲ 爱吃辣，无辣不欢；不知道写什么，以后慢慢写吧，反正不是正式的，也没人看。 近期计划 ▲ 学好Python▲ 坚持写博客▲ 大二学好Java"}],"posts":[{"title":"主流 Markdown 编辑器推荐","slug":"主流 Markdown 编辑器推荐","date":"2018-08-29T15:02:46.857Z","updated":"2018-08-30T15:05:11.494Z","comments":true,"path":"2018/08/29/主流 Markdown 编辑器推荐/","link":"","permalink":"http://yoursite.com/2018/08/29/主流 Markdown 编辑器推荐/","excerpt":"","text":"Markdown ，2004年由 John Gruberis 设计和开发，是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，以下将介绍目前比较流行的一些 Markdown 编辑器（排名不分先后） - MarkdownPad 目前分为 MarkdownPad2 和 MarkdownPad Pro 版本，后者收费，我们使用前者足矣，用户可以通过键盘快捷键和工具栏按钮来使用或者移除 Markdown 各种语法格式，支持自定义配色方案、字体、大小和布局 、即时HTML预览、HTML和PDF导出，被很多人称赞为 Windows 平台最好用的 Markdown 编辑器，实用性强，仅支持 Windows 系统，个人觉得在 Windows 10 系统上界面并不是很好看，有时候添加音乐什么的，资源多了，实时预览会显示资源加载失败，点击此处访问 MarkdownPad 官网 - BookPad 无意间在 Microsoft Store 上发现的，完美搭配 Win10 系统，界面非常简洁漂亮，2017年9月份发布，大小30.82 MB，官方网站：https://sosfos.wordpress.com/ ，收费13人民币，可免费使用7天，各种功能应有尽有，和其他编辑器不相上下，本来想着百度百度看看有没有破解版，结果全网看不见 BookPad 的影子，估计是新出来的还不为人所知吧，可以直接在 Microsoft Store 搜索下载，或者点击链接获取：https://www.microsoft.com/store/apps/9N6P5ZH2SJSX - 小书匠 分为免费版和收费版，收费版¥20/年，其实免费版的功能已经足够强大了，多种编辑模式、多种主题选择、多种编辑器实现、丰富的语法支持、第三方同步、强大的文件管理功能，让人使用一次就爱上了它，支持 Windows 和 Web，推荐使用，点击此处访问小书匠官网 - Sublime Text 3Sublime Text 3 是基于 Vim 开发的跨平台代码编辑器，收费80美元，好像可以免费试用，支持 OS X、Windows、Ubuntu 等 UNIX 及 Linux 操作系统，由于其功能的多样性而广受好评，界面简约大方，定位专业，原生支持的编程语言就多达十几种，通过第三方插件，还能实现更多语法的支持，其中就包括 Markdown ，但也有个缺点，就是不能实时预览，但是用户可以通过 Markdown Preview 的插件实现对 Markdown 的预览，具体教程请点击此处查看，点击此处访问 Sublime Text 官网 - Mou Mou 是一款由国人独立开发者罗晨开发的实时预览型 Markdown 编辑器，仅支持 OS X操作系统，是目前同类应用中对汉字兼容性最好的作品，也是目前最好用的免费 Markdown 编辑器，提供语法高亮、在线预览、同步滚动、全屏模式，支持自定保存、自动匹配，允许自定义主题，支持 CSS，HTML 和 PDF 导出等功能，点击此处访问 Mou 官网 - AtomAtom 是 Github 专门为程序员推出的一个跨平台文本编辑器，具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言，当然也支持 Markdown ，支持宏，自动完成分屏功能，集成了文件管理器，点击此处访问 Atom 官网 - Smark国人编写的开源软件，Windows / Linux 等主流系统跨平台支持，完美支持 LaTex 数学公式、脚注、尾注等，支持使用本地 MathJax 调用，不需要在线访问 MathJax CDN，用户可配置的 Markdown 语法高亮显示，美观整洁，多种格式文件导出支持，简洁友好的界面布局，完备的各类快捷键，能极大地提高工作效率，点击此处访问 Smark 官网 - HaroopadHaroopad 覆盖三大主流桌面系统，支持 Windows、OS X 和 Linux，多种主题样式供你选择，语法标亮支持 54 种编程语言，该工具重点推荐 Ubuntu/Linux 用户使用，点击此处访问 Haroopad 官网 - TyporaTypora 同样支持 Windows、OS X 和 Linux，Typora 支持即时渲染技术，这也是与其他 Markdown 编辑器最显著的区别，支持数学编辑，可与 Word 直接格式转换，在 Pandoc 的支持下进行多种文档格式转换，Typora 适合那些对码字手速和排版顺畅度有要求的人群，譬如码农、网站小编等，点击此处访问 Typora 官网 - CuteMarkEdCuteMarkEd 是一个基于qt5的跨平台的 Markdown 编辑器，开源的， 提供实时 HTML 预览、数学表达式、源码高亮和PDF导出，点击此处 访问 CuteMarkEd 官网 - MarkPadMarkPad 是款开源的 Markdown 编辑器，与 Window 8 风格和谐友好的界面，可以直接在你的博客或者 GitHub 中打开、保存文档，直接将图片粘贴到 Markdown 文档中，点击此处访问 MarkPad 官网 - Cmd Markdown作业部落出品，是一款不错的工具和博客平台兼顾的产品，同时支持 Linux、Mac 和 Windows 操作系统，此外还提供 Web 在线创作，社交化批注、智能云同步，最简单的方法，满足多种写作需要，点击此处访问 Cmd Markdown 官网 - FarBox同样是一款不错的 Markdown 编辑器和博客平台兼顾的产品，让用户通过Dropbox（现在默认是自己的同步服务器）直接建立个人网站。FarBox编辑器免费，同时支持 Linux、Mac 和 Windows 操作系统，Farbox服务可以免费试用，在本地编辑器内写作自动同步发布在个人博客，对于希望有个人博客但却不愿折腾的小白来说，是个不错的选择，点击此处访问 FarBox 官网 - MiuMiu 是一款 Windows 下的 Markdown 编辑器，支持 Markdown 高亮、代码高亮、即时预览，以及可以快速发布到 Github Gist，小众软件，界面美观，已经找不到官网了，小众软件网有提供百度云下载，Miu 下载地址 - MacDownMacDown 引用了许多 Mou 的设计方式，仅支持 Mac ，开源免费，点击此处访问 MacDown 官网 - Ulysses一款由国外开发商 The Soulmen 制作的 Markdown 编辑器。与其它同类应用相比，Ulysses 最大的不同在于，它能根据内置的文件管理器，以及与 iCloud 云服务器的实时同步方案，达到最快捷的文章整理效率，支持OS X , iPad，26人民币每月，14天免费试用，点击此处访问 Ulysses 官网 - Byword一款轻量级的 Markdown 编辑器，支持Mac，iPhone和iPad，界面极简，功能强大，貌似要付费使用，点击此处 访问 Byword 官网 - Visual Studio CodeVisual Studio Code 是微软推出一款轻量级的文本编辑工具，类似于 Sublime，它已经默认集成 Markdown 文档编辑插件，原生就支持高亮 Markdown 的语法，但想要实时预览还需要选择 Markdown: Open Preview to the Side 命令实现，相关教程请点击此处，点击此处 访问 Visual Studio Code 官网 - MarxicoMarxico 中文名马克飞象，提供桌面客户端以及离线 Chrome App，支持移动端 Web，可以直接把文本存到印象笔记，点击此处访问 Marxico，点击此处访问 马克飞象 - MaHua一个在线编辑 Markdown 文档的编辑器，小众软件，VIM 快捷键支持，完美兼容 Github 的 Markdown 语法，界面稍许简陋，点击此处访问 MaHua - Dillinger来自国外的 Markdown 编辑器，漂亮强大，支持md、 html、pdf 文件导出，支持Dropbox、Github、Google Drive、Onedrive 一键保存，点击此处访问 Dillinger - 简书简书是一个优质的创作社区，你可以在线创作并发表到社区，是国内优质原创内容输出平台，简书从一开始就已经支持 Markdown 和富文本编辑，是一个为专门为作者打造的平台，点击此处访问简书官网 要细数 Markdown 编辑器的话，可能永远也数不尽，但最有质量的也就那么几个，而且每个人的看法也不同，正所谓萝卜白菜各有所爱，什么编辑器不是最重要的，重要的是我们能写出优质的文章，不断学习进步！不断提升自我！ 参考资料：《好用的Markdown编辑器一览》（By：月光）《10款流行的Markdown编辑器，总有一款适合你》（By：xiaoxiao_engineer）《解决作者们的焦虑：7 款优秀 Markdown 编辑工具推荐》（By：JailJT）","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"Markdown","slug":"Markdown","permalink":"http://yoursite.com/tags/Markdown/"},{"name":"编辑器","slug":"编辑器","permalink":"http://yoursite.com/tags/编辑器/"}]},{"title":"Hexo 博客主题个性化","slug":"Hexo 博客主题个性化","date":"2018-08-27T13:25:24.452Z","updated":"2018-09-06T14:59:49.791Z","comments":true,"path":"2018/08/27/Hexo 博客主题个性化/","link":"","permalink":"http://yoursite.com/2018/08/27/Hexo 博客主题个性化/","excerpt":"","text":"本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 spfk 主题为例） – 添加评论系统 主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统 进入来必力官网，注册一个账号（注册时可能需要翻墙） 注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码 我们打开主题文件下的 _config.yml 文件，添加如下代码： 在 \\themes\\hexo-theme-spfk\\layout\\_partial\\comments 文件夹下新建一个 livere.ejs 的文件，在里面填写来必力提供的代码： &lt;!-- 来必力City版安装代码 --&gt; &lt;div id=&quot;lv-container&quot; data-id=&quot;city&quot; data-uid=&quot;这里是你的uid&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt; (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === &apos;function&apos;) { return; } j = d.createElement(s); j.src = &apos;https://cdn-city.livere.com/js/embed.dist.js&apos;; j.async = true; e.parentNode.insertBefore(j, e); })(document, &apos;script&apos;); &lt;/script&gt; &lt;noscript&gt;为正常使用来必力评论功能请激活JavaScript&lt;/noscript&gt; &lt;/div&gt; &lt;!-- City版安装代码已完成 --&gt; 打开 \\themes\\hexo-theme-spfk\\layout\\_partial\\article.ejs 文件，在适当位置添加如下红框中的代码： 完成以上操作之后，我们就可以使用来必力评论系统了 – 添加卡通人物 我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！点击此处进入该项目地址 输入如下命令获取 live2d ： $ npm install --save hexo-helper-live2d 输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客 $ npm install packagename 打开站点目录下的 _config.yml 文件，添加如下代码： live2d: enable: true scriptFrom: local model: use: live2d-widget-model-haruto #模型选择 display: position: right #模型位置 width: 150 #模型宽度 height: 300 #模型高度 mobile: show: false #是否在手机端显示 设置好过后我们就拥有了一个卡通人物 – 添加鼠标点击爱心效果 在 /themes/hexo-theme-spfk/source/js 下新建文件 love.js，在 love.js 文件中添加以下代码： 1!function(e,t,a)&#123;function n()&#123;c(\".heart&#123;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);&#125;.heart:after,.heart:before&#123;content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;&#125;.heart:after&#123;top: -5px;&#125;.heart:before&#123;left: -5px;&#125;\"),o(),r()&#125;function r()&#123;for(var e=0;e&lt;d.length;e++)d[e].alpha&lt;=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText=\"left:\"+d[e].x+\"px;top:\"+d[e].y+\"px;opacity:\"+d[e].alpha+\";transform:scale(\"+d[e].scale+\",\"+d[e].scale+\") rotate(45deg);background:\"+d[e].color+\";z-index:99999\");requestAnimationFrame(r)&#125;function o()&#123;var t=\"function\"==typeof e.onclick&amp;&amp;e.onclick;e.onclick=function(e)&#123;t&amp;&amp;t(),i(e)&#125;&#125;function i(e)&#123;var a=t.createElement(\"div\");a.className=\"heart\",d.push(&#123;el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()&#125;),t.body.appendChild(a)&#125;function c(e)&#123;var a=t.createElement(\"style\");a.type=\"text/css\";try&#123;a.appendChild(t.createTextNode(e))&#125;catch(t)&#123;a.styleSheet.cssText=e&#125;t.getElementsByTagName(\"head\")[0].appendChild(a)&#125;function s()&#123;return\"rgb(\"+~~(255*Math.random())+\",\"+~~(255*Math.random())+\",\"+~~(255*Math.random())+\")\"&#125;var d=[];e.requestAnimationFrame=function()&#123;return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e)&#123;setTimeout(e,1e3/60)&#125;&#125;(),n()&#125;(window,document); 在 \\themes\\hexo-theme-spfk-x\\layout\\layout.ejs 文件末尾添加以下代码： 12&lt;!-- 页面点击小红心 --&gt;&lt;script type=\"text/javascript\" src=\"/js/love.js\"&gt;&lt;/script&gt; 完成以上操作后，当我们点击鼠标的时候就可以看见爱心的特效了 – 添加字数统计和阅读时长 先在博客目录下执行以下命令安装 hexo-wordcount 插件：1$ npm i --save hexo-wordcount 之后在 \\themes\\hexo-theme-spfk-x\\layout\\_partial\\post 目录下创建 word.ejs 文件，在 word.ejs 文件中写入以下代码： 123456789101112131415161718&lt;div style=\"margin-top:10px;\"&gt; &lt;span class=\"post-time\"&gt; &lt;span class=\"post-meta-item-icon\"&gt; &lt;i class=\"fa fa-keyboard-o\"&gt;&lt;/i&gt; &lt;span class=\"post-meta-item-text\"&gt; 字数统计: &lt;/span&gt; &lt;span class=\"post-count\"&gt;&lt;%= wordcount(post.content) %&gt;字&lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;span class=\"post-time\"&gt; &amp;nbsp; | &amp;nbsp; &lt;span class=\"post-meta-item-icon\"&gt; &lt;i class=\"fa fa-hourglass-half\"&gt;&lt;/i&gt; &lt;span class=\"post-meta-item-text\"&gt; 阅读时长: &lt;/span&gt; &lt;span class=\"post-count\"&gt;&lt;%= min2read(post.content) %&gt;分&lt;/span&gt; &lt;/span&gt; &lt;/span&gt;&lt;/div&gt; 然后在 \\themes\\hexo-theme-spfk-x\\layout\\_partial\\article.ejs 中适当位置添加以下代码： 最后在主题目录下的 _config.yml 添加以下配置 1word_count: true 如果显示的位置不好，可以自行更改其位置，成功配置后的效果如下： – 添加背景音乐 打开网页版网易云音乐，选择你准备添加的背景音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码 然后将此代码放到你想要放的地方，比如放在博客的左侧，则打开 \\themes\\hexo-theme-spfk-x\\layout\\_partial\\left-col.ejs 文件，将复制的HTML代码粘贴进去，再进行适当的位置设置让播放器更美观，其中 auto=1 表示打开网页自动播放音乐，auto=0 表示关闭自动播放音乐 最后效果如下： – 添加网站运行时间 一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的在 \\themes\\hexo-theme-spfk-x\\layout\\_partial\\footer.ejs 文件下添加以下代码： 1234567891011121314151617&lt;span id=\"timeDate\"&gt;载入天数...&lt;/span&gt;&lt;span id=\"times\"&gt;载入时分秒...&lt;/span&gt;&lt;script&gt; var now = new Date(); function createtime() &#123; var grt= new Date(\"08/10/2018 17:38:00\");//在此处修改你的建站时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 )&#123;hnum = \"0\" + hnum;&#125; minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 )&#123;mnum = \"0\" + mnum;&#125; seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 )&#123;snum = \"0\" + snum;&#125; document.getElementById(\"timeDate\").innerHTML = \"本站已安全运行 \"+dnum+\" 天 \"; document.getElementById(\"times\").innerHTML = hnum + \" 小时 \" + mnum + \" 分 \" + snum + \" 秒\"; &#125; setInterval(\"createtime()\",250);&lt;/script&gt; 最后效果如下：","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"主题个性化","slug":"主题个性化","permalink":"http://yoursite.com/tags/主题个性化/"},{"name":"Hexo","slug":"Hexo","permalink":"http://yoursite.com/tags/Hexo/"}]},{"title":"Markdown 语法&技巧总结","slug":"Markdown 语法&技巧总结","date":"2018-08-25T09:57:16.879Z","updated":"2018-09-06T14:59:45.830Z","comments":true,"path":"2018/08/25/Markdown 语法&技巧总结/","link":"","permalink":"http://yoursite.com/2018/08/25/Markdown 语法&技巧总结/","excerpt":"","text":"在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！ – 插入图片 如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，比如上面的图片代码如下： 1![车](https://i.imgur.com/UyEXrBi.jpg) – 插入音乐 打开网页版网易云音乐，选择你准备插入的音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码 然后将此HTML代码粘贴到你想要放的地方，可自行调节播放器的大小，其中 auto=1 表示打开网页自动播放音乐，auto=0 表示关闭自动播放音乐，比如See You Again (中英文版) - 罗艺恒这首歌曲代码如下： 1&lt;iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=330 height=86 src=\"//music.163.com/outchain/player?type=2&amp;id=32405683&amp;auto=1&amp;height=66\"&gt;&lt;/iframe&gt; – 插入视频 高考毕业了我们为下一届的学弟学妹们录制高考加油视频，我担任后期制作，在这里就以该视频为例٩(๑❛ᴗ❛๑)۶，在腾讯视频播放页面找到分享按钮，复制该视频的通用代码（其他视频播放平台也一样）,粘贴到文章中对应位置即可，可根据情况调整视频播放器的大小 1&lt;iframe frameborder=\"0\" width=\"1040\" height=\"700\" src=\"https://v.qq.com/txp/iframe/player.html?vid=x0643zvgtf7\" allowFullScreen=\"true\"&gt;&lt;/iframe&gt;","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"Markdown","slug":"Markdown","permalink":"http://yoursite.com/tags/Markdown/"},{"name":"技巧","slug":"技巧","permalink":"http://yoursite.com/tags/技巧/"}]},{"title":"如何使用 Github Pages 和 Hexo 搭建自己的独立博客","slug":"如何使用Github Pages和Hexo搭建自己独立博客","date":"2018-08-15T13:34:58.325Z","updated":"2018-08-29T15:17:51.644Z","comments":true,"path":"2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/","link":"","permalink":"http://yoursite.com/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/","excerpt":"","text":"– 前言首先感谢您能访问我的博客：TRHX’Blog 这是一篇有关如何使用 Github Pages 和 Hexo 搭建属于自己独立博客的详尽教程，本人是软件工程专业本科生，目前只学习了C和C++编程语言，对网站开发的有关知识几乎为零，这也是我搭建好自己的博客之后写的第一篇博客，刚开始搭建博客的时候自己也是网上各种百度，由于自己属于小白那种，历经了千辛万苦才弄好，所以借这个机会写一篇小白真正能看懂的博客搭建教程，教你一步一步走向成功的彼岸！ 推荐文章： 《我为什么写博客》 （By 知明所以） 《为什么你应该（从现在开始就）写博客》 (By 刘未鹏 | Mind Hacks) – 入门 Github Pages Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。 Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 – 安装 Node.js点击此处访问官网，按需下载相应版本，默认安装可以了 注：本人在安装过程中出现了Warning 1909,无法创建快捷方式，这种情况很少出现，如果在安装过程中也有这种情况请参考百度文库（win10系统实测可行）：《Win7安装程序警告1909无法创建快捷方式》 – 安装 Git点击此处访问官网，按需下载相应版本，默认安装即可 参考资料：《如何在windows下安装GIT》 （By 俊雨廷休） 《Pro Git（中文版）》 – 检验软件是否安装成功同时按下 Win 键和 R 键打开运行窗口,输入 cmd ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装，此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 Git GUI Here 和 Git Bash Here两个选项，第一个是图形界面的Git操作，另一个是命令行 $ git --version $ node -v $ npm -v – Hexo 安装选择一个磁盘，新建一个文件夹，自己重命名文件夹（如：我的文件夹为：Ｅ\\TRHX_Blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装，第一个命令表示安装 hexo，第二个命令表示安装 hexo 部署到 git page 的 deployer，如图所示即为安装成功 $ npm install hexo-cli -g $ npm install hexo-deployer-git --save – Hexo 初始化配置在刚才新建的文件夹里面再次新建一个 Hexo 文件夹（如：我的文件夹为：E\\TRHX_Blog\\Hexo）,进入该 Hexo 文件夹右键鼠标，点击 Git Bash Here，输入以下命令，如图所示则安装成功 $ hexo init Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下： – 本地查看效果执行以下命令，执行完即可登录 http://localhost:4000/ 查看效果 $ hexo generate $ hexo server 显示以下信息说明操作成功： INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 登录 http://localhost:4000/ 查看效果： – 将博客部署到 Github Pages 上到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到Github Pages上 一、注册 Github 账户：点击此处访问 Github 官网，点击 Sign Up 注册账户 二、创建项目代码库：点击 New repository 开始创建，步骤及注意事项见图： 三、配置 SSH 密钥：只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，在你第一次新建的文件夹里面（如：我的文件夹为：Ｅ\\TRHX_Blog） Git Bash Here 输入以下命令： $ ssh-keygen -t rsa -C &quot;your email@example.com&quot; //引号里面填写你的邮箱地址，比如我的是tanrenhou@126.com 之后会出现： Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): //到这里可以直接回车将密钥按默认文件进行存储 然后会出现： Enter passphrase (empty for no passphrase): //这里是要你输入密码，其实不需要输什么密码，直接回车就行 Enter same passphrase again: 接下来屏幕会显示： Your identification has been saved in /c/Users/you/.ssh/id_rsa. Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub. The key fingerprint is: 这里是各种字母数字组成的字符串，结尾是你的邮箱 The key&apos;s randomart image is: 这里也是各种字母数字符号组成的字符串 运行以下命令，将公钥的内容复制到系统粘贴板上 $ clip &lt; ~/.ssh/id_rsa.pub 四、在 GitHub 账户中添加你的公钥 1.登陆 GitHub，进入 Settings： 2.点击 SSH and GPG Keys： 3.选择 New SSH key： 4.粘贴密钥： 五、测试 输入以下命令：注意：git@github.com不要做任何更改！ $ ssh -T git@github.com 之后会显示： 输入 yes 后会显示： 此时表示设置正确 六、配置 Git 个人信息 Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致 $ git config --global user.name &quot;此处填你的用户名&quot; $ git config --global user.email &quot;此处填你的邮箱&quot; 到此为止 SSH Key 配置成功，本机已成功连接到 Github – 将本地的 Hexo 文件更新到 Github 的库中一、登录 Github 打开自己的项目 your name.github.io 二、鼠标移到 Clone or download 按钮，选择 Use SSH 三、一键复制地址 四、打开你创建的 Hexo 文件夹（如：E:\\TRHX_Blog\\Hexo），右键用记事本（或者Notepad++）打开该文件夹下的 _config.yml 文件 五、按下图修改 _config.yml 文件并保存 六、在 Hexo 文件夹下分别执行以下命令 $ hexo g $ hexo d 或者直接执行 $ hexo g -d 执行完之后会让你输入你的 Github 的账号和密码，如果此时报以下错误，说明你的 deployer 没有安装成功 ERROR Deployer not found: git 需要执行以下命令再安装一次： npm install hexo-deployer-git --save 再执行 hexo g -d，你的博客就会部署到 Github 上了 七、访问博客 你的博客地址：https://你的用户名.github.io，比如我的是：https://trhx.github.io ,现在每个人都可以通过此链接访问你的博客了 – 如何在博客上发表文章博客已经成功搭建了，但是我们该怎么写博客呢？ 一、新建一个空文章，输入以下命令，会在项目 \\Hexo\\source\\_posts 中生成 文章标题.md 文件，文章标题根据需要命名 $ hexo n &quot;文章标题&quot; 也可以直接在 \\Hexo\\source\\_posts 目录下右键鼠标新建文本文档，改后缀为 .md 即可，这种方法比较方便 二、用编辑器编写文章 md 全称 Markdown， Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后保存文件到 \\Hexo\\source\\_posts 文件夹下即可推荐 Windows 上使用 MarkdownPad2 编辑器，macOS 上使用 Mou 编辑器，Linux 上使用 Remarkable编辑器，Web 端上使用简书 当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上 $ hexo g $ hexo d 或者将两个命令合二为一输入以下命令： $ hexo d -g 现在访问你的博客就可以看见写好的文章啦！ 参考资料：《10款流行的Markdown编辑器》 （By xiaoxiao_engineer） 《献给写作者的 Markdown 新手指南》 （By 简书） 《认识与入门 Markdown》 （By Te_Lee） 《markdown简明语法》 （By 不如） 《markdown基本语法》 （By 高鸿祥） 《Markdown 公式指导手册》 （By Harries） – 如何为博客更换自己喜欢的主题博客也搭建好了，文章也会写了，但是！！！默认的主题并不喜欢怎么办？现在，我们就来为自己的博客更换自己喜欢的主题 点击此处进入 Hexo 官网的主题专栏，我们可以看见有许多的主题供我们选择 我们要做的就是把主题克隆过来，在此我们以主题 Aero-Dual 为例，点进去我们就可以看见该主题作者的博客，鼠标滑到底，我们可以看见 Theme By Levblanc 的字样（其他主题类似），点击作者 Levblanc ，页面就会跳转到该主题所有的相关文件在 Github 上的地址，复制该地址 再打开 Hexo 文件夹下的 themes 目录（如：E:\\TRHX_Blog\\Hexo\\themes），右键 Git Bash Here，输入以下命令： $ git clone 此处填写你刚才复制的主题地址 比如要安装 Aero-Dual 主题，则输入命令： $ git clone https://github.com/levblanc/hexo-theme-aero-dual 等待下载完成后即可在 themes 目录下生成 hexo-theme-aero-dual 文件夹，然后打开 Hexo 文件夹下的配置文件 _config.yml ，找到关键字 theme，修改参数为：theme：hexo-theme-aero-dual （其他主题修改成相应名称即可），再次注意冒号后面有一个空格！ 返回 Hexo 目录，右键 Git Bash Here ，输入以下命令开始部署主题： $ hexo g $ hexo s 此时打开浏览器，访问 http://localhost:4000/ 就可看见我们的主题已经更换了，如果感觉效果满意，我们就可以把它部署到Github上了 打开 Hexo 文件夹，右键 Git Bash Here ，输入以下命令： $ hexo clean //该命令的作用是清除缓存，若不输入此命令，服务器有可能更新不了主题 $ hexo g -d 此时访问自己的博客即可看见更换后的主题，但我们仍然需要对主题的相关配置进行修改，比如网站标题，图标等等，Hexo 中有两份主要的配置文件，名称都是 _config.yml ，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的：E:\\TRHX_Blog\\Hexo\\_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主题目录下（比如我的：E:\\TRHX_Blog\\Hexo\\themes\\hexo-theme-aero-dual\\_config.yml），这份配置由主题作者提供，主要用于配置主题相关的选项，一般 _config.yml 文件里都有相关注释，按需修改即可 参考资料：《有哪些好看的 Hexo 主题？》 （知乎） 《Hexo | 配置》 （Hexo官方文档） 《hexo常用命令笔记》 （By 小弟调调） – 为你的 Hexo 博客配置个性域名本人在配置域名的时候问题百出，百度的各种方法都不管用，打开网站总是 404，可能是我太笨了 o(╥﹏╥)o ，不过好在后来终于解决了这个问题 首先我们要购买域名，阿里云，腾讯云都可以，也不贵，一年几十块钱，最便宜几块钱也能买到，以阿里云为例，我购买的域名是 trhx.top，购买过程就不赘述了，选择阿里云的解析平台，来到阿里云的管理控制台，点击进入域名解析列表或者直接点击域名后面的解析 点击添加记录，需要添加两个记录，两个记录类型都是 CNAME ，记录值都是填你自己的博客地址（比如我的是：trhx.github.io），第一个主机记录为 @ ，第二个主机记录为 www ,保存之后域名解析就完成了！ 【注：百度大多数方法是这样的：两个记录类型为 A ，记录值都为博客的 IP 地址，IP 地址可以 cmd 中输入 ping 你的博客地址 获得（比如我的：ping trhx.github.io），但我尝试这种方法并没有成功，目前也不知道具体原因，强调一下，我还是这方面小白！小白！小白！所以不太懂，欢迎大佬来指点！】 为了使 GitHub 接收我们的域名，还需要在博客的根目录下添加一个名为 CNAME 的文件（注意不要加.txt，没有任何后缀名！），这个文件放到 Hexo 文件夹的 source 里面，（比如我的是：E:\\TRHX_Blog\\Hexo\\source），文件里面填写你的域名（去掉www），比如要填写我的域名，文件里面就放一句话：trhx.top，经过以上操作，别人就可以通过 www.trhx.top 、trhx.top 、trhx.github.io 三个当中任意一个访问我的博客了！你的也一样！ 如果你在其他平台购买域名，或者选择 DNSPod 等其他域名解析，操作方法大同小异，遇到问题可自行百度解决！ 参考资料：《推荐几家域名注册服务商》 （By Jelly Bool） 《盘点十大免费DNS域名解析服务：稳定、可靠》 – 结语一顿操作下来虽然有点儿累，但看见拥有了自己的博客还是非常有成就感的，人生就是需要折腾，那么现在就开始你的创作之旅吧！文章的不断积累，你会从中受益很多的！另外，这是一篇小白写的适用于小白的博客搭建教程，比较详细，有这方面基础的可以百度有简略一点儿的教程，文中如有错误还请大佬指出改正！文中涉及参考资料如有侵权请联系我删除！","categories":[{"name":"实用教程","slug":"实用教程","permalink":"http://yoursite.com/categories/实用教程/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"http://yoursite.com/tags/Hexo/"},{"name":"Github Pages","slug":"Github-Pages","permalink":"http://yoursite.com/tags/Github-Pages/"}]},{"title":"本站镇站之宝","slug":"博客镇站之宝","date":"2018-08-10T09:38:00.000Z","updated":"2018-08-29T15:17:59.198Z","comments":true,"path":"2018/08/10/博客镇站之宝/","link":"","permalink":"http://yoursite.com/2018/08/10/博客镇站之宝/","excerpt":"","text":"人类的幸福和欢乐在于奋斗，而最有价值的是为理想而奋斗！ ———— 苏格拉底Human happiness and joy lie in struggle, and what is most valuable is striving for ideals! ———— Socrates","categories":[{"name":"励志视频","slug":"励志视频","permalink":"http://yoursite.com/categories/励志视频/"}],"tags":[{"name":"梦想","slug":"梦想","permalink":"http://yoursite.com/tags/梦想/"},{"name":"人生","slug":"人生","permalink":"http://yoursite.com/tags/人生/"}]}]}
\ No newline at end of file
index.html
浏览文件 @ 91b3f32e
......@@ -264,6 +264,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">2,188字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">8分</span>
</span>
</span>
</div>
</div>
</header>
......@@ -331,13 +354,36 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">1,627字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">7分</span>
</span>
</span>
</div>
</div>
</header>
<div class="article-entry" itemprop="articleBody">
Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客
Hexo 博客主题的美化，添加一些实用功能，定制你的专属博客【持续更新】
......@@ -398,6 +444,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">439字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">2分</span>
</span>
</span>
</div>
</div>
</header>
......@@ -465,6 +534,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">3,575字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">13分</span>
</span>
</span>
</div>
</div>
</header>
......@@ -532,6 +624,29 @@
</h1>
<div style="position:absolute; top:90px; left:30px">
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count">46字</span>
</span>
</span>
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count">1分</span>
</span>
</span>
</div>
</div>
</header>
......@@ -578,65 +693,6 @@
<article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018/08/10/hello-world/" class="article-date">
<time datetime="2018-08-10T09:33:18.448Z" itemprop="datePublished">2018-08-10</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018/08/10/hello-world/">Hello World</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a href="/2018/08/10/hello-world/#more">阅读全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
</div>
<footer id="footer">
......
search.xml
浏览文件 @ 91b3f32e
......@@ -29,7 +29,7 @@
<title>Hexo 博客主题个性化</title>
<link href="/2018/08/27/Hexo%20%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96/"/>
<url>/2018/08/27/Hexo%20%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><font color="#4094C7" size="4"><br><strong>本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 <a href="https://github.com/luuman/hexo-theme-spfk" target="_blank" rel="noopener">spfk</a> 主题为例）</strong><br></font><hr><h1 id="–-添加评论系统"><a href="#–-添加评论系统" class="headerlink" title=" – 添加评论系统 "></a><font color="#FF0000"> – 添加评论系统 </font></h1><p>主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统</p><p>进入<a href="https://livere.com" target="_blank" rel="noopener">来必力官网</a>，注册一个账号（注册时可能需要翻墙）<br><br></p><p><img src="https://i.imgur.com/mNjUFeP.png" alt=""> </p><p><br><br>注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码<br><br></p><p><img src="https://i.imgur.com/I3DXQMC.png" alt=""></p><p><img src="https://i.imgur.com/GUROoY0.png" alt=""></p><p><img src="https://i.imgur.com/sCi7KKc.png" alt=""> </p><p><br><br>我们打开主题文件下的 <font color="#FF0000">_config.yml</font> 文件，添加如下代码：<br><br></p><p><img src="https://i.imgur.com/Lwfd9pZ.png" alt=""> </p><p><br><br>在 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\comments</font> 文件夹下新建一个 <font color="#FF0000">livere.ejs</font> 的文件，在里面填写来必力提供的代码：</p><pre><code>&lt;!-- 来必力City版安装代码 --&gt;&lt;div id=&quot;lv-container&quot; data-id=&quot;city&quot; data-uid=&quot;这里是你的uid&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt; (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === &apos;function&apos;) { return; } j = d.createElement(s); j.src = &apos;https://cdn-city.livere.com/js/embed.dist.js&apos;; j.async = true; e.parentNode.insertBefore(j, e); })(document, &apos;script&apos;);&lt;/script&gt;&lt;noscript&gt;为正常使用来必力评论功能请激活JavaScript&lt;/noscript&gt;&lt;/div&gt;&lt;!-- City版安装代码已完成 --&gt;</code></pre><p>打开 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\article.ejs </font>文件，在适当位置添加如下红框中的代码： </p><p><br><br><img src="https://i.imgur.com/OgKwuQY.png" alt=""> </p><p><br><br>完成以上操作之后，我们就可以使用来必力评论系统了<br><br></p><p><img src="https://i.imgur.com/9oCg3Gx.png" alt=""><br><br></p><hr><h1 id="–-添加卡通人物"><a href="#–-添加卡通人物" class="headerlink" title=" – 添加卡通人物 "></a><font color="#FF000"> – 添加卡通人物 </font></h1><p>我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！<a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">点击此处</a>进入该项目地址 </p><p>输入如下命令获取 live2d ：</p><pre><code>$ npm install --save hexo-helper-live2d </code></pre><p>输入以下命令，下载相应的模型，将 <font color="#FF0000">packagename</font> 更换成模型名称即可，更多模型选择请<a href="https://github.com/xiazeyu/live2d-widget-models" target="_blank" rel="noopener">点击此处</a>，各个模型的预览请<a href="https://huaji8.top/post/live2d-plugin-2.0/" target="_blank" rel="noopener">访问原作者的博客</a> </p><pre><code>$ npm install packagename</code></pre><p>打开站点目录下的 <font color="#FF0000">_config.yml</font> 文件，添加如下代码： </p><pre><code>live2d: enable: true scriptFrom: local model: use: live2d-widget-model-haruto #模型选择 display: position: right #模型位置 width: 150 #模型宽度 height: 300 #模型高度 mobile: show: false #是否在手机端显示</code></pre><p>设置好过后我们就拥有了一个卡通人物<br><br></p><p><img src="https://i.imgur.com/LI7iFxx.png" alt=""></p>]]></content>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><font color="#4094C7" size="4"><br><strong>本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 <a href="https://github.com/luuman/hexo-theme-spfk" target="_blank" rel="noopener">spfk</a> 主题为例）</strong><br></font><hr><h1 id="–-添加评论系统"><a href="#–-添加评论系统" class="headerlink" title=" – 添加评论系统 "></a><font color="#FF0000"> – 添加评论系统 </font></h1><p><br></p><p>主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统</p><p>进入<a href="https://livere.com" target="_blank" rel="noopener">来必力官网</a>，注册一个账号（注册时可能需要翻墙） </p><p><img src="https://i.imgur.com/mNjUFeP.png" alt=""> </p><p><br><br>注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码<br><br></p><p><img src="https://i.imgur.com/I3DXQMC.png" alt=""></p><p><img src="https://i.imgur.com/GUROoY0.png" alt=""></p><p><img src="https://i.imgur.com/sCi7KKc.png" alt=""> </p><p><br><br>我们打开主题文件下的 <font color="#FF0000">_config.yml</font> 文件，添加如下代码：<br><br></p><p><img src="https://i.imgur.com/Lwfd9pZ.png" alt=""> </p><p>在 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\comments</font> 文件夹下新建一个 <font color="#FF0000">livere.ejs</font> 的文件，在里面填写来必力提供的代码：</p><pre><code>&lt;!-- 来必力City版安装代码 --&gt;&lt;div id=&quot;lv-container&quot; data-id=&quot;city&quot; data-uid=&quot;这里是你的uid&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt; (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === &apos;function&apos;) { return; } j = d.createElement(s); j.src = &apos;https://cdn-city.livere.com/js/embed.dist.js&apos;; j.async = true; e.parentNode.insertBefore(j, e); })(document, &apos;script&apos;);&lt;/script&gt;&lt;noscript&gt;为正常使用来必力评论功能请激活JavaScript&lt;/noscript&gt;&lt;/div&gt;&lt;!-- City版安装代码已完成 --&gt;</code></pre><p>打开 <font color="#FF0000">\themes\hexo-theme-spfk\layout\_partial\article.ejs </font>文件，在适当位置添加如下红框中的代码： </p><p><img src="https://i.imgur.com/OgKwuQY.png" alt=""> </p><p><br><br>完成以上操作之后，我们就可以使用来必力评论系统了<br><br></p><p><img src="https://i.imgur.com/9oCg3Gx.png" alt=""><br><br></p><hr><p><br></p><h1 id="–-添加卡通人物"><a href="#–-添加卡通人物" class="headerlink" title=" – 添加卡通人物 "></a><font color="#FF000"> – 添加卡通人物 </font></h1><p><br></p><p>我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！<a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">点击此处</a>进入该项目地址 </p><p>输入如下命令获取 live2d ：</p><pre><code>$ npm install --save hexo-helper-live2d </code></pre><p>输入以下命令，下载相应的模型，将 <font color="#FF0000">packagename</font> 更换成模型名称即可，更多模型选择请<a href="https://github.com/xiazeyu/live2d-widget-models" target="_blank" rel="noopener">点击此处</a>，各个模型的预览请<a href="https://huaji8.top/post/live2d-plugin-2.0/" target="_blank" rel="noopener">访问原作者的博客</a> </p><pre><code>$ npm install packagename</code></pre><p>打开站点目录下的 <font color="#FF0000">_config.yml</font> 文件，添加如下代码： </p><pre><code>live2d: enable: true scriptFrom: local model: use: live2d-widget-model-haruto #模型选择 display: position: right #模型位置 width: 150 #模型宽度 height: 300 #模型高度 mobile: show: false #是否在手机端显示</code></pre><p>设置好过后我们就拥有了一个卡通人物<br><br></p><p><img src="https://i.imgur.com/LI7iFxx.png" alt=""><br><br></p><h1 id="–-添加鼠标点击爱心效果"><a href="#–-添加鼠标点击爱心效果" class="headerlink" title=" – 添加鼠标点击爱心效果 "></a><font color="#FF0000"> – 添加鼠标点击爱心效果 </font></h1><p><br></p><p>在<font color="#FF0000"> /themes/hexo-theme-spfk/source/js</font> 下新建文件 <font color="#FF0000">love.js</font>，在 <font color="#FF0000">love.js</font> 文件中添加以下代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">!<span class="function"><span class="keyword">function</span>(<span class="params">e,t,a</span>)</span>&#123;<span class="function"><span class="keyword">function</span> <span class="title">n</span>(<span class="params"></span>)</span>&#123;c(<span class="string">".heart&#123;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);&#125;.heart:after,.heart:before&#123;content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;&#125;.heart:after&#123;top: -5px;&#125;.heart:before&#123;left: -5px;&#125;"</span>),o(),r()&#125;<span class="function"><span class="keyword">function</span> <span class="title">r</span>(<span class="params"></span>)</span>&#123;<span class="keyword">for</span>(<span class="keyword">var</span> e=<span class="number">0</span>;e&lt;d.length;e++)d[e].alpha&lt;=<span class="number">0</span>?(t.body.removeChild(d[e].el),d.splice(e,<span class="number">1</span>)):(d[e].y--,d[e].scale+=<span class="number">.004</span>,d[e].alpha-=<span class="number">.013</span>,d[e].el.style.cssText=<span class="string">"left:"</span>+d[e].x+<span class="string">"px;top:"</span>+d[e].y+<span class="string">"px;opacity:"</span>+d[e].alpha+<span class="string">";transform:scale("</span>+d[e].scale+<span class="string">","</span>+d[e].scale+<span class="string">") rotate(45deg);background:"</span>+d[e].color+<span class="string">";z-index:99999"</span>);requestAnimationFrame(r)&#125;<span class="function"><span class="keyword">function</span> <span class="title">o</span>(<span class="params"></span>)</span>&#123;<span class="keyword">var</span> t=<span class="string">"function"</span>==<span class="keyword">typeof</span> e.onclick&amp;&amp;e.onclick;e.onclick=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;t&amp;&amp;t(),i(e)&#125;&#125;<span class="function"><span class="keyword">function</span> <span class="title">i</span>(<span class="params">e</span>)</span>&#123;<span class="keyword">var</span> a=t.createElement(<span class="string">"div"</span>);a.className=<span class="string">"heart"</span>,d.push(&#123;<span class="attr">el</span>:a,<span class="attr">x</span>:e.clientX<span class="number">-5</span>,<span class="attr">y</span>:e.clientY<span class="number">-5</span>,<span class="attr">scale</span>:<span class="number">1</span>,<span class="attr">alpha</span>:<span class="number">1</span>,<span class="attr">color</span>:s()&#125;),t.body.appendChild(a)&#125;<span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params">e</span>)</span>&#123;<span class="keyword">var</span> a=t.createElement(<span class="string">"style"</span>);a.type=<span class="string">"text/css"</span>;<span class="keyword">try</span>&#123;a.appendChild(t.createTextNode(e))&#125;<span class="keyword">catch</span>(t)&#123;a.styleSheet.cssText=e&#125;t.getElementsByTagName(<span class="string">"head"</span>)[<span class="number">0</span>].appendChild(a)&#125;<span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span><span class="string">"rgb("</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">","</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">","</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">")"</span>&#125;<span class="keyword">var</span> d=[];e.requestAnimationFrame=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span> e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;setTimeout(e,<span class="number">1e3</span>/<span class="number">60</span>)&#125;&#125;(),n()&#125;(<span class="built_in">window</span>,<span class="built_in">document</span>);</span><br></pre></td></tr></table></figure><p>在 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\layout.ejs</font> 文件末尾添加以下代码：</p><figure class="highlight xml"><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">&lt;!-- 页面点击小红心 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/love.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>完成以上操作后，当我们点击鼠标的时候就可以看见爱心的特效了</p><p><img src="https://i.imgur.com/ss300YU.png" alt=""></p><p><br></p><h1 id="–-添加字数统计和阅读时长"><a href="#–-添加字数统计和阅读时长" class="headerlink" title=" – 添加字数统计和阅读时长 "></a><font color="#FF0000"> – 添加字数统计和阅读时长 </font></h1><p><br></p><p>先在博客目录下执行以下命令安装 <font color="#FF0000">hexo-wordcount</font> 插件：<br><figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm i --<span class="keyword">save</span> hexo-<span class="built_in">wordcount</span></span><br></pre></td></tr></table></figure></p><p>之后在 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\_partial\post</font> 目录下创建 <font color="#FF0000">word.ejs</font> 文件，在 <font color="#FF0000">word.ejs</font> 文件中写入以下代码：</p><figure class="highlight erb"><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></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"margin-top:10px;"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-time"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-keyboard-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span> 字数统计: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span></span></span> wordcount(post.content) <span class="xml"><span class="tag">%&gt;</span>字<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-time"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> &amp;nbsp; | &amp;nbsp;</span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-hourglass-half"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span> 阅读时长: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span></span></span> min2read(post.content) <span class="xml"><span class="tag">%&gt;</span>分<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>然后在 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\_partial\article.ejs</font> 中适当位置添加以下代码：<br><img src="https://i.imgur.com/vWhZElo.png" alt=""></p><p>最后在主题目录下的 <font color="#FF0000">_config.yml</font> 添加以下配置</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">word_count:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>如果显示的位置不好，可以自行更改其位置，成功配置后的效果如下：<br><img src="https://i.imgur.com/gqs8NKL.png" alt=""><br><img src="https://i.imgur.com/om8pIL9.png" alt=""></p><p><br></p><h1 id="–-添加背景音乐"><a href="#–-添加背景音乐" class="headerlink" title=" – 添加背景音乐 "></a><font color="#FF0000"> – 添加背景音乐 </font></h1><p><br><br>打开网页版<a href="https://music.163.com/" target="_blank" rel="noopener">网易云音乐</a>，选择你准备添加的背景音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码<br><img src="https://i.imgur.com/6E1kQzO.png" alt=""><br><img src="https://i.imgur.com/uRdMA63.png" alt=""></p><p>然后将此代码放到你想要放的地方，比如放在博客的左侧，则打开 <font color="#FF0000">\themes\hexo-theme-spfk-x\layout\_partial\left-col.ejs</font> 文件，将复制的HTML代码粘贴进去，再进行适当的位置设置让播放器更美观，其中 <font color="#FF0000">auto=1</font> 表示打开网页自动播放音乐，<font color="#FF0000">auto=0</font> 表示关闭自动播放音乐<br><img src="https://i.imgur.com/7Cv1iFZ.png" alt=""></p><p>最后效果如下：<br><img src="https://i.imgur.com/JPh5epQ.png" alt=""></p><p><br></p><h1 id="–-添加网站运行时间"><a href="#–-添加网站运行时间" class="headerlink" title=" – 添加网站运行时间 "></a><font color="#FF0000"> – 添加网站运行时间 </font></h1><p><br><br>一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的<br>在 \themes\hexo-theme-spfk-x\layout\_partial\footer.ejs 文件下添加以下代码：</p><figure class="highlight xml"><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="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"timeDate"</span>&gt;</span>载入天数...<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"times"</span>&gt;</span>载入时分秒...<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>(); </span></span><br><span class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">createtime</span>(<span class="params"></span>) </span>&#123; </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> grt= <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"08/10/2018 17:38:00"</span>);<span class="comment">//在此处修改你的建站时间</span></span></span><br><span class="line"><span class="undefined"> now.setTime(now.getTime()+250); </span></span><br><span class="line"><span class="javascript"> days = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>; dnum = <span class="built_in">Math</span>.floor(days); </span></span><br><span class="line"><span class="javascript"> hours = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> - (<span class="number">24</span> * dnum); hnum = <span class="built_in">Math</span>.floor(hours); </span></span><br><span class="line"><span class="javascript"> <span class="keyword">if</span>(<span class="built_in">String</span>(hnum).length ==<span class="number">1</span> )&#123;hnum = <span class="string">"0"</span> + hnum;&#125; minutes = (now - grt ) / <span class="number">1000</span> /<span class="number">60</span> - (<span class="number">24</span> * <span class="number">60</span> * dnum) - (<span class="number">60</span> * hnum); </span></span><br><span class="line"><span class="javascript"> mnum = <span class="built_in">Math</span>.floor(minutes); <span class="keyword">if</span>(<span class="built_in">String</span>(mnum).length ==<span class="number">1</span> )&#123;mnum = <span class="string">"0"</span> + mnum;&#125; </span></span><br><span class="line"><span class="undefined"> seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); </span></span><br><span class="line"><span class="javascript"> snum = <span class="built_in">Math</span>.round(seconds); <span class="keyword">if</span>(<span class="built_in">String</span>(snum).length ==<span class="number">1</span> )&#123;snum = <span class="string">"0"</span> + snum;&#125; </span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"timeDate"</span>).innerHTML = <span class="string">"本站已安全运行 "</span>+dnum+<span class="string">" 天 "</span>; </span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"times"</span>).innerHTML = hnum + <span class="string">" 小时 "</span> + mnum + <span class="string">" 分 "</span> + snum + <span class="string">" 秒"</span>; </span></span><br><span class="line"><span class="undefined"> &#125; </span></span><br><span class="line"><span class="javascript">setInterval(<span class="string">"createtime()"</span>,<span class="number">250</span>);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>最后效果如下：<br><br><br><img src="https://i.imgur.com/pDR4xYb.png" alt=""></p>]]></content>
<categories>
......@@ -52,7 +52,7 @@
<title>Markdown 语法&amp;技巧总结</title>
<link href="/2018/08/25/Markdown%20%E8%AF%AD%E6%B3%95&amp;%E6%8A%80%E5%B7%A7%E6%80%BB%E7%BB%93/"/>
<url>/2018/08/25/Markdown%20%E8%AF%AD%E6%B3%95&amp;%E6%8A%80%E5%B7%A7%E6%80%BB%E7%BB%93/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p><font color="#4094C7" size="4"><br><strong>在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！</strong><br></font></p><hr><h1 id="–-插入图片"><a href="#–-插入图片" class="headerlink" title="– 插入图片"></a>– 插入图片</h1><p><img src="https://i.imgur.com/UyEXrBi.jpg" alt=""></p><p>如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，如果是本地图片，可以上传到 <a href="https://imgur.com/" target="_blank" rel="noopener">imgur</a> ，之后就可以得到你图片的地址</p><blockquote><p>! [] ( <a href="https://i.imgur.com/UyEXrBi.jpg" target="_blank" rel="noopener">https://i.imgur.com/UyEXrBi.jpg</a> ) </p></blockquote>]]></content>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><font color="#4094C7" size="4"><br><strong>在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！</strong><br></font><hr><h1 id="–-插入图片"><a href="#–-插入图片" class="headerlink" title=" – 插入图片 "></a><font color="#FF0000"> – 插入图片 </font></h1><p><br></p><p><img src="https://i.imgur.com/UyEXrBi.jpg" alt="车"></p><p>如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，比如上面的图片代码如下：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![<span class="string">车</span>](<span class="link">https://i.imgur.com/UyEXrBi.jpg</span>)</span><br></pre></td></tr></table></figure><p><br></p><h1 id="–-插入音乐"><a href="#–-插入音乐" class="headerlink" title=" – 插入音乐 "></a><font color="#FF0000"> – 插入音乐 </font></h1><p><br><br>打开网页版<a href="https://music.163.com/" target="_blank" rel="noopener">网易云音乐</a>，选择你准备插入的音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码<br><img src="https://i.imgur.com/6E1kQzO.png" alt=""><br><img src="https://i.imgur.com/uRdMA63.png" alt=""></p><p>然后将此HTML代码粘贴到你想要放的地方，可自行调节播放器的大小，其中 <font color="#FF0000">auto=1</font> 表示打开网页自动播放音乐，<font color="#FF0000">auto=0</font> 表示关闭自动播放音乐，比如See You Again (中英文版) - 罗艺恒这首歌曲代码如下：</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<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">330</span> <span class="attr">height</span>=<span class="string">86</span> <span class="attr">src</span>=<span class="string">"//music.163.com/outchain/player?type=2&amp;id=32405683&amp;auto=1&amp;height=66"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure><p><br></p><h1 id="–-插入视频"><a href="#–-插入视频" class="headerlink" title=" – 插入视频 "></a><font color="#FF0000"> – 插入视频 </font></h1><p><br><br>高考毕业了我们为下一届的学弟学妹们录制高考加油视频，我担任后期制作，在这里就以该视频为例٩(๑❛ᴗ❛๑)۶，在腾讯视频播放页面找到分享按钮，复制该视频的通用代码（其他视频播放平台也一样）,粘贴到文章中对应位置即可，可根据情况调整视频播放器的大小<br><img src="https://i.imgur.com/YOAVLsm.png" alt=""></p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">frameborder</span>=<span class="string">"0"</span> <span class="attr">width</span>=<span class="string">"1040"</span> <span class="attr">height</span>=<span class="string">"700"</span> <span class="attr">src</span>=<span class="string">"https://v.qq.com/txp/iframe/player.html?vid=x0643zvgtf7"</span> <span class="attr">allowFullScreen</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure><iframe frameborder="0" width="1040" height="700" src="https://v.qq.com/txp/iframe/player.html?vid=x0643zvgtf7" allowfullscreen="true"></iframe>]]></content>
<categories>
......@@ -117,15 +117,6 @@
</entry>
<entry>
<title>Hello World</title>
<link href="/2018/08/10/hello-world/"/>
<url>/2018/08/10/hello-world/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><a id="more"></a><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
</entry>
</search>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或