hexo代码换行异常解决以及常用问题

原因：2017年4月17日 星期一 解决使用hexo中遇到的问题
说明：虽说不要重复制造轮子，前提是轮子跑得起来。
我的博客：http://minichao.me

简介

• 本文用于介绍使用hexo架构博客半年来的奇技淫巧，使用后才有发言权，摸着石头过河后也该搭一座自己的桥了。
• 特别感谢MOxFIVE由yilia改版而来的yelee主题。

• 本文针对hexo版本信息如下，不同版本可能并不适用。
  

  
  

  

  
  

hexo代码块解析异常

• 当时用markdown插入代码块时，hexo部署后出现代码块无法解析空行的问题，影响页面代码块的显示，如下图。
  
  
  

  

  
  
• 解决办法为修改highlight.js文件的解析办法，从div判断改为span
• 文件路径为：blog/node_modules/hexo-util/highlight.js
• 修改该文件35-38行为如下内容：

      numbers += '' + (firstLine + i) + '\n';
      content += '' + line + '\n';

• 修改后重启hexo server，显示如下。
  
  
• 成功解决无法解析换行的问题。

hexo字数统计扩展

• yelee主题使用不蒜子统计，在博客footer显示到访人数，经过使用hexo-wordcount插件可以显示文章字数,站点字数,阅读时间等功能，具体查看wordcount。
• 安装：

npm install hexo-wordcount --save

• 插件参数：

字数统计 WordCount:wordcount(post.content)

阅读时长预计 Min2Read:min2read(post.content)

总字数统计 TotalCount:totalcount(site, '0,0.0a')

• 适用于Swig,Ejs,Jade等环境，我这里yelee主题使用的是Ejs。
• 在这里介绍我是如何使用WordCount以及TotalCount功能的，Min2Read遇到了一些bug，解决后会更新。如果读者有好的解决办法也可以在评论区联系我。

---

WordCount

• 修改blog/themes/yelee/layout/_partial/post/nav.ejs文件，在第8行插入

  文章字数:<%= wordcount(post.content) %>

  //添加本行，如下：

<% if ((post.original != false && !is_page() && theme.copyright) || post.original){ %>
    

        
<%= __('copyright_info.title') %>:<%= post.title %>
        
<%= __('copyright_info.author') %>:<%=theme.author%>
        
文章字数:<%= wordcount(post.content) %>
 //添加本行
        
<%= __('copyright_info.date') %>:<%= post.date.format("YYYY-MM-DD, HH:mm:ss") %>
        
<%= __('copyright_info.updated') %>:<%= post.updated.format("YYYY-MM-DD, HH:mm:ss") %>
        

            <%= __('copyright_info.url') %>:<%= post.permalink %>
            
            
        
        

            <%= __('copyright_info.license') %>: "<%= __('copyright_info.cc') %>" <%= __('copyright_info.notice') %>
        
    
<% } %>

<% if (post.prev || post.next){ %>
    

        <% if (post.prev){ %>
            

                
                    <%= post.prev.title %>
                
            
        <% } %>
        <% if (post.next){ %>
            

                
                    <%= post.next.title %>
                
            
        <% } %>
    
<% } %>

• 在页面底部的copyright可看到多出一项文章字数:

---

TotalCount

• TotalCount可集成在底部不蒜子统计中，具体操作为：
• 修改blog/themes/yelee/layout/_partial/footer.ejs文件，在代码27行后添加：

                   
                         
                        <%= totalcount(site) %>
                    

• 添加后显示为：

    

        

            

                 
                <% if (theme.since && !isNaN(theme.since) && theme.since < date(new Date(), 'YYYY')) { %><%- theme.since%>-<% } %><%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
            
            

                Hexo  Theme Yelee by MOxFIVE 
            
        
        <% if (theme.visit_counter.on) { %>
            

                <% if (theme.visit_counter.site_visit) { %>
                    
                        
                        
                    
                <% } %>
                <% if (theme.visit_counter.site_visit && theme.visit_counter.page_visit) { %>
                    | 
                <% } %>
                <% if (theme.visit_counter.page_visit) { %>
                    
                        
                        
                    
                    | 
                    
                         
                        <%= totalcount(site) %>
                    
                <% } %>
            
        <% } %>
    

• 最终显示效果如下：

---

hexo使用图床

定义

• 就是专门用来存放图片，同时允许你把图片对外连接的网上空间，不少图床都是免费的。

---

用途

• 个人认为是开发的一种奇技淫巧了，最早的邮箱传图，简单的qq截图等都不失为一种好用的信息传递方式，但是当你书写文本，或者建设网站需要大批量插入图片时，图片的质量与大小都会制约你网站的速度和书写文本的大小，当然插入本地图片很简单。但会对你的版本发布产生一些小的麻烦。所以这里记录我自己的图床使用方式，利人利己。
• 我使用的是国内免费七牛云，快捷方便，安全免费。

用法

• 注册，登录
• 新建存储空间

• 找一个趁手的客户端，我这里用的是ipic，国内大大出品，好用简洁，只有mac
  具体使用很简单，在ipic设置好image host是七牛，填写你自己七牛账户的相应信息，大致如下图

  
  
  

  面板

• 填写好信息后，在你的内容管理内能看到最近上传了哪些图，我一般会选择上传时就压缩，精简，能看就成，质量也不差，同时可以在线下载，预览，生成外链，有了外链用处就很多了。如下图。

  
  
  

  七牛
  
  
  

  上传
• 上图转圈转了一半的就是ipic正在往服务器传送本地的图，最骚的是传送完会直接生成md格式的图片插入外链，直接ctrl+v，完成图片插入，省时省力。

---

hexo音乐Aplayer

• 插件github官方地址，有详细介绍。
• 安装插件：

npm install --save hexo-tag-aplayer

• 使用方式：

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

• 参数：

• title : music title
• author: music author
• url: music file url
• picture_url: optional, music picture url
• narrow: optional, narrow style
• autoplay: optional, autoplay music, not supported by mobile browsers
• width:xxx: optional, prefix width:, player's width (default: 100%)
• lrc:xxx: optional, prefix lrc:, LRC file url

• 例子

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "autoplay" "width:70%" "lrc:caffeine.txt" %}

---

hexo动画效果

• canvas-nest.js是一个不依赖任何框架or内库的原生js插件，非常非常小，仅有1.6kb，效果可见demo
• Ejs架构yelee使用办法：
• 在blog/themes/yelee/layout/layout.ejs的body标签内添加代码:

• 注意其中的属性分别为：
• color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
• opacity: 线条透明度（0~1）, 默认: 0.5
• count: 线条的总数量, 默认: 150
• zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

---