blog的搭建

此博客是github，用hexo，并用使用next主题进行配置和搭建。

吐槽一下，作为一名纯种的后端搭建blog，尽管网上有说明，但是还是觉得有些许吃力。特别是我换顶部图片，简直是我一步一步试出来的

搭建步骤

注册一个github，并且新建一个名字一样的github仓库
配置本地的hexo环境
下载next主题
直接在_posts下开始写博客
大功告成

注意：

问题1：背景图片更换

解决：在main.styl加入@import "_custom/styles.styl"，背景图片放在themes\next\source\images文件夹中，本地创建themes\next\source\css\ _custom\style.styl文件。

body {
background: url(/images/图片名);
background-repeat: no-repeat;// 设定背景图片非重复填充
background-attachment: fixed;// 设置背景图片不随页面滚动
background-position: 50% 50%;// 设置背景图片位置
background-size: cover//
}

问题2：顶部图片更换

解决：在headerband.styl中插入下面那句话，背景图片放在站点的source/image下

.headband {
  //background: $headband-bg;
    background: url('../../image/header-bg.jpg');
  height: 180px;
}

问题3：文章置顶

解决：直接复制替换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.sort(config.index_generator.order_by);

  posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          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
    }
  });
};

配置插件

$ npm uninstall hexo-generator-index –save

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

然后在需要置顶的文章的Front-matter中加上top: true或者top数字top: 1：

title: 置顶
date: 2019-09-09 09:09:09
top: true
top: 1

按照数字大小依次往下置顶排序

问题4：博客提交

解决：调用blog_push.sh是提交，blog_localtest.sh是在本地查看

问题5：blog文章中图片添加

解决：在_post目录下创建一个同名文件夹，放图片，在文章中插入![图1](1.png)。

环境安装

Node.js 安装，node在debian仓库只有10版本，hexo需要12以上参考解决方案,安装时必须在梯子环境下

sudo curl -sL https://deb.nodesource.com/setup_lts.x -o nodesource_setup.sh
#将nodesource_setup.sh中 DISTRO=$(lsb_release -c -s) 修改为 DISTRO=stable
sudo bash nodesource_setup.sh
sudo apt-get install -y nodejs
node -v

问题4：添加全屏背景并文章透明

在hexo/source/images下增加图片background.jpg

在 hexo/themes/hexo-theme-next/source/_data下新建styles.styl文件，文件内容为

body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    // background-size: 100% 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
}

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.8;
}
.main-inner { 
   // margin-top: 60px;
   // padding: 60px 60px 60px 60px;

    //opacity: 0.8;
}


//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.8;
}

.post-block {
    background: rgba(255,255,255,0.7) none repeat scroll !important;
}

.sidebar-inner {
  background: rgba(255,255,255,0.7) none repeat scroll !important;
}

Link Mecry

【问题解决】博客搭建