Github + Hexo + Next主题博客搭建教程

环境配置

在正式安装 Hexo 之前，我们需要确认电脑中是否已安装下列应用程序:

• GitHub 账号
• Node.js

  查看Node版本：node -v

• Git

  查看git版本：$ git version

  在本地安装Hexo

  所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。在blog文件下右键点击Git Bash here，输入如下命令:

  常用命令

  hexo g #完整命令为hexo generate,生成静态文件
  hexo s #完整命令为hexo server,启动服务器,本地可以测试
  hexo d #完整命令为hexo deploy,将本地编译好的静态文件发布到github上
  hexo n #完整命令为hexo new,新建一篇文章
  hexo clean #清除当前项目的静态文件
  hexo clean && hexo g && hexo s
  hexo clean && hexo douban -bgm && hexo g && hexo s #加载豆瓣插件部署博客

  安装hexo

  npm install -g hexo

  初始化博客

  ~/blog $ hexo init

  生成和本地预览

  ~/blog $ hexo g && hexo s

  查看浏览器:localhost:4000

  

  部署博客到 GitHub Pages

  具体可以参考

  博客美化

  两个yml文件

• 站点配置文件，位于站点文件夹根目录内
  • ~/blog/_config.yml
• 主题配置文件，位于主题文件夹根目录内
  • ~/blog/themes/next/_config.yml

    主题更换

    如更换成yilia主题
• 下载主题
  • git clone https://github.com/litten/hexo-theme-yilia.git
• 配置文件 _config.yml 中指定所使用的 theme：yilia
• 安装插件
  • npm install –save-dev 插件名
• 注：可以使用cnpm替换npm，下载速度更快

  yilia主题

1. 起初小杨是根据B站视频来搭建的，选择的yilia主题hexo + yilia主题
   但是主题里面都没有很是中意的，遂改成了Next主题，更加符合我的审美。
2. 具体的主题优化配置可以参考如下文档:
   • Hexo_yilia_主题一揽子优化方案
   • 集成码云和github评论

Next主题

###动态背景

• 在主题配置文件中，靠后面，改 canvas_nest: true，想要更改颜色和数量？请参考
  修改文件：

  文件位置：~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js
  ###使用腾讯云给博客添加动态相册功能
  参考小鸡，哈哈，所有的坑我都踩过一遍了，最后幸好出来了
  基于此，完善步骤如下：

1.创建腾讯云cos存储桶

2.跨域访问cors设置

• 在基础配置中找到cors设置
  
  origin源可以先填为*，然后后面成功了再改成自己的博客地址
  

3.Policy权限设置

• 存储桶访问权限：一般共有读私有写就行, 权限不配置访问存储桶域名可能会依然出现error节点
  

4.本地创建相册页面
>$ hexo new page photos
* 编辑source/photos路径下的index.md文件，写入以下代码:

<div id="box" class="box"></div>

<script type="text/javascript">

function loadXMLDoc(xmlUrl) 
{
    try //Internet Explorer
    {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    }
    catch(e)
    {
    try //Firefox, Mozilla, Opera, etc.
        {
        xmlDoc=document.implementation.createDocument("","",null);
        }
    catch(e) {alert(e.message)}
    }
    
    try 
    {
        xmlDoc.async=false;
        xmlDoc.load(xmlUrl);
    }
    catch(e) {
        try //Google Chrome  
        {  
            var chromeXml = new XMLHttpRequest();
            chromeXml.open("GET", xmlUrl, false);
            chromeXml.send(null);
            xmlDoc = chromeXml.responseXML.documentElement; 				
            //alert(xmlDoc.childNodes[0].nodeName);
            //return xmlDoc;    
        }  
        catch(e)  
        {  
            alert(e.message)  
        }  		  	
    }
    return xmlDoc; 
}

var xmllink="你的访问域名链接"
//访问域名链接就是我上面提到的那个访问域名xml链接

xmlDoc=loadXMLDoc(xmllink);
var urls=xmlDoc.getElementsByTagName('Key');
var date=xmlDoc.getElementsByTagName('LastModified');
var wid=250;
var showNum=12; //每个相册一次展示多少照片
if ((window.innerWidth)>1200) {wid=(window.innerWidth*3)/18;}
var box=document.getElementById('box');
var i=0;

var content=new Array();
var tmp=0;
var kkk=-1;
for (var t = 0; t < urls.length ; t++) {
    var bucket=urls[t].innerHTML;
    var length=bucket.indexOf('/');
    if(length===bucket.length-1){
        kkk++;
        content[kkk]=new Array();
        content[kkk][0]={'url':bucket,'date':date[t].innerHTML.substring(0,10)};
        tmp=1;
    }
    else {
        content[kkk][tmp++]={'url':bucket.substring(length+1),'date':date[t].innerHTML.substring(0,10)};
    }
}

for (var i = 0; i < content.length; i++) {
    var conBox=document.createElement("div");
    conBox.id='conBox'+i;
    box.appendChild(conBox);
    var item=document.createElement("div");
    var title=content[i][0].url;
    item.innerHTML="<button class=title style=background:url("+xmllink+'/'+title+"封面.jpg"+");><span style=display:inline;><strong style=color:#f0f3f6; >"+title.substring(0,title.length-1)+"</strong></span></button>";
    conBox.appendChild(item);

    for (var j = 1; j < content[i].length && j < showNum+1; j++) {
        var con=content[i][j].url;
        var item=document.createElement("li");
        item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+content[i][j].date+"</p>";
        conBox.appendChild(item);
    }
    if(content[i].length > showNum){
        var moreItem=document.createElement("button");
        moreItem.className="btn-more-posts";
        moreItem.id="more"+i;
        moreItem.value=showNum+1;
        let cur=i;
        moreItem.onclick= function (){
            moreClick(this,cur,content[cur],content[cur][0].url);
        }
        moreItem.innerHTML="<span style=display:inline;><strong style=color:#f0f3f6;>加载更多</strong></span>";
        conBox.appendChild(moreItem);
    }
}

function moreClick(obj,cur,cont,title){
    var parent=obj.parentNode;
    parent.removeChild(obj);
    var j=obj.value;
    var begin=j;
    for ( ; j < cont.length && j < Number(showNum) + Number(begin); j++) {
        console.log( Number(showNum) + Number(begin));
        var con=cont[j].url;
        var item=document.createElement("li");
        item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+cont[j].date+"</p>";
        parent.appendChild(item);
    }
    if(cont.length > j){
        obj.value=j;
        parent.appendChild(obj);
    }
}

</script>

* 相册样式可以自行去调整
* 注意：
* 存储桶中应该必须是文件夹，不能图片和文件夹同级，否则报错：Uncaught ypeError: Cannot set property ‘0’ of undefined，

手动修改博客css样式，打造属于自己的博客样式

• F12手动查看网页
• 自己主题的themes extsourcecss_custom目录下的custom.styl文件

  自定义文章底部版权声明

1. 在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：

   {% if page.copyright %}
   <div class="my_post_copyright">
   <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
   
   <!-- JS库 sweetalert 可修改路径 -->
   <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
   <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
   <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
   
   <p><span>本文标题:</span>{{ page.title }}</a></p>
   <p><span>文章作者:</span>{{ theme.author }}</a></p>
   <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
   <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
   <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
       <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
   </p>
   <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
   </div>
   <script> 
       var clipboard = new Clipboard('.fa-clipboard');
       clipboard.on('success', $(function(){
       $(".fa-clipboard").click(function(){
           swal({   
           title: "",   
           text: '复制成功',   
           html: false,
           timer: 500,   
           showConfirmButton: false
           });
       });
       }));  
   </script>
   {% endif %}

2. 在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:

   .my_post_copyright {
       width: 85%;
       max-width: 45em;
       margin: 2.8em auto 0;
       padding: 0.5em 1.0em;
       border: 1px solid #d3d3d3;
       font-size: 0.93rem;
       line-height: 1.6em;
       word-break: break-all;
       background: rgba(255,255,255,0.4);
       }
       .my_post_copyright p{margin:0;}
       .my_post_copyright span {
       display: inline-block;
       width: 5.2em;
       color: #333333; // title color
       font-weight: bold;
       }
       .my_post_copyright .raw {
       margin-left: 1em;
       width: 5em;
       }
       .my_post_copyright a {
       color: #808080;
       border-bottom:0;
       }
       .my_post_copyright a:hover {
       color: #0593d3; // link color
       text-decoration: underline;
       }
       .my_post_copyright:hover .fa-clipboard {
       color: #000;
       }
       .my_post_copyright .post-url:hover {
       font-weight: normal;
       }
       .my_post_copyright .copy-path {
       margin-left: 1em;
       width: 1em;
       +mobile(){display:none;}
       }
       .my_post_copyright .copy-path:hover {
       color: #808080;
       cursor: pointer;
       }

3. 修改 themes/next/layout/_macro/post.swig ，如下：
   在代码

   {% if theme.wechat_subscriber.enabled and not is_index %}
       <div>
           {% include 'wechat-subscriber.swig' %}
       </div>
   {% endif %}

   之前，新增如下代码：

   <div>
       {% if not is_index %}
           {% include 'my-copyright.swig' %}
       {% endif %}
   </div>

4. 打开 themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码:

   @import "my-post-copyright"

5. 设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ～/scaffolds/post.md 文件，如下：

   ---
   title: {{ title }}
   date: {{ date }}
   copyright: true #新增,开启
   ---

   建立标签云及效果展示

   Hexo博客建立标签云及效果展示

   Hexo文章简单加密访问

   教程：密码 password

   在Hexo博客中加入豆瓣读书页面

   参考链接

---

参考文档：打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
参考文档：Hexo NexT主题美化2.0