hexo博客搭建及其美化

作者: Hansybx | 来源:发表于2019-07-01 20:08 被阅读84次

1博客搭建

直接传送到我自己的博客的传送门
移动端可能会有点丑，因为我还没有对他进行优化。。。

1.1环境准备

1.1.1已经安装Node.js

1.1.2已有GitHub账户
1.1.3已安装Git

1.2github page 配置

1.2.1新建仓库

项目名必须严格遵守格式用户名.github.io格式，不然可能会有许多不必要的麻烦。并且勾选Initialize this repository with a README。

1.3本地构建

1.3.1安装hexo

在任意磁盘安装hexo，我就是选择在G盘新建了一个blogs文件夹，在里面下载。

通过命令行进入对应位置

输入npm install hexo -g，开始安装Hexo
在输入hexo -v检查是否成功安装hexo

成功安装显示样式

输入hexo init对文件夹进行初始化，初始化之前请确保文件夹为空，否则将无法正常进行初始化。

输入npm install安装相关插件

输入hexo g，进行生成静态文件，再输入hexo s就可以进行本地预览了。

hexo s

预览成功显示样式

问题：假如页面一直无法跳转，那么可能端口被占用了。此时我们ctrl+c停止服务器，接着输入“hexo server -p 端口号”来改变端口号，再次进行预览就可以了。

1.3.2将Hexo与Github page联系起来

设置Git的user name和email（如果是第一次的话）
在当前文件夹下右键Git Bash Here ，输入

$ git config --global user.name "hansybx"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

输入cd ~/.ssh，检查是否有.ssh的文件夹
输入ls，列出该文件下的内容。下图说明存在

成功示例

输入ssh-keygen -t rsa -C "xxx@qq.com"，连续三个回车，生成密钥，最后得到了两个文件：id_rsa和id_rsa.pub（默认存储路径是：C:\Users\Administrator.ssh）。

登录Github，点击头像下的settings，在点击 SSH and GPG keys 去新建一个ssh keys。title随便取，将id_rsa.pub文件里的内容复制到key中。

输入ssh -T git@github.com，测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了.

成功示例

1.3.2本地文件配置

配置Deployment，在其文件夹中，找到_config.yml文件，修改repo值

示例

github.io.git前的用户名更改为自己的github账户名即可

hexo官方文档传送门

2.主题选择

2.1关于主题，我选择了NexT，原因有以下几个：

1.首先是因为它是一个非常简洁干净的一个框架
2.其次是它在GitHub上的star数非常高，而且使用它的人数非常之多，这样当我们在遇到问题时可以获得很多的解决办法。
3.NexT官方文档传送门

2.2主题更换

在博客所在目录下的theme文件夹下使用
git clone https://github.com/theme-next/hexo-theme-next.git next

在使用hexo初始化的文件夹下的_config.yml即站点配置文件中进行主题更换，在theme/next文件夹下的_config.yml即主题配置文件中进行主题的修改。

因此我们在站点配置文件下进行一下修改：

主题更换

3主题美化

3.1添加标签分类等页面

menu:
  home: / || home  #首页及其对应图标
  tech: /categories/tech/ ||anchor   #对应分类及图标
  life: /categories/life/ ||tree   #对应分类及图标
  archives: /archives/ || archive  #归档
  about: /about/ || grav  #关于页面

3.2侧边栏社交链接

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink.
# Value after `||` delimiter is the name of FontAwesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/Hansybx || github
  简书: https://www.jianshu.com/u/37e9e69cd517 || book
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  icons_only: false
  transition: false

显示示例

3.3底部显示建站时间和图标修改

修改主题配置文件

# Specify the date when the site was setup
since: 2018 # 建站年份

# icon between year and author @Footer
authoricon: snowflake-o #图标会显示为一个雪花的样式

3.4统计网站与文章的浏览人数及次数

首先修改主题配置文件中的自带的不蒜子统计功能

busuanzi_count:
  enable: falsse
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

接着修改\themes\next\layout\_third-party\analytics文件下的busuanzi_count.swig文件如下：

{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item-icon">
      <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
    </span>
    <span class="site-uv" title="{{ __('footer.total_visitors') }}">
      已有<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人访问
    </span>
  {% endif %}

  {% if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
    <span class="post-meta-divider">|</span>
  {% endif %}

  {% if theme.busuanzi_count.total_views %}
    <span class="post-meta-item-icon">
      <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
    </span>
    <span class="site-pv" title="{{ __('footer.total_views') }}">
      总访问<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次
    </span>
  {% endif %}
</div>
{% endif %}

3.5GitHub Corners实现

这里有样式1和样式2两种样式，选择自己喜欢的，将源码复制后粘贴到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址。代码如下：

  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>
    <a href="https://github.com/Hansybx" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222222; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
    </header>

3.6时间轴的页面分隔

ps：这里以category为例，tag也是一样的原理

3.6.1category

文件位置/themes/next/layout/category.swig,进行如下修改

{% block content %}

  {######################}
  {### CATEGORY BLOCK ###}
  {######################}
  <div class="post-block category">
    <div id="posts" class="posts-collapse">
      <div class="collection-title">
        <{% if theme.seo %}h2{% else %}h1{% endif %}>{#
        #}{# page.category #}{#
        #}{#<small>{{ __('title.category') }}</small>#}
        </{% if theme.seo %}h2{% else %}h1{% endif %}>
      </div>

      {% for post in page.posts %}
          {# Show year #}
          {% set year %}
          {% set post.year = date(post.date, 'YYYY') %}

          {% if post.year !== year %}
            {% set year = post.year %}
            <div class="collection-title">
             <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
            </div>
          {% endif %}
          {# endshow #}
        {{ post_template.render(post) }}
      {% endfor %}
    </div>

  </div>
  {##########################}
  {### END CATEGORY BLOCK ###}
  {##########################}

  {% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% if theme.use_motion %}
    <script type="text/javascript" id="motion.page.archive">
      $('.archive-year').velocity('transition.slideLeftIn');
    </script>
  {% endif %}
{% endblock %}

3.6.2tag

修改文件/themes/next/layout/tag.swig，修改方法一样。

3.7修改主题的scheme

'#'为注释，修改scheme前的#，即可改变主题的scheme

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

3.8修改侧边栏位置

3.8.1 Pisces 或Gemini

这两个scheme是可以直接在主题配置文件中修改显示位置的，下面就是侧边栏在右面的代码

sidebar:
  # Sidebar Position, available values: left | right (only for Pisces | Gemini).
  #position: left
  position: right

3.8.2 Muse 或 Mist

这两个scheme是不支持在主题配置文件中修改的，他们的侧边栏是默认在右侧的，下面是将它修改到左侧的方法。直接修改对应文件即可。
1.sidebar.styl
路径：.\themes\next\source\css\_common\components\sidebar\
将此文件的第3行right改为left

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;

2.sidebar-toggle.styl
路径：.\themes\next\source\css\_common\components\sidebar\
同样将第3行冒号前的right改为left

left: $b2t-position-right;

3.back-to-top.styl
路径：.\themes\next\source\js\src\motion.js
利用搜索功能找到改文档中的paddingRight字段，将paddingRight改为paddingLeft(共两处)。

4.bug修改
找到./themes/source/js/src/motion.js文件，在$(document).ready(function (){})内添加内容：

$(document).ready(function () {

    window.onload=function(){
        var bwol=document.body.offsetWidth;
        if(bwol < 975){
        $('aside#sidebar').css("display","none");
        $('body').css("paddingLeft","0px");
        }
    }
    window.onresize = function(){
        var bwos=document.body.offsetWidth;
        bwos < 975 && $('body').velocity('stop').velocity({paddingLeft: 0},0);
        if($('aside#sidebar').css('display') != 'none' && $('aside#sidebar').css('width')!='0px')
        $('body').velocity('stop').velocity({paddingLeft: 350},0);
    }

       NexT.motion = {};
       
       ...

4.推荐阅读

一休儿大佬的博文
 思否上一篇关于NexT主题优化的文章