Fork me on GitHub

搭建hexo博客+next主题优化

发表于 | 更新于 | 分类于 | 阅读次数：

一、了解hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

二、安装hexo

安装部分请参阅hexo官方文档里面有详细的安装使用图文和视频教程！

三、应用next主题

详细的安装使用教程可以参阅NexT使用文档

  • 说到这里，不得不提一下GitHub。GitHub可真是个好东西，里面有很多牛人分享了很多值得我们学习的开源资源，有不懂的地方还可以向大牛提问超赞。GitHub几乎是全英文的所以适当提高英文水平也是必要的，能看懂别人说的是啥就差不多了。看不懂也不要紧可以借助翻译工具和Google百度等“老师”来帮助我们理解。

四、主题优化

4.1设置主题风格

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse # 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
#scheme: Mist # Muse 的紧凑版本，整洁有序的单栏外观
scheme: Pisces # 双栏 Scheme，小家碧玉似的清新
#scheme: Gemini # 类似 Pisces

4.2设置菜单项的显示文本和图标

设置菜单项的显示文本和图标

  • NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

4.3设置菜单项对应的文件目录

  • 打开themes/next下的_config.yml文件，搜索 menu关键字，以#注释原有的菜单项，或者新增新的菜单项。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------

    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
    menu:
      home: /
      categories: /categories/
      #about: /about/
      archives: /archives/
      #tags: /tags/
      #sitemap: /sitemap.xml
      #commonweal: /404/
      #新增menu
      catalogue: /catalogues/
  • 除了home，archives,/后面都需要手动创建这个页面

    4.3.1创建菜单项对应文件目录

  • 以分类为例
    1
    2
    $ cd your-hexo-site
    $ hexo new page categories
  • 编辑刚新建的页面,设置分类
    1
    2
    3
    4
    title: categories
    date: 2017-07-10 16:36:26
    type: "categories"
    comments: false

4.4头像设置

4.4.1添加头像

  • 打开themes/next下的_config.yml文件，搜索 Sidebar Avatar关键字，去掉avatar前面的#
    1
    2
    3
    4
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.jpg
    # in site  directory(source/uploads): /uploads/avatar.jpg
    avatar: http://example.com/avatar.png
  • 或者使用本地图片,把图片放入themes/next/source/images下,修改avatar
    1
    avatar: /images/blogLogo.png

4.4.2设置头像边框为圆形框

  • 打开位于themes/next/source/css/_common/components/sidebar/下的sidebar-author.syl文件,修改如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
     // 修改头像边框
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
    }

4.4.3特效：鼠标放置头像上旋转

  • 打开同上文件修改为：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
     // 修改头像边框
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      // 设置旋转
      transition: 1.4s all;
    }
    // 可旋转的圆形头像,`hover`动作
    .site-author-image:hover {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -transform: rotate(360deg);
    }

4.5好玩的写作样式

  • NexT 主题自带的标签样式，请参阅 NexT内建标签
  • 在主题配置文件_config.yml里有一个关于这个的配置，但官方文档没有提供 HTML 的使用方式，个人认为这种方式更简单，也不会产生一些奇怪的显示 bug……
    首先可以在主题配置文件中修改配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Note tag (bs-callout).
    note:
      # 风格
      style: flat
      # 要不要图标
      icons: true
      # 圆角矩形
      border_radius: 3
      light_bg_offset:
    1
    2
    3
    4
    5
    6
    7
    <div class="note default"><p>default</p></div>
    <div class="note primary"><p>primary</p></div>
    <div class="note success"><p>success</p></div>
    <div class="note info"><p>info</p></div>
    <div class="note warning"><p>warning</p></div>
    <div class="note danger"><p>danger</p></div>
    <div class="note danger no-icon"><p>danger no-icon</p></div>

    default


    primary


    success


    info


    warning


    danger


    danger no-icon

  • 主题自带样式 label 标签
    首先可以在主题配置文件中有配置，需要配置下
    1
    2
    # Label tag.
    label: true
    然后效果如下（@ 前面的是label的名字，后面的是要显示的文字）：
    1
    2
    3
    4
    5
    6
    {% label default@default %}
    {% label primary@primary %}
    {% label success@success %}
    {% label info@info %}
    {% label warning@warning %}
    {% label danger@danger %}
default primary success info warning danger
  • 主题自带样式 tabs 标签
    首先可以在主题配置文件中有配置，需要配置下
    1
    2
    3
    4
    5
    6
    7
    # Tabs tag.
    tabs:
      enable: true
      transition:
        tabs: true
        labels: true
      border_radius: 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% tabs 选项卡, 2 %}
    <!-- tab -->
    **这是选项卡 1** hello thank you thank you vary much
    <!-- endtab -->
    <!-- tab -->
    **这是选项卡 2**
    <!-- endtab -->
    <!-- tab -->
    **这是选项卡 3** 我是老三！
    <!-- endtab -->
    {% endtabs %}

这是选项卡 1 hello thank you thank you vary much

这是选项卡 2

这是选项卡 3 我是老三！

  • 按钮。示例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    {% button #, Text %}
    {% btn #, Text %}{% btn #, Text & Title,, Title %}
    {% btn #, Text %} {% btn #, Text & Title,, Title %}
    {% btn #, Text %}
    {% btn #, Text & Title,, Title %}
    {% btn #,, home fa-5x %}
    {% btn #,, home fa-4x %}
    {% btn #,, home fa-3x %}{% btn #,, home fa-2x %}{% btn #,, home fa-lg %}{% btn #,, home %}
    {% btn #, Text & Icon (buggy), home %}
    {% btn #, Text & Icon (fixed width), home fa-fw %}
    {% btn #, Text & Large Icon, home fa-fw fa-lg %}
    {% btn #, Text & Large Icon & Title, home fa-fw fa-lg, Title %}
    {% note default %}
    {% btn #, Text & Icon, home fa-fw %}
    {% btn #,, home, Title %}{% btn #, Text %}
    {% endnote %}
    <div class="text-center"><span>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</span>
    <span>{% btn #,, italic %}{% btn #,, scribd %}</span>
    <span>{% btn #,, google %}{% btn #,, chrome %}{% btn #,, opera %}{% btn #,, diamond fa-rotate-270 %}</span></div>
    <div class="text-center">{% btn #, Almost, adn fa-fw fa-lg %} {% btn #, Over, terminal fa-fw fa-lg %}</div>
    <div class="text-right">
    {% btn #, Test is finished., check fa-fw fa-lg, Button tag test is finished. %}
    </div>
Text

TextText & Title

Text Text & Title

Text

Text & Title


Text & Icon (buggy) Text & Icon (fixed width)


Text & Large Icon Text & Large Icon & Title


Text & Icon
Text




Almost Over


Test is finished.

关于next主题优化的更多使用可以前往这个页面查看。
关于按钮的更多使用可以前往这个页面查看。

4.6.1文章底部添加结束语

  • 打开\themes\next\layout_macro\post.swig文件，在post-body后，post-footer前，添加下面内容(注意缩进)：
    1
    2
    3
    {% if theme.passage_end_tag.enabled and not is_index %}
        <div style="text-align: center;font-size: 13px;letter-spacing: 10px;user-select: none;margin-top: 50px;color: #bbb;">本文结束啦 <i class="fa fa-paw"></i> 感谢您阅读</div>
    {% endif %}
  • 打开主题配置文件（_config.yml),在末尾添加：
    1
    2
    3
    # 文章末尾添加“本文结束”标记注意缩进 2个空格
    passage_end_tag:
      enabled: true
  • 还可以通过include方式来添加
    \themes\next\layout\_macro\passage-end-tag.swig
    1
    <div style="text-align: center;font-size: 13px;letter-spacing: 10px;user-select: none;margin-top: 50px;color: #bbb;">本文结束啦 <i class="fa fa-paw"></i> 感谢您阅读</div>
    1
    2
    3
    {% if theme.passage_end_tag.enabled and not is_index %}
        {% include 'passage-end-tag.swig' %}
    {% endif %}

4.7添加页面崩溃欺骗搞怪

  • 在next\source\js\src文件夹下创建crash_cheat.js，添加代码：
crash_cheat.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--崩溃欺骗-->
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         document.title = '哦豁~页面崩溃啦 ~';
         clearTimeout(titleTime);
     }
     else {
         document.title = '嘿！又好了~' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
  • 在next\layout_layout.swig文件中，添加引用（注：在swig末尾添加）：
1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

4.8静态资源压缩

不知是主题原因还是其他原因，生成的静态文件存在大量空白，在一定程度上影响了网页加载。网上寻找解决方案,可以对文件进行压缩。
使用hexo-neat压缩静态资源
Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源
Hexo+Next个人博客主题优化

4.9添加github Ribbons和github Corners

  • github Ribbons
    12种样式的GitHub彩带，复制其中的超链代码。
    在themes\next\layout_layout.swig目录下找到头部彩带相关的代码：
    1
    <div class="headband"></div>
    在这里的div标签内部添加我们刚刚复制的超链代码，并修改超链指向GitHub地址：
    1
    2
    3
    <div class="headband">
        <a href="https://github.com/dp1224"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://lee1224-1257254543.file.myqcloud.com/githubRibbons/onuse.png" alt="Fork me on GitHub"></a>
    </div>
  • github Corners(GitHub banner)
    next主题自带
    GitHub Corners，复制其中的超链代码。
本文结束啦 感谢您阅读
路漫漫其修远兮 吾将上下而求索