next主题优化

前言

最近博客更新了一下主题，由之前的yilia主题更新成集成功能更齐全的next。借此也把搭建博客和优化主题的过程记录一下。

搭建博客

搭建环境

1. Node.js下载安装: https://nodejs.org/en/download/
2. git下载安装：https://git-scm.com/downloads
3. hexo下载安装，搭建博客：

4. 在桌面新建test目录，进入test目录右键选择git Bash Here在命令行界面初始化hexo（这里以test文件夹为例，文中后续都是以test文件夹作为根目录）

   $ hexo init

5. 更新下载依赖包

   $ hexo install

6. 启动本地服务

   $ hexo s

   浏览器访问：http://localhost:4000
   可以看到博客已经搭建在本地。

部署到github上

1. 创建github账号：https://github.com。（注册的邮箱一定要验证）
2. 新建一个名为<github用户名>.github.io的仓库，比如说，如果你的github用户名是mygithub，那么你就新建mygithub.github.io的仓库。

3. 安装hexo-deployer-git插件。在命令行（即Git Bash）运行以下命令即可：

   $ npm install hexo-deployer-git --save

4. 配置ssh

   • 检查是否有ssh

     $ cd ~/. ssh #检查本机已存在的ssh密钥（No such file or directory 说明你是第一次使用git。）

   • 生成ssh

     $ ssh-keygen -t rsa -C "邮件地址"（注册github时的邮箱）

   • 然后连续3次回车，复制密钥文件内容（路径形如C:\Users\Administrator\.ssh\id_rsa.pub），粘贴到New SSH Key即可。打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
     

5. 测试是否成功配置ssh

   $ ssh -T git@github.com

   提示 Are you sure you want to continue connecting (yes/no)?，输入yes返回 “You’ve successfully authenticated” 即成功：

6. 修改_config.yml（在test目录下）。文件末尾添加下面代码：

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
      type: git
      repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git
      branch: master

7. 推送到GithubPages。在命令行（即Git Bash）依次输入以下命令， 返回 INFO Deploy done: git 即成功推送：

   $ hexo d -g

   至此，Hexo博客已经搭建在GithubPages, 域名为https://<Github账号名称>.github.io

主题选择和优化

主题选择

1. 这里我选择的是next主题，在/test目录下载主题文件

   $ git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 修改/test目录下的_config.yml文件，更改theme字段，为主题文件夹的名称

   $ theme: next

主题基本配置

设置 语言

1. 修改/test目录下的_config.yml文件，选择语言

   language: zh-Hans（默认为英文，zh-Hans为中文简体）

设置 作者昵称

1. /test目录下的_config.yml文件，设置author为你的昵称。

   author : <你的昵称>

设置 站点描述

1. 修改/test目录下的_config.yml文件，设置description字段为你的站点描述。

   description : 站点描述可以是你喜欢的一句签名:)

设置 侧边栏社交链接

1. 修改/test目录下的_config.yml文件，设置social字段。

   social:
     GitHub: https://github.com/your-user-name || github
     Twitter: https://twitter.com/your-user-name || twitter
     Weibo: http://weibo.com/your-user-name || weibo

2. 如果只想显示图标可以设置social_icons字段

   social_icons:
     enable: true
     icons_only: true
     transition: true

设置「背景动画」

1. 修改/test目录下的_config.yml文件，有4款背景动画，选择你喜欢的设置为true即可

   # Canvas-nest
   canvas_nest: true
   
   # three_waves
   three_waves: false
   
   # canvas_lines
   canvas_lines: false
   
   # canvas_sphere
   canvas_sphere: false

设置「动画效果」

1. 修改/test目录下的_config.yml文件，设置motion字段。

   motion
       enable: true

选择 Scheme

next提供了几种主题模式可供切换，选择一款你喜欢的

1. /test/themes/next目录下的_config.yml文件，全局查找scheme，选择一款打开注释

   #scheme: Muse
   #scheme: Mist
   #scheme: Pisces
   scheme: Gemini

配置 菜单栏

1. 修改/test/themes/next目录下的_config.yml文件，menu关键字下面的配置就是菜单栏，next的默认菜单配置

   
   一般来说我们都会有自己的定制。给出我的配置以供参考

   menu:
     home: / || home
     about: /about/ || user
     tags: /tags/ || tags
     categories: /categories/ || th
     archives: /archives/ || archive
     music: /music/ || music

   || 后面的内容为菜单栏的图标icon，就是Font Awesome 图标名字

   配置优化 用户图像

2. 修改/test/themes/next目录下的_config.yml文件，设置avatar 为一张图片，把你喜欢的图片下载并放到 /test/themes/next/source/images文件夹中

   avatar: /images/<图片名字>.jpg

3. 找到主题配置文件：/test/themes/next/source/css/_common/components/sidebar/sidebar-author.styl
   加入下面代码：

   .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为循环播放) ]*/
     /* 鼠标经过头像旋转360度 */
     -webkit-transition: -webkit-transform 1.0s ease-out;
     -moz-transition: -moz-transform 1.0s ease-out;
     transition: transform 1.0s 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);
     }
   }

添加「标签」页面

1. 在/test/source目录下新建tags文件夹，在/test/source/tags下新建index.md，内容为

   ---
   title: 标签
   type: "tags"
   ---

添加「分类」页面

1. 在/test/source目录下新建categories文件夹，在/test/source/categories下新建index.md，内容为

   ---
   title: 标签
   type: "categories"
   ---

设置 字体

1. 由于引用国外字体镜像较慢，所以nexT 开放了 5 个特定范围的字体设定来解决问题。修改/test/themes/next目录下的_config.yml文件。找到font关键字，替换它下面的内容为

   font:
     enable: true
   
     # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
     host:
   
     # 全局字体，应用在 body 元素上
     global:
       external: true
       family: Monda
   
     # 标题字体 (h1, h2, h3, h4, h5, h6)
     headings:
       external: true
       family: Roboto Slab
   
     # 文章字体
     posts:
       external: true
       family:
   
     # Logo 字体
     logo:
       external: true
       family: Lobster Two
       size: 24
   
     # 代码字体，应用于 code 以及代码块
     codes:
       external: true
       family: PT Mono

设置代码高亮

1. 修改/test/themes/next目录下的_config.yml文件。修改highlight_theme关键字，共有5款主题供你选择

   highlight_theme: normal/night/night blue/night bright/night eighties

设置友情链接

1. 修改/test/themes/next目录下的_config.yml文件。找到Blog rolls进行设置

   # Blog rolls
   links_icon: link （icon图标）
   links_title: 友情链接 （文字描述）
   #links_layout: block （设置链接是一行展示一条）
   links_layout: inline （设置链接是一行展示多条）
   links:
     test: http://macshuo.com/ （链接的名字和地址）

设置博客置顶

1. 安装插件

   $ npm uninstall hexo-generator-index --save
   $ npm install hexo-generator-index-pin-top --save

2. 设置置顶标志：打开/test/themes/*/layout/_macro/post.swig在<div class="post-meta">下方插入代码：

   {% if post.top %}
      <i class="fa fa-thumb-tack"></i>
      <font color=808080>置顶</font>
      <span class="post-meta-divider">|</span>
   {% endif %}

3. 然后在需要置顶的文章的Front-matter中加上top即可：

   ---
   title: 2018
   date: 2018-10-25 16:10:03
   top: 100
   ---

设置和优化打赏

1. 点击进入在线生成二维码生成自己的微信和支付宝二维码。下载下来保存到/test/themes/next/source/images中

2. 修改/test/themes/next目录下的_config.yml文件。找到Reward关键字进行配置

   -Reward
   reward_comment: 谢谢打赏，好人一生平安 （打赏的描述）
   wechatpay: /images/weixin.png （微信二维码）
   alipay: /images/zhifubao.png （支付宝二维码）

3. 移除打赏抖动，修改/test/themes/next/source/css/_common/components/post/post-reward.styl，注释以下代码

   /* 注释文字闪动函数
   #wechat:hover p{
     animation: roll 0.1s infinite linear;
     -webkit-animation: roll 0.1s infinite linear;
     -moz-animation: roll 0.1s infinite linear;
   }
   #alipay:hover p{
     animation: roll 0.1s infinite linear;
     -webkit-animation: roll 0.1s infinite linear;
     -moz-animation: roll 0.1s infinite linear;
   }
   #bitcoin:hover p {
     animation: roll 0.1s infinite linear;
     -webkit-animation: roll 0.1s infinite linear;
     -moz-animation: roll 0.1s infinite linear;
   }
   */

每篇文章后添加结束标语

1. 新建文件，在/test/themes/next/layout/_macro中新建passage-end-tag.swig文件，添加代码至该文件中：

   <div>
       {% if not is_index %}
           <div style="text-align:center;color: #ccc;font-size: 15px;letter-spacing: 5px;margin-top: 35px;">----------本文结束<i class="fa fa-paw"></i>感谢您的阅读-----------</div>
       {% endif %}
   </div>

2. 修改post.swig，打开/test/themes/next/layout/_macro/post.swig文件，在post-body后，post-footer前，添加下面内容：

   <div>
     {% if not is_index %}
       {% include 'passage-end-tag.swig' %}
     {% endif %}
   </div>

3. 修改_config，打开/test/themes/next/下的_config.yml，在末尾添加：

   # 文章末尾添加“本文结束”标记
   passage_end_tag:
     enabled: true

添加转载协议声明

1. 打开/test/themes/next/下的_config.yml，找到Declare license on posts，配置

   # Declare license on posts
   post_copyright:
     enable: true
     license: CC BY-NC-SA 3.0
     license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

2. 打开/test下的_config.yml，找到URL，配置

   # URL
   url: <你的github博客地址>

主题优化

实现fork me on github

1. 选择样式GitHub Ribbons：https://github.blog/2008-12-19-github-ribbons/
2. 修改图片跳转链接,将<a href="https://github.com/you">中的链接换为自己Github链接
3. 打开/test/themes/next/layout/_layout.swig 文件，把代码复制到<div class="headband"></div>下面。

   <a href="https://github.com/tmgycsz/tmgycsz.github.io" class="forkme" target="_blank">
      <img style="position: absolute; right: 0px;" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
   </a>

添加点击爱心效果

1. 在/test/themes/next/source/js/src文件夹下创建clicklove.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);

2. 在/test/themes/next/layout/_layout.swig文件末尾添加：

   <!-- 页面点击小红心 -->
   <script type="text/javascript" src="/js/src/clicklove.js"></script>
   `

添加网页崩溃欺骗特效

1. 在/test/themes/next/source/js/src文件夹下创建crash_cheat.js，添加代码：

   <!--崩溃欺骗-->
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
            clearTimeout(titleTime);
        }
        else {
            document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
            titleTime = setTimeout(function () {
                document.title = OriginTitle;
            }, 2000);
        }
    });

2. 在/test/themes/next/layout/_layout.swig文件末尾添加：

   <!--崩溃欺骗-->
   <script type="text/javascript" src="/js/src/crash_cheat.js"></script>
   `

添加访问不蒜子统计

1. 打开/test/themes/next/下的_config.yml，找到busuanzi_count，配置

   busuanzi_count:
     enable: true 
     total_visitors: true （总的访客人数）
     total_visitors_icon: user （访客人数图标）
     total_views: true （总的访问量）
     total_views_icon: eye （访问量图标）
     post_views: true （文章总阅读次数）
     post_views_icon: eye（文章总阅读图标）

添加评论系统Valine

1. 请先注册LeanCloud, 注册成功进入应用列表页面，创建应用。进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了。

2. 打开/test/themes/next/下的_config.yml，找到valine，配置

   valine:
     enable: true
     appid:  dHAGLgRYVcYtd02p3WpBLKiQ-gzGzoHsz
     appkey: DtL0hVwsWFyrDdw4QPWhg9zR
     notify: false （邮件提醒，回复是否发送到邮箱）
     verify: false （回复是否需要验证）
     placeholder: Just go go （回复框占位符）
     avatar: mm # gravatar style
     guest_info: nick,mail,link （评论可以填写的信息）
     pageSize: 10 # （每页显示多少条评论）

添加文章字数统计和预计阅读时间

1. 打开/test/themes/next/下的_config.yml，找到post_wordcount，配置

   post_wordcount
     item_text: true
     wordcount: true
     min2read: true
     totalcount: true
     separated_meta: true`

实现本地搜索

1. /test目录下下载插件

   $ npm install hexo-generator-searchdb --save

2. 修改/test下的_config.yml，新增以下内容到任意位置：

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

3. 打开/test/themes/next/下的_config.yml，找到post_wordcount，配置

   local_search:
     enable: true
     trigger: auto （搜索方式：是输入的时候搜索还是回车或搜索键搜索）
     # show top n results per article, show all results by setting to -1
     top_n_per_article: 1

参考文档

next文档： http://theme-next.iissnan.com/

有什么问题欢迎在下方指出

还有其它优化，持续更新中。。。