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 [email protected] %}
    {% label [email protected] %}
    {% label [email protected] %}
    {% label warning@warning %}
    {% label [email protected] %}
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






关于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,复制其中的超链代码。
本文结束啦 感谢您阅读
路漫漫其修远兮 吾将上下而求索