博客搭建自学注意事项

大体操作

在\hexo的_config.yml里面有

description: 好少年光芒万丈
keywords:
author: 蝉3301
language: zh-cn
timezone:

#这里注意deploy和backup的格式即可
deploy:
  type: git
  repo: 
    github: git@github.com:shijingtian/shijingtian.github.io.git
    # github: https://github.com/honjun/honjun.github.io.git
    # coding: https://git.coding.net/hojun/hojun.git
  branch: master

# backup
backup:
  type: git
  message: backup my blog of https://shijingtian.github.io/
  repository:
    github: https://github.com/honjun/honjun.github.io.git/tree/back
    #coding: https://git.coding.net/hojun/hojun.git,backup

在\themes的_config.yml里面有

# site name
prefixName: 阿天
siteName: 蝉3301
# favicon and site master avatar
favicon: /images/GhostSoul.ico
avatar: /img/custom/avatar.jpg
url: https://shijingtian.github.io
description: T R Y
cdn: https://cdn.jsdelivr.net/gh/shijingtian/cdn@master
pjax: 1

notice: PE结构研读中(IAT、EAT)
lazyloadImg: https://cdn.jsdelivr.net/gh/shijingtian/cdn@119/img/loader/orange.progress-bar-stripe-loader.svg

这里要哪个就用哪个就行，想要增加后面的zh-cn文件里面添加一下就行，后面背景什么的都一样不再赘余
menus:
  首页: { path: /, fa: fa-fort-awesome faa-shake }
  归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 
    技术: {path: /categories/技术/, fa: fa-code }, 
    # 生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    # 资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    # 随想: {path: /categories/随想/, fa: fa-commenting-o },
    # 转载: {path: /categories/转载/, fa: fa-book }

一些代码

更新中用到的代码

更新hexo到github并发布

hexo -g && -d

更新cdn

git add .
git commit -m "update"
git push

建立新的md文件

hexo new xx.md

期间遇到的坑

当时有一个social图标，wechat会有相应二维码展示，我qq用的比较多，想在qq上也用上二维码，但发现仅仅改变_config.yml的代码让其和wechat一样，发现不行,没有效果，然后就是个人的操作了。

首先去网页源码去观察到了wechat的不同之处

li class="wechat"
  a href="/#"
    img src="https://cdn.jsdelivr.net/gh/shijingtian/cdn@master/img/social/wechat.png"
  /a
  div class="wechatInner"
    img src="https://cdn.jsdelivr.net/gh/shijingtian/cdn@master/img/custom/wechat_q.png"
  /div
/li

有一个wechatInner，大概是一个已经标定好的类，于是在headertop.ejs里面找到了他，看了看语法，根据模样我在里面加了一个筛选条件

% if (i == 'wechat' || i == 'tencent') {%
    % if(i == 'wechat') {%
        li class="wechat"
          a href="%= theme.social[i].url%"
            img src="%- (theme.cdn || '') + theme.social[i].img%"
          /a
          div class="wechatInner"
            img src="%- (theme.cdn || '') + theme.social[i].qrcode%"
          /div
        /li
    %} else {%
        li class="tencent"
          a href="%= theme.social[i].url%"
            img src="%- (theme.cdn || '') + theme.social[i].img%"
          /a
          div class="tencentInner"
            img src="%- (theme.cdn || '') + theme.social[i].qrcode%"
          /div
        /li
    % } %
% } else { %
  li
    a href="%= theme.social[i].url%" target="_blank" class="social-github" title="%- i %"
      img src="%- (theme.cdn || '') + theme.social[i].img%"
    /a
  /li
% } %

运行发现还是不行，请教大神之后，明白还要在style.css文件里面添加相应的类别才行，添加如下（和wechat一致就可以）

.tencent {
    width:35px;
    height:35px;
    position:relative
}
.tencentInner img {
    border-radius:0;
    width:121px;
    height:auto;
    padding:0;
    background:none
}
.tencentInner {
    width:121px;
    height:121px;
    padding:10px;
    background:rgba(0,0,0,.4);
    top:40px;
    left:-40px;
    -webkit-transform:translate3d(0,50px,0);
    transform:translate3d(0,50px,0);
    opacity:0
}
.tencentInner:before {
    content:"";
    position:absolute;
    top:-30px;
    left:50%;
    margin-left:-15px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent rgba(0,0,0,.4) transparent
}
.tencentInner {
    position:absolute;
    border-radius:8px;
    transition:.7s all ease;
    -webkit-transition:.7s all ease;
    -moz-transition:.7s all linear;
    -o-transition:.7s all ease;
    -ms-transition:.7s all ease
}
.tencent:hover .tencentInner {
    -webkit-transform:translate3d(0,16px,0);
    transform:translate3d(0,16px,0);
    opacity:1;
    visibility:visible
}

最后实现效果

第一次完整搭建了自己的博客，学到了许多，后面就赶紧把最近学的PE文件格式的学习笔记搭上来。还是需要不断努力，翻滚吧，阿天~~~