博客系统使用说明

本文介绍了Hexo编写博客的流程，记录了在原主题上做的修改，博客系统迁移流程，博客SEO方法及其优化，还有Hexo内容生成原理，以及一些相关的资源链接。

写博客流程

1. 在./source/_posts文件夹新建.md文档，或者在根目录执行以下命令（推荐）, 补全生成文档的头信息，然后编写博客内容

$ hexo new "My New Post" 

More info: Writing

2. 生成静态文件

$ hexo generate

More info: Generating

3. 部署到Github

$ hexo deploy

More info: Deployment

博客系统优化说明

本博客系统相比于原生的Matery主题做了一些代码上的修改

1. Gitalk评论系统优化

因为gitalk使用的是GitHub的issue功能实现的评论系统，所以每次加载时都需要访问GitHub，而在国内访问的网络情况有时不太好，造成评论加载不出来或者评论者的头像加载不出来，针对这个问题我做了一些优化

1. 当评论完全加载不出来时，会出现 Error: Network Error 的提示，这样的颜色太显眼，以及内容不友好。可以通过修改./themes/hexo-theme-matery/source/libs/gitalk/gitalk.min.js对应位置的内容来修改错误提示的内容，同样可以修改./themes/hexo-theme-matery/source/libs/gitalk/gitalk.css对应位置的内容来修改字体颜色和大小.
2. 当评论加载出来了但是头像加载不出来时就会产生图片空缺位，很影响美观，可以在./themes/hexo-theme-matery/layout/_partial/gitalk.ejs最后添加下面的代码，可以使用默认的头像进行替代.

<script>
function getMyHashCode(str,caseSensitive){
    if(!caseSensitive){
        str = str.toLowerCase();
    }
    var hash = 1315423911,i,ch;
    for (i = str.length - 1; i >= 0; i--) {
        ch = str.charCodeAt(i);
        hash ^= ((hash << 5) + ch + (hash >> 2));
    }
    return (hash & 0x7FFFFFFF);
}
function imgErrorProcess(e){
        var elem = e.target;
        if(elem.tagName.toLowerCase() === 'img' && elem.getAttribute("class") === "darcyuniqueimglabel"){
            if(elem.src.indexOf("/medias/erravatardarcy/")<0){
                var name = elem.getAttribute("alt");
                var imgNum = (getMyHashCode(name) % 50 + 50) % 50;
                elem.src = '/medias/erravatardarcy/'+imgNum+'.jpg';
            }
    }
}     
document.addEventListener("error", imgErrorProcess, true /*指定事件处理函数在捕获阶段执行*/);
</script>

2. 文章阅读界面优化

在阅读文章时，顶部的导航栏占据了很大部分的显示区域，所以我将其改为了在滑动到正文的时候就隐藏顶部的导航栏，任何时候只要向上滑动就显示出导航栏。将下面代码添加到./themes/hexo-theme-matery/layout/_partial/post-detail.ejs即可实现该功能.

<script>
<!-- 文章内容详情页面对顶部导航栏的隐藏于显示 -->
   THEIGHT = 0;
   $(document).scroll(function() {
           var docscroH = $(document).scrollTop();  //滚动高度
           var winH = $(window).height();  //可见高度 
           var docH = $(document).height();  //内容高度

           if(docscroH - THEIGHT > 0 ) {  
               if(docscroH >= 99 && (docH - (docscroH + winH) >= 50 )){  //距离顶部大于100px且距离底部大于50时
                        if(THEIGHT<100){
                            $('#headNav').slideUp(0);
                        }
                        else {
                            $('#headNav').slideUp(500);
                        }
                    }
               if (docH - (docscroH + winH) < 50 ){  //滚动条滑到底部
                    $('#headNav').slideDown(300);
               }
           }
           else{
               $('#headNav').slideDown(200);
           };        
           THEIGHT = docscroH;
       });

</script>

博客系统迁移

1. 将完整的Blog文件夹拷贝（可以使用Github同步或者OneDrive等云服务同步）到新的电脑上；

2. 在新的电脑上安装Node.js(建议使用 Node.js 10.0 及以上版本)，安装Git。对于中国大陆地区用户，可以前往 淘宝 Git for Windows 镜像 下载 git 安装包；

3. 使用以下命令安装Hexo：

   $ npm install -g hexo-cli

4. 迁移完成，即可正常使用。

博客SEO

1. Hexo 博客提交百度、谷歌搜索引擎收录
2. Hexo博客提交链接到搜索引擎来收录
3. 百度和谷歌收录博客
4. Hexo进行SEO优化，添加Sitemap

Hexo工作原理

Hexo文件生成方式

1. 系统插件生成

这一部分内容是由/node_modules文件夹中的各种生成器生成的，典型代表就是archives、categories和tags文件夹，这三个文件夹的内容分别是由/node_modules文件夹中的hexo-generator-archive、hexo-generator-category和hexo-generator-tag三个生成器生成的。更多生成器可以去Hexo插件网站查找。

2. 用户内容生成

这一部分内容就是根据用户在/source文件夹以及/source/_posts文件夹中的.md以及.html文件生成的。其中.md文件需要根据其Front-matter中指定的layout进行生成（这里的layout是在主题文件夹的/source文件夹中的EJS文件），.html文件则直接复制过去。如/source/about/index.md生成后的文件就是/public/about/index.html。/source/_posts文件夹中的.md文件生成后就在对应的日期文件夹中。

layout中部分变量说明

更全的详细信息见官网的变量说明

1. 单个EJS文件中定义的局部变量可以直接使用JavaScript语法定义，如：

<%
    var menuMap = new Map();
    menuMap.set("Index", "首页");
    menuMap.set("Tags", "标签");
    menuMap.set("Categories", "分类");
    menuMap.set("Archives", "归档");
    menuMap.set("About", "关于");
    menuMap.set("Contact", "留言");
    menuMap.set("Friends", "友链");

    var configRoot = config.root
    configRoot = (configRoot === null || configRoot === undefined || configRoot === '/') ? '' : configRoot;
%>

2. 主题配置文件变量，使用方法是theme.name
3. Hexo系统配置文件变量，使用方法是config.name
4. 还有一个数据文件夹功能，要将json或yaml文件放在/source/_data中，然后可以通过site.data.fileName来获取其中的数据。使用示例如下：

<article id="friends-link">
    <% if (site.data && site.data.myda) { %>
    <% var friends = site.data.friends; %>
    <div class="row tags-posts friend-all">
        <% for (var i = 0, len = friends.length; i < len; i++) { %>
        <% var friend = friends[i]; %>
        <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
            <div class="card frind-card<%- ((i % 10) +1) %>">
                <div class="frind-ship">
                    <div class="title">
                        <img src="<%- url_for(friend.avatar) %>" alt="img">
                        <div>
                            <h1 class="friend-name"><%= friend.name %></h1>
                            <p style="position: relative;top: -35px;"><%= friend.introduction %></p>
                        </div>
                    </div>
                    <div class="friend-button">
                        <a href="<%- url_for(friend.url) %>" target="_blank"
                            class="button button-glow button-rounded button-caution">
                            <%= friend.title %>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <% } %>
    </div>
    <% } %>
</article>

5. 有一种双下划线函数变量，使用格式如下所示。这种变量目前都是用来提取主题的language文件夹对应文件中的变量。下例中的__('publishDate')表示的是当前语言文件中publishDate变量的值。

<div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i><%- __('publishDate') %>:&nbsp;&nbsp;
                    <%- __('publishDate') %>
                    <%- date(page.date, 'YYYY-MM-DD') %>
                </div>

下面是一些制作Hexo主题的教程，里面也包含了对Hexo工作原理的解析：

Hexo主题开发

Hexo主题开发经验杂谈

相关资源参考

好用的配色网站：主题配色
网站设计图标：图标
搭建博客网站可以参考的教程：Guideline Blog