Github pages和Hexo搭建

2017/4/11 posted in  服务器

前言

由于之前Jekyll的博客搭建起来,插件支持太少,以及其他的目录和语法高亮支持不太好,过于麻烦。最近看了其他人用Hexo搭建的Blog,被其简洁和方便,美观的界面所深深吸引。所以,查询其相关资料,发现的确很棒,而且文档相对Jekyll来说也齐全很多。顿时萌生了转战Hexo的想法。搭建完成后,发现的确好棒,很多在Jekyll上无法实现的功能,在这里能轻松实现,而且搭配Next主题,秒杀全场啊。

一、基础博客搭建流程

安装Node和Git

1、安装node.js。

brew install node

2、安装git。

brew intall git

3、选装cnpm。

淘宝cnpm官网。由于npm国内下载速度经常抽风,所以建议安装淘宝的这个镜像;使用方法就是在命令中把npm换成cnpm即可。

安装方法:在cmd工具中输入如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Hexo及其相关插件

1、全局安装Hexo

cnpm install hexo-cli -g #安装hexo
hexo -v #出现版本信息则表示安装成功

2、在项目中安装Hexo

创建文件夹,进入文件夹目录

cnpm install hexo --save #在当前项目中安装hexo

hexo init #初始化hexo

cnpm install #安装依赖包

3、安装Hexo的插件

cnpm install hexo-server --save #搭建本地服务器所需插件
cnpm install hexo-deployer-git --save #使用git方式进行部署博客所需插件

在本地生成博客静态页面并预览

1、在本地生成静态页面

hexo generate,会生成一个存放静态文件的文件夹public,其简写形式为hexo g

2、启动本地服务器

hexo server,其简写形式为hexo s

这条指令运行完成后可在本地启动服务器并预览博客,默认网址为http://localhost:4000/。

创建GitHub Pages并配置ssh

1、创建博客仓库。

注册并登陆到GitHub官网,假如你注册的用户名是Magic,那么新建一个名为Magic.github.io的仓库,注意仓库的用户名一定要是用户名+github.io的形式!

2、本地生成ssh密钥。

终端下输入ssh-keygen -t rsa -C ‘你的邮箱地址’

3、上传本地的公钥串,使当前电脑与GitHub账户建立联系。

/Users/你的计算机用户名/.ssh 目录下打开刚刚生成的id_rsa.pub,复制里面的内容。然后点击你GitHub账户右上角的头像,选择settings,找到SSH and GPG keys,点击进入之后再点击New SSH key,title随便写,把公钥串粘贴到文本框,保存即可。
cat id_rsa.pub

本地博客同步到GitHub上

这一步其实就是把本地生成的博客内容(静态页面)放到GitHub新建成的仓库Magic.github.io中。

1、编辑博客配置文件: _config.yml

在hexo根目录下找到_config.yml文件,把其中的deploy参数(没有的话就按如下格式新建,注意冒号后面一定要有一个空格),修改为:

deploy: 
     type: git 
     repo: git@github.com:LiLei/LiLei.github.io.git             
     branch: master

2、重新部署

打开终端,进入博客根目录,依次执行如下Hexo命令:
hexo clean #会清除缓存文件db.json及之前生成的静态文件夹public

hexo g #会重新生成静态文件夹public

hexo deploy #因为之前已经安装了插件并且在博客配置文件中也配置好了,所以这个命令会在博客根目录下生成一个.deploy_git的文件夹,并 把本地生成的静态文件部署到Magic.github.io这个仓库中的master分支上;简写形式为hexo d;

hexo ghexo d可以合并在一起写:hexo g -d

3、在浏览器中访问博客

在浏览器中输入Magic.github.io(可能你已经发现了,这个就是之前新建仓库的名字,同时也是你博客的域名),没毛病的话,你应该可以再次看到那个熟悉又亲切的博客页面了。

二、更换主题

Blog的主题还是很重要的,直接影响写博客和看博客人的心情。在浏览了官网的全部主题以及和Next的对比下,最终还是选用了Next。毕竟有官方文档支持,而且符合内心界面简洁的风格,功能自定义强大,全面。

更换主题主要是两步,先下载主题然后放到博客中的themes文件夹(专门用来存放主题)下,再修改主题的配置文件_config.yml中相关参数,启用themes文件夹下新增的主题。这里用Next主题做示例。

下载Next主题。

进入 根目录/themes 文件夹中,打开终端,输入:
git clone https://github.com/iissnan/hexo-theme-next themes/next
把主题包克隆到themes文件夹中即可。

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开根目录下的站点配置文件_config.yml, 找到 theme 字段,并将其值更改为 next(注意冒号后面要留一个 空格)。

验证主题

清除并重新生成hexo静态文件,启动本地服务器,然后通过http://localhost:4000/预览博客:

hexo clean #清除静态文件
hexo g #重新生成静态文件
hexo s #启动服务器

Next中文官网官网有更加全面的介绍

三、自定义域名

自定义域名对于我们这些不喜欢加github.io后缀的人来说还是很有必要的。而且githubpages的浏览速度过慢,导致体验很差。所以我们需要加速,如果不使用GithubPages的话,可以直接搭在自己的服务器上,这样速度够快。另一种方法就是对域名使用CDN加速了,阿里云的CDN加速太贵了,查了一下发现百度有免费的CDN加速(发现百度还是有点良心的)。百度云加速

百度云加速域名解析设置

1、进入域名服务商的后台解析DNS域名

解析为ns1.bddns.cnns2.bddns.cn

2、进入百度云加速域名的解析后台,添加如下两条解析记录:

20170331149092906634581.png
20170331149092906634581.png

3、在博客目录的source文件夹下(根目录/source)创建一个名为CNAME的文件,内容为你注册域名。

CNAME是不带任何后缀的。

上面操作完毕后,大概过几分钟就可以通过自定义的新域名访问博客了。如果不行,就依次执行hexo cleanhexo ghexo d再试下。

四、博客操作

1、新建文章

hexo new post 背影
在Git Bash中执行上面命令会新建一篇名为‘背影’的文章,源文件会自动生成到hexoBlog/source/_post 路径下,后缀为.md,直接打开编辑就可以了。编辑完保存,然后再依次执行hexo cleanhexo ghexo d在博客就可以看到你的文章了(有时候网络问题生成会比较慢,需要等几分钟才可以看到)。
如果习惯了之前Jekyll的博客命名风格,修改站点配置文件_config.yml的内容new_post_name: :year-:month-:day-:title.md # File name of new posts,之后就可以使用时间-名字的文件命名风格了。

2、新建页面

新建标签、分类、关于我等各种页面,并在博客的菜单栏中显示。这里以新建‘标签’页面来做示范。

1、创建页面。

在终端中执行hexo new page 'tags',会在根目录/source路径下自动生成一个名为tags的文件夹,里面包含一个index.md的文件,在这个文件中添加对应的页面类型type: tags

      ---
      title: Tagcloud
      date: 2017-01-01 15:24:23
      type: 'tags'   #声明页面类型
      ---

把页面路径添加到菜单中。
编辑主题配置文件(themes/_config.yml),找到menu字段,添加tag: /tags(格式为item_name: link),如下:

menu:
    home: /
    tag: /tags    #‘标签’’页面的路径

设置博客中‘标签’这个菜单项的显示图标。
同样是在主题配置文件中,找到nenu_icons字段,添加tags tags(格式为item_name: icon_name),如下:

menu_icons:
    enable: true     #显示图标
    home: home
    tag: tags     #tag标签的icons是‘tags’

设置博客中‘标签’这个菜单项的显示文本。
上面的item_name并不会直接用于博客界面的显示,只是用来匹配图标和显示在页面上的文字,可以理解为一个桥梁。那么到底在哪里设置呢?
首先,在站点配置文件中(hexoBlog下的_config.yml文件)找到language字段,设置为zh-Hans

然后, 在themes/next/languages路径下找到zh-Hans.yml文件,在menu字段下添加tag: 标签云(格式为item_name: show_name),如下:

   menu:
       home: 首页
       tag: 标签云    #博客页面就会显示‘标签云’

五、多终端同步管理技巧

如果你使用过云盘或者有Git操作的基础,下面的内容会非常好理解。

1、思路:

需要发布到GitHub仓库的静态内容(也就是执行hexo g -d之后生成的public.deploy_git文件夹)放在master上,而博客所有其他源文件(除了public.deploy_git)存放到另外一个新建的hexo分支(这个分支的名字可以随意取),并且在GitHub上将其设为默认分支。

以后所有的操作都会在hexo这个分支上进行,操作完之后依次执行git add .git commit -m 'commets'git push把所有源文件推到远程仓库的hexo分支上(这里远程仓库其实扮演了一个云盘的角色);即使换了电脑,你可以直接clone远程仓库的hexo分支到本地或者执行git pull下拉更新到本地覆盖现有源文件,就在本地还原了最新的博客内容了。

2、操作流程

假设你最早是在家里的A电脑上搭建了博客,那么A电脑的准备工作:把源文件push到GitHub。

1、初始化仓库

博客根目录下依次执行:

git init

git remote add origin <server>

2、新建并切换到hexo分支

git checkout -b hexo

3、找到.gitignore文件(没有的话就在根目录下新建一个),在最后增加两行内容:

/.deploy_git/public

目的是让git不跟踪这两个文件的更新,也就是push到hexo分支的内容里不会有这两个文件。

4、把本地新建的分支push到远程分支:

git add .

git commit -m 'commets'

git push -u origin hexo:hexo

然后再去GitHub上把新建的hexo分支设置为默认分支。

画面一转,我们到了公司。此时公司B电脑上空空如也,那么执行如下操作:

在桌面(或任意地址)执行

git clone <server> -b <branch>
这里的是你远程仓库的clone地址,就是之前新创建的hexo分支,这句话的作用是把远程仓库中的分支克隆到本地当前目录。

有了源文件就可以任性修改博客了。修改完之后先生成静态文件发布到博客中:

hexo clean

hexo g -d

再把最终保存的源文件push到GitHub,保证多终端可以同步:

git add .

git commit -m 'comment'

git push

最后画面再切换会家中的A电脑,因为此时远程仓库中的博客源文件已经做了更新,而我们A电脑上也有之前的源文件,那么只需要下来更新覆盖到本地就可以啦,进入到博客根目录,执行:

git pull

六、优化博客设置

文字居中(写博客时)

在你博客文章中需要居中处加上下面这段代码即可,中间的文字改成你所需要的文字。

<blockquote class="blockquote-center">
不忘初心,这里可以写多行文字
</blockquote> 
不忘初心,这里可以写多行文字

为博客加上GitHub丝带

如果是Next主题(其他主题也差不多),添加GitHub丝带:在themes\next\layout_layout.swig中加入相关代码,记得修改自己的链接。

相关代码你可以在GitHub官方网站 GitHub Ribbons 上进行选择。

加入作者版权信息

我们可以为博客文章加入作者版权信息。

例如本文地址:http://www......./ 转载请注明出处,谢谢!等等。

对Next主题而言,先找到/themes/next/layout/_macro/post.swig,再找到其中的微信订阅部分,如下所示:

20170331149093965647853.png
20170331149093965647853.png

然后直接在其上面添加如下代码段:

<div align="center">
  {% if not is_index %}
    <div class="copyright">
    <p><span>
    <b>本文地址:</b><a href="{ { url_for(page.path) } }" title="{ { page.title } }">{ { page.permalink } }</a><br /><b>转载请注明出处,谢谢!</b>
    </span></p>
    </div>
  {% endif %}
</div>

当然,在上面这段代码,你可以进行一些个性化编写,可以展示你自己个性化的版权信息。

为博客加入动态背景

首先找到\themes\next\layout_layout.swig,在末尾前加上下面一句:(这里提供两种样式,当然你也可以自由更改)。

  • 默认灰色线条
    <script type="text/javascript" src="/js/src/particle.js"></script>

  • 浅蓝色线条
    <script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

  • 然后在themes\source\js\src下新建文件particle.js写上以下代码:

!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)} }function o(){c=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){l.clearRect(0,0,c,a);var n,e,t,o,u,d,x=[w].concat(y);y.forEach(function(i){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>c||i.x<0?-1:1,i.ya*=i.y>a||i.y<0?-1:1,l.fillRect(i.x-.5,i.y-.5,1,1),e=0;e<x.length;e++)n=x[e],i!==n&&null!==n.x&&null!==n.y&&(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03*o,i.y-=.03*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/2,l.strokeStyle="rgba("+m.c+","+(t+.2)+")",l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),1)}),r(i)}var c,a,u=document.createElement("canvas"),m=t(),d="c_n"+m.l,l=u.getContext("2d"),r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},x=Math.random,w={x:null,y:null,max:2e4};u.id=d,u.style.cssText="position:fixed;top:0;left:0;z-index:"+m.z+";opacity:"+m.o,e("body")[0].appendChild(u),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,w.x=n.clientX,w.y=n.clientY},window.onmouseout=function(){w.x=null,w.y=null};for(var y=[],s=0;m.n>s;s++){var f=x()*c,h=x()*a,g=2*x()-1,p=2*x()-1;y.push({x:f,y:h,xa:g,ya:p,max:6e3})}setTimeout(function(){i()},100)}();

为博客加入鼠标点击显示红心

鼠标点击小红心在\themes\next\source\js\src文件目录下添加love.js文件。内容为:

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=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)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)} }function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)} }(),n()}(window,document);

找到\themes\next\layout_layout.swing文件,在文件的后面,之前 添加以下代码:

<!-- 小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

给博客添加LICENSE

在主题配置文件中添加下面这段代码(添加之前好好看看你的主题配置文件是否已经包含这段代码,已经包含就不用再加一遍了,因为重复会报错),这个LICENSE显示在侧边栏。

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:

添加Local Search功能

安装 hexo插件

在你的站点文件夹中,用shell等运行下面这行代码:

$ npm install hexo-generator-searchdb --save

编辑站点配置文件

添加以下字段:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

启用本地搜索

编辑主题配置文件启用本地搜索

# Local search
local_search:
  enable: true

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件,将$font-size-base改成16px,如下所示:

$font-size-base = 16px

修改网页配色

取色可以用QQ,打开QQ按Ctrl+Alt+A开始截图,将鼠标移到文字上,按住Ctrl键即可看到该颜色的16进制代码。也可以用chrome浏览器的develop tool取色,选取喜欢的颜色。

修改\themes\next\source\css\ _variables\base.styl文件,找到文件开头的colors for use across theme,加入自定义颜色,在orange = #fc6423下加入下面这段代码:

// 下面是我自定义的颜色
$my-link-blue = #0593d3  //链接颜色
$my-link-hover-blue = #0477ab  //鼠标悬停后颜色

修改超链接颜色

打开\themes\next\source\css\ _variables\base.styl文件,像下面这样改掉这几行:

/ Global link color.
$link-color                   = $my-link-blue
$link-hover-color             = $my-link-hover-blue
$link-decoration-color        = $gray-lighter
$link-decoration-hover-color  = $my-link-hover-blue

修改小型代码块颜色

我修改<code>样式是因为我开启了highlighthighlight在渲染<pre><code>标签的同时也渲染了<code>标签,而且优先级高,所以才会出现方法一中这种不开启!important,样式就不起作用的问题。在方法一使用了!important使得此处对<code>的样式优先级最高,所以设置成功。

  • 方法一
    打开\themes\next\source\css\ _variables\base.styl文件,修改如下:
    在下面这段代码:
    // Code & Code Blocks
    // --------------------------------------------------
    $code-font-family = $font-family-monospace
    $code-font-size = 14px
    $code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
    $code-border-radius = 4px

下方加入下面这段代码:

code {
  color:#dd0055 !important;
  background:#eee !important;
}
  • 方法二
    你也可以不用方法一(建议使用方法一,因为第二种可能会失效,被其他的样式定义覆盖),而是在source/css/_variables/custom.styl文件中设定$code-foreground$code-background的值,也是用的优先级。
    $code-foreground = #fc6423
    $code-background = #fc6423
    # 此处颜色只是例子,你自己设置。

20170331149093227147630.png
20170331149093227147630.png

修改其他颜色

修改:themes\next\source\css\_variables\.base.styl文件:

grey-dim     = #666         >>>      $grey-dim     = #353535
$black-light  = #555         >>>      $black-light  = #353535
$blue-bright  = #87daff      >>>      $blue-bright  = #45c5ff

加入统计和提高索引量

添加sitemap插件

谷歌与百度的站点地图,前者适用于其他搜索引擎,用来手动提交以增加收录。

sitemap 安装

在你的站点文件夹中,用shell等分次运行下面这两行代码:

npm install hexo-generator-sitemap@1 --save
npm install hexo-generator-baidu-sitemap@0.1.1 --save

设置站点配置文件

在站点配置文件中添加代码:

# hexo sitemap网站地图
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
  • 配置成功后,hexo编译时会在hexo站点根目录生成sitemap.xmlbaidusitemap.xml。其中sitemap.xml适合提交给谷歌搜素引擎,baidusitemap.xml适合提交百度搜索引擎。

  • 其次,在站点根目录下新建一个robots.txt文件,其中添加下面的一段代码(具体网站改为你自己的网址):

# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://dingxuewen.github.io/sitemap.xml
Sitemap: https://dingxuewen.github.io/sitemap.xml

给非友情链添加标签

经过chinaz站长工具友情链接检测,发现有不必要的PR值输出,对于非友情链接的PR值输出,我们可以加上nofollow便签避免不必要的PR输出。方法是给链接加上rel="external nofollow"属性。例如:

找到\themes\next\layout\_partials\footer.swig文件,将下面代码:

{ { __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') } }

改成:

{ { __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') } }

将下面代码:

<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">

改成:

<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">

加入Baidu站长统计

先准备一些代码。站长统计,注册并获取统计代码:

  |  
<script type="text/javascript">
  var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

修改底栏:找到\themes\next\layout\_partials\footer.swig文件,加入上面这段代码,出于保护隐私的考虑,我编辑掉了部分关键代码,直接复制上面的无法使用。注意把上面的xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx换成你自己的站长统计代码。

在页脚加入地图

在页脚加入百度地图和谷歌地图链接:

找到\themes\next\layout\_partials\footer.swig文件,百度和Google网站地图,上面已经安装了,这是插入到底栏的代码:

|  <span><a href="/sitemap.xml">Google网站地图</a></span>  
|  <span><a href="/baidusitemap.xml">百度网站地图

添加Baidu自动推送

百度自动推送代码,在页面被访问时,页面URL将立即被推送给百度,可以增加百度收录:找到\themes\next\layout\_partials\footer.swig\themes\next\layout\_macro\post.swig文件,(Next主题已经有了\themes\next\layout\_scripts\baidu-push.swig)添加下面的代码。

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https'){
   bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

不蒜子统计

找到\themes\next\layout\_partials\footer.swig文件,加入下面不蒜子统计代码:

  |  本页点击 <span id="busuanzi_value_page_pv"></span> 次
  |  本站总点击 <span id="busuanzi_value_site_pv"></span> 次
  |  您是第 <span id="busuanzi_value_site_uv"></span> 位访客
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

在标题下添加【阅读量】等

现在要添加的阅读量统计也依赖下面这段代码。

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

打开/themes/next/layout/_macro/post.swig,找到标签<div class="post-meta"></div>,在该标签内部合适的位置(如timecategories之间或categories后面)添加:

{% if not is_index %}
  <span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

将阅读量改为热度(更个性)

还可以继续修改,看到好多人的博客不是阅读次数(阅读量),而是热度 188 ℃,那么可以继续这样修改,首先在Next主题的/themes/next/languages/zh-Hans文件中查找”阅读次数“这几个字,可以看到,在post中的visitors被定义为“阅读次数”,把这里的“阅读次数”改为“热度”。

那么怎么在页面中显示呢。打开Next主题文件夹中layout/_macro/post.swig,在这个文件里加上摄氏度的标志,在<span class="leancloud-visitors-count"></span>下面增加一行<span>℃</span>即可。

20170331149093272186421.png
20170331149093272186421.png

修改标题下分类等的样式

在Next主题中,我用的是LeanCloud数据统计,默认样式是在统计数据前有个小眼睛,我感觉不好看,想把它去掉,那么打开/themes/next/layout/_macro/post.swig,找到标签<i class="fa fa-eye"></i>,去掉下面这段代码即可:

<span class="post-meta-item-icon">
  <i class="fa fa-eye"></i>
</span>

多说个性化设置

设置多说动感头像
打开多说后台,进入后台管理,点击设置,在设置里有“自定义CSS”,将下面的这段代码粘贴进去:

#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px;     /*设置图像的长和宽,这里要根据自己的评论框情况更改*/
border-radius: 27px;     /*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
-webkit-border-radius: 27px;     /*圆角效果:兼容webkit浏览器*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf;     /*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;     /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {
/*设置鼠标悬浮在头像时的CSS样式*/    box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg);     /*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url(http://ww4.sinaimg.cn/small/649a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;
}
#ds-recent-visitors .ds-avatar {
float: left
}
/*隐藏多说底部版权*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}

最近访客设置

  • 第一步 为页面添加代码
    往你想添加的页面增加下面的一小段代码即可。
    <div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

解释一下上一段代码,其中:

class=“ds-recent-visitors”    //指定显示最近访客容器
data-num-items=“28”    //显示最近访客的数量
data-avatar-size=“42”    //显示最近访客头像尺寸大小
id=“ds-recent-visitors”    //为了调节最近访客样式加的

可以通过生成了一个guestbook页面,然后直接在\guestbook\index.md中添加了上面那段代码实现的。

  • 第二步 修改其样式
    通过多说后台管理>设置>基本设置>自定义CSS修改最近访客css样式。
    我的整个多说自定义css,其中访客样式和评论样式统一。代码已经包括在上一节设置多说动感头像的那段代码中了。你还可以不直接用那段代码,而是对其进行编辑,修改成你喜欢的样式。

增加留言页

那么有人会问,guestbook是如何创建的,那么现在我就把方法写出来。

新建一个 guestbook 页面:

在你的站点文件夹,用shell等运行下面这行代码:

hexo new page "guestbook"

找到你NexT主题_config.yml(主意是Next主题的_config.yml,不是hexo站点目录下的_config.yml),文件路径\themes\next\_config.yml,添加guestbookmenu中,如下:

menu:
  home: /
  #categories: /categories
  about: /about
  archives: /archives
  # tags: /tags
  #commonweal: /404.html
  guestbook: /guestbook

找到你Next主题zh-Hans.yml文件(我的网站是简体语言的),文件路径\themes\next\languages\zh-Hans.yml,添加guestbook: 留言板到menu中,如下:

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  commonweal: 公益404
  guestbook: 留言

SEO优化

更改首页标题格式为「关键词-网站名称-网站描述」。打开\themes\next\layout\index.swig文件,找到这行代码:

{% block title %} { { config.title } } {% endblock %}

把它改成:

{% block title %}
  { { theme.keywords } } - { { config.title } } - { { theme.description } }
{% endblock %}

20170331149093514340074.png
20170331149093514340074.png

博客部署的message设置

\hexo\node_modules\hexo-deployer-git\lib\deployer.js文件末尾找到这一句:

Site updated: { { now('YYYY-MM-DD HH:mm:ss') } }.

改得个性化一点:

勤奋的博主又更新啦: { { now(\'YYYY-MM-DD HH:mm:ss\') } }.

为项目主页添加README

Github 上的博客仓库主页空荡荡的,没有README。如果把README.md放入source文件夹,hexo g生成时会被解析成html文件,放到public文件夹,生成时又会自动删除。
  解决方法很简单,在站点配置文件中,搜索skip_render:,在其冒号后加一个空格然后加上README.md即可。
  

优化主题 sidebar 头像

就是为主题 sidebar 头像添加圆形化旋转的效果。修改 /themes/next/source/css/_common/components/sidebar/sidebar-author.styl 文件,我的整个 sidebar-author.styl文件的代码如下,你可以直接复制这段代码去替换你这个文件中的所有代码。
有一个注意事项,就是你要保证你的头像,也就是 avatar.jpg 这个图片是正方形,不是的话你要将其修改成正方形,这样才能通过样式将其展现为很好看的正圆,否则会是一个椭圆形。

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

20170331149093770262972.gif
20170331149093770262972.gif

小红心优化

为博客加入鼠标点击显示小红心,但是如果我们只想在博客的某个页面添加这个功能呢?
那么就可以在 \themes\next\source\js\src 文件目录下添加 love.js 文件。内容为:

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=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)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)} }function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)} }(),n()}(window,document);

之后呢,不在\themes\next\layout\_layout.swing 文件中添加代码,而是在你想要显示红心的页面的 Markdown文件中加入下面这段代码,例如我就在我的留言板页面的 Markdown 文件中加入了下面这段代码。

<!-- 小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

文章内文本样式

Markdown 毕竟是为了方便写作,在样式上过于单调。我们可以自己来给文章加一些样式。NexT 作者提供了一个供用户自己定义样式的文件:\themes\next\source\css\_custom\custom.stly。可以按照自己的需要写。

设置动态title

\themes\next\source\js\src 目录下新建 dytitle.js 。添加以下内容:

<!--崩溃欺骗-->
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = ' 页面崩溃啦 ~ | cwyaml!';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' 噫又好了~ ' + OriginTitile;
         titleTime = setTimeout(function () {
             document.title = OriginTitile;
         }, 2000);
     }
 });

更改 \themes\next\layout\_layout.swig 。在</body> 之前添加:

<!--卖萌-->
<script type="text/javascript" src="/js/src/dytitle.js"></script>

2017033114909378973004.gif
2017033114909378973004.gif

添加听音乐

代码设置
\themes\next\layout\_macro目录下新建 high.swig 文件,添加以下内容:

<a title="收藏到书签,偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(
    /*
     * Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.

     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */
    function go() {

      var songs = [
          "http://m2.music.126.net/3uHnH7uQAeFwUfuvEB9lrg==/3265549619475054.mp3", 
          "http://m2.music.126.net/NnHwR2HV-1OoKZ6R5LVy4Q==/18502581673300023.mp3",
          "http://m2.music.126.net/qv3RI4K7ABKJ0TyAdb3taw==/3250156397064860.mp3",    
          "......"
      ];

      function S() {
          var e = document.getElementById("audio_element_id");
          if(e != null){
              var index = parseInt(e.getAttribute("curSongIndex"));
              if(index > songs.length - 2) {
                  index = 0;
              } else {
                  index++;
              }
              e.setAttribute("curSongIndex", index);
          }
          e.src = i;
          e.play()
      }
      function initAudioEle() {
          var e = document.getElementById("audio_element_id");
          if(e === null){
            e = document.createElement("audio");
            e.setAttribute("curSongIndex", 0);
            e.id = "audio_element_id";
            e.loop = false;
            e.bgcolor = 0;
            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
            document.body.appendChild(e);
            e.addEventListener("ended", function() {
              go();
            }, true);
          }        
      }

      initAudioEle();
      var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
      var i = songs[curSongIndex];
      S();
    })()'>
    <i class="fa fa-music"></i> 听音乐</a>

在侧边栏引用该文件:修改 \themes\next\layout\_macro\sidebar.swig ,添加以下代码:

20170331149093972649955.png
20170331149093972649955.png

20170331149093796919415.png
20170331149093796919415.png

样式修改:使 听音乐 和 RSS 并排展示。
修改 \themes\next\source\css\_schemes\Pisces\_sidebar.styl文件:

display: inline-block;

2017033114909380131689.png
2017033114909380131689.png

添加自己喜欢的音乐:修改其中的歌曲链接即可.

var songs = [
      "http://m2.music.126.net/3uHnH7uQAeFwUfuvEB9lrg==/3265549619475054.mp3", 
      "http://m2.music.126.net/NnHwR2HV-1OoKZ6R5LVy4Q==/18502581673300023.mp3",
      "http://m2.music.126.net/qv3RI4K7ABKJ0TyAdb3taw==/3250156397064860.mp3",    
      "......"
  ];

首页听音乐摇晃:需要加载 css 样式。在 themes\next\layout\_layout.swig文件的 </body>标签前 添加以下代码:

<!-- 听音乐摇晃 -->
<link href="http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css" rel="stylesheet" type="text/css">

注意:有时候使用 FirefoxChrome时会提示非法插件并禁止使用,遇到这种情况我们把样式代码引入到 \themes\next\source\css\_custom\custom.stly文件即可解决。

音乐链接获取

  • 先获取歌曲id,直接打开 网易云音乐网页版 http://music.163.com 搜索自己喜欢的音乐,点击外链生成器获取歌曲的 ID 。举个例子:(id显而易见吧)
    http://music.163.com/#/song?id=443205403
  • 将下面网址中的两处id替换成的歌曲 id ,你将会获得一大串代码:外链就隐藏其中(如下图,自己找)。
  • http://music.163.com/api/song/detail/?id=425137664&ids=[425137664]&csrf_token=
    2017033114909381448123.png
    2017033114909381448123.png
  • 将上一步中获取到的网址放到地址栏中,若能正常播放音乐说明获取到的网址是正确的。然后你就可以把这些歌曲添加到自己的网页中了!用这种方法有些歌曲并不能获得,不过时效很长(只要网易云能听)。

博文压缩

目前知道的有两个插件可以压缩博文,hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 虽然使用比较简单,而且也可以压缩图片,但是对文章缩进(输入法全拼模式下按 Tab)不支持,所以暂时使用 gulp 压缩手段。

hexo-all-minifier 使用方法

安装 hexo-all-minifier,在站点的根目录下执行以下命令:

$ npm install hexo-all-minifier --save

hexo g 编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier

glup 使用方法

hexo 依赖 gulp 插件安装,在站点的根目录下执行以下命令:

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

package.json 同级目录下,新建 gulpfile.js 并填入以下内容:

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g &&amp; gulp 就会根据 gulpfile.js 中的配置,对 public目录中的静态资源文件进行压缩。

博文置顶

修改 hero-generator-index 插件

替换文件:node_modules/hexo-generator-index/lib/generator.js 内的代码为:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

设置文章置顶

在文章 Front-matter 中添加 top 值,数值越大文章越靠前,如:

---
title: 图集
categories: [图片]
tags: [picture]
date: 2015-04-02 14:36:04
top: 10
---

embed.js本地化

embed.js 是多说使用的远程脚本,你可以访问 http://static.duoshuo.com/embed.js 这个网址。右键另存为 \theme\next\source\js\src\这个文件夹。

然后打开 \themes\next\layout\_scripts\third-party\comments\duoshuo.swig 这个文件,在文件里搜索 //static.duoshuo.com/embed.js ,把它改成 /js/src/embed.js。搞定啦!

Hexo更改默认Google字体库

因为一些国内的客观原因,google字体库 的访问速度一直很慢,所以生成页面后,访问系统总是会耗费一大部分的时间在加载google字体库上,而且经常加载不成功。

解决的办法是可以用国内的CDN库来替代主题中的google字体库,更改方法如下:
shell中运行如下命令:

grep -ir fonts.google themes/
找到对应的google字体库地方,用国内的CDN字体库替换,如360字体库:360前端公共库CDN

首页分割线

\themes\next\source\css\_custom\custom.styl 文件中添加以下代码,可以修改博客首页中每篇文章的分割线长度,我设置为了100%长度。

//index页面中每篇文章相隔的那条线
.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 100%;
    height: 3px;
    background: $grey-light;
    text-align: center;
  }
}

字体、颜色等设置

\themes\next\source\css\_variables\custom.styl 文件中添加以下代码。具体功能我已经做了注释。

// 标题,修改成你期望的字体族
$font-family-headings = Georgia, sans
// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// 正文字体的大小
$font-size-base = 16px
// 代码字体的大小
$code-font-size = 14px
// 代码块颜色
$code-foreground = #dd0055
// Background color for <body>
$body-bg-color = #e7e5dc  //theme mist use #fdfdfd
// text-color
$text-color = #353535

语言配置

_config.yml中的language要配置为选定的主题cilia文件夹下的language目录下的文件,如:

language: zh-Hans
language: en
language: zh-hk
language: zh-tw

这里修改 zh-Hans为标准的zh-cn,并添加一些汉化内容

语言配置用法:

# 不带参数的
__('xxxx')
# 带参数的
_p('xxx',xx)

不蒜子统计显示

添加站点统计配置为不蒜子统计,并且可开关

busuanzi: true

配置自己的分享

国内的jiathis
themes/yilia/_partial/share_jia.ejs中的内容替换为:

<div class="jiathis_style">
    <span class="jiathis_txt"><%= __('post.share') %>:   </span>
    <a class="jiathis_button_weixin">微信</a>
    <a class="jiathis_button_cqq">QQ好友</a>
    <a class="jiathis_button_qzone">QQ空间</a>
    <a class="jiathis_button_tsina">新浪微博</a>
    <a href="http://www.jiathis.com/share?uid=2080230" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
    <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2080230" charset="utf-8"></script>

其中uid为自己在jiathis注册的uid
国外的add this
themes/yilia/_partial/share_jia.ejs中的内容替换为:

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-568f54bcfd6a7b04" async="async"></script>

Rss

添加Rss,需要先安装rss生成模块:

npm install hexo-generator-feed --save

然后在themes/yilia/_config.yml开启rss

rss: /atom.xml

添加站点地图插件

npm install hexo-generator-sitmap --save

会在每次hexo generator后自动生成到网站根目录

设置网站logo

通过网站favicon在线制作 制作favicon图片,logo最好设置32*32。
next主题:将图片放在next主题source/images目录下

# 在next主题配置文件中添加:
favicon: /uploads/images/favicon.png

2017033114909390045735.png
2017033114909390045735.png

Hexo文章简单加密访问

找到themes->next->layout->_partials->head.swig文件。
按道理是添加在任何地方都行,但是推荐加在所有的<meta>标签之后。

<script>
    (function() {
        if('{ { page.password } }') {
            if (prompt('请输入文章密码') !== '{ { page.password } }') {
                alert('密码错误!');
                history.back();
            }
        }
    } )();
</script>
---
title: Hexo文章简单加密访问
date: 2016-12-02 
tags: hexo
categories: 博客
keywords:
    - Hexo
    - 加密
description: 文章访问密码:password
password: password
---

20170331149093898495542.png
20170331149093898495542.png

Hexo high一下

是直接把这段代码当成一个菜单项加在博客主题配置的_config.yml文件中

<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
    function c() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", f);
        e.setAttribute("class", l);
        document.body.appendChild(e)
    }

    function h() {
        var e = document.getElementsByClassName(l);
        for (var t = 0; t < e.length; t++) {
            document.body.removeChild(e[t])
        }
    }

    function p() {
        var e = document.createElement("div");
        e.setAttribute("class", a);
        document.body.appendChild(e);
        setTimeout(function() {
            document.body.removeChild(e)
        }, 100)
    }

    function d(e) {
        return {
            height : e.offsetHeight,
            width : e.offsetWidth
        }
    }

    function v(i) {
        var s = d(i);
        return s.height > e && s.height < n && s.width > t && s.width < r
    }

    function m(e) {
        var t = e;
        var n = 0;
        while (!!t) {
            n += t.offsetTop;
            t = t.offsetParent
        }
        return n
    }

    function g() {
        var e = document.documentElement;
        if (!!window.innerWidth) {
            return window.innerHeight
        } else if (e && !isNaN(e.clientHeight)) {
            return e.clientHeight
        }
        return 0
    }

    function y() {
        if (window.pageYOffset) {
            return window.pageYOffset
        }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }

    function E(e) {
        var t = m(e);
        return t >= w && t <= b + w
    }

    function S() {
        var e = document.createElement("audio");
        e.setAttribute("class", l);
        e.src = i;
        e.loop = false;
        e.addEventListener("canplay", function() {
            setTimeout(function() {
                x(k)
            }, 500);
            setTimeout(function() {
                N();
                p();
                for (var e = 0; e < O.length; e++) {
                    T(O[e])
                }
            }, 15500)
        }, true);
        e.addEventListener("ended", function() {
            N();
            h()
        }, true);
        e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
        document.body.appendChild(e);
        e.play()
    }

    function x(e) {
        e.className += " " + s + " " + o
    }

    function T(e) {
        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }

    function N() {
        var e = document.getElementsByClassName(s);
        var t = new RegExp("\\b" + s + "\\b");
        for (var n = 0; n < e.length; ) {
            e[n].className = e[n].className.replace(t, "")
        }
    }

    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            if (E(A)) {
                k = A;
                break
            }
        }
    }
    if (A === null) {
        console.warn("Could not find a node of the right size. Please try a different page.");
        return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            O.push(A)
        }
    }
})()    '>High一下</a> </li>
menu:
  high: javascript:void(0)
menu_icons:
  high: play

// 第一个 high 的javascript:void(0)是指a标签的跳转链接,其实这里的功能就是为了让它不跳转的,另外还有一个功能,可以把空链接的a标签悬浮变成手型的鼠标。

第二个 high对应的play是展示的图标,NexT主题使用的是fontawesome图标,这里的play就是其对应的图标,想自己 diy 一下就去fontawesome上找个自己喜欢的。

这样的方法简单粗暴有效,并且还有一个好处,可以直接把这个链接保存成浏览器的书签,这样就能在任何网页都能够调用这个 High一下 的方法。

high 一下自定义页面歌曲

首先是在需要自定义曲子的文章中加上:

<div id="musicUrl" url="***"><div>

然后最终版high.js代码是这样:

document.getElementsByClassName('menu-item-high')[0].addEventListener('click', (function(){
    var play = false;
    var musicUrl = document.getElementById('musicUrl');
    if(musicUrl){
        musicUrl = musicUrl.getAttribute('url');
    }else{
        musicUrl = null;
    }
    return function(){
        if(play){
            console.log('Enjoying');
            return;
        }
        play = true;
        function c() {
            var e = document.createElement("link");
            e.setAttribute("type", "text/css");
            e.setAttribute("rel", "stylesheet");
            e.setAttribute("href", f);
            e.setAttribute("class", l);
            document.body.appendChild(e)
        }

        function h() {
            var e = document.getElementsByClassName(l);
            for (var t = 0; t < e.length; t++) {
                document.body.removeChild(e[t])
            }
        }

        function p() {
            var e = document.createElement("div");
            e.setAttribute("class", a);
            document.body.appendChild(e);
            setTimeout(function() {
                document.body.removeChild(e)
            }, 100)
        }

        function d(e) {
            return {
                height: e.offsetHeight,
                width: e.offsetWidth
            }
        }

        function v(i) {
            var s = d(i);
            return s.height > e && s.height < n && s.width > t && s.width < r
        }

        function m(e) {
            var t = e;
            var n = 0;
            while (!!t) {
                n += t.offsetTop;
                t = t.offsetParent
            }
            return n
        }

        function g() {
            var e = document.documentElement;
            if (!!window.innerWidth) {
                return window.innerHeight
            } else if (e && !isNaN(e.clientHeight)) {
                return e.clientHeight
            }
            return 0
        }

        function y() {
            if (window.pageYOffset) {
                return window.pageYOffset
            }
            return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
        }

        function E(e) {
            var t = m(e);
            return t >= w && t <= b + w
        }

        function S() {
            var e = document.createElement("audio");
            e.setAttribute("class", l);
            e.src = i;
            e.loop = false;
            e.addEventListener("canplay", function() {
                setTimeout(function() {
                    x(k)
                }, 500);
                setTimeout(function() {
                    N();
                    p();
                    for (var e = 0; e < O.length; e++) {
                        T(O[e])
                    }
                }, 15500)
            }, true);
            e.addEventListener("ended", function() {
                N();
                h();
                paly = false;
            }, true);
            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
            document.body.appendChild(e);
            e.play()
        }

        function x(e) {
            e.className += " " + s + " " + o
        }

        function T(e) {
            e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
        }

        function N() {
            var e = document.getElementsByClassName(s);
            var t = new RegExp("\\b" + s + "\\b");
            for (var n = 0; n < e.length; ) {
                e[n].className = e[n].className.replace(t, "")
            }
        }

        var e = 30;
        var t = 30;
        var n = 350;
        var r = 350;
        var i = musicUrl || "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
        var s = "mw-harlem_shake_me";
        var o = "im_first";
        var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
        var a = "mw-strobe_light";
        var f = "/vendors/high/high.css";
        var l = "mw_added_css";
        var b = g();
        var w = y();
        var C = document.getElementsByTagName("*");
        var k = null;
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                if (E(A)) {
                    k = A;
                    break
                }
            }
        }
        if (A === null) {
            console.warn("Could not find a node of the right size. Please try a different page.");
            return
        }
        c();
        S();
        var O = [];
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                O.push(A)
            }
        }
    };
})(), false);

修改文章链接

HEXO 默认的文章链接形式为domain/year/month/day/postname,默认就是一个四级url,并且可能造成url过长,对搜索引擎是十分不友好的,我们可以改成domain/postname的形式。编辑站点_config.yml文件,修改其中的permalink字段改为permalink: :title.html即可。

七、总结

每次写完博客发布都需要用到的命令

hexo clean

hexo g -d

发布之前,在本地预览博客用到的命令:

hexo s

同步博客需要用到的命令:

git add .

git commit -m 'comment'

git push

git clone <server> -b <branch>

git pull