Hexo—Next自定义修改日志

本文用于记录本站每次更新的详情

# 2019/11/19 第一次修改

博客引用了hexo的next主题，主题github地址为https://github.com/theme-next/hexo-theme-next,按照官方文档的介绍精心了初步配置

# 把hexo项目同步到git中存储

为了将将项目文档同步到git中，保护自己在配置中的各类网站的key，按照官方的建议，把主题配置的_config.yml内容拷贝到了 /source/_data/next.yml中，上传到了自己的私有git仓库中

# 目录结构的修改

方便以后查阅自己的笔记总结，新建了一个page笔记页面，并自定义了笔记目录，由与内容比较多就，接下来会逐步更新

# 对Next主题的自定义修改

在查阅官方的Muse主题的案例推荐后，看到leaferx文档下有一个自定义的图片banner比较有范，于是查阅了博主的样式设置，由于对swig语法还不太熟悉，就简单粗暴的修改了原始模版，具体方法如下

在next主题的 _layout/_layout.swfg 的footer标签，footer-inner class 上添加如下标签

<style>
  .custom-banner{
    background-attachment: fixed;
    background-position: center bottom;
    padding: 40px 0;
    margin-bottom: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.3);
    background-image: url(/images/sea.jpg);
    background-blend-mode: darken;
  }
  .custom-banner h1 {
    text-align: center;
    color: #fff;
    font-family: fira code,consolas,Menlo,pingfang sc,microsoft yahei,monospace;
    font-style: italic;
    font-weight: 400;
  }
</style>
<div class="custom-banner">
  <h1>Stay hungary,Stay foolish.</h1>
</div>

# 引入iconfont

由于Next主题使用的fontawsome免费的icon数量不是很多，而且版本比较老旧，因此使用iconfont的图标来丰富博客的图标库，网站链接在此https://www.iconfont.cn/

修改方法：

为了方便日后直接使用，在next主题的 _layout/_layout.swfg 的头部文件中的<head>便签末尾插入以下html标签

<!-- 在iconfont生成项目后，每次添加不同的icon都会改变src地址 -->
<script src="//at.alicdn.com/t/font_1078070_hs0wiix70l.js"></script>
  <style>
  .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }
  </style>

随后在需要使用的markdown文档中使用以下标签可以使用iconfont图标,href的内容为iconfont项目内的图标标签

{% raw %}
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-php"></use>
  </svg>
{% endraw %}

# 将站点地图放置到页脚

站点地图是为了方便搜索引擎爬去信息，在layout/_partials/footer.swig中，将以下html添加到span.author标签下方

<br/>
<span class="post-meta-item-icon">
  <i class="fa fa-map" aria-hidden="true"></i>
</span>
<span class="post-meta-item-text">站点地图:</span> 
<a href="/sitemap.xml" style="color:#999">Google</a>/
<a href="/baidusitemap.xml" style="color:#999">百度</a>