Hexo+Next搭建个人博客

image
欢迎移步我的个人博客阅读。

1. 参考

Hexo官方文档
Next官方文档
Hexo+Next主题优化

2. 环境

Node.js
Git
安装Hexo：npm install -g hexo-cli

3. Hexo命令

• 生成文档：hexo init
• 运行网页：hexo s
• 生成网页：hexo g
• 清除网页：hexo clean
• 部署博客：hexo d

4. Hexo配置

4.1 网站信息

title: LIVE_下一秒
subtitle:
description: 
keywords:
author: FanJun
language: zh-Hans
timezone:

4.2 网站链接

url: http://fanjunblog.top

4.3 代码高亮

highlight:
  enable: true
  line_number: true
  auto_detect: true

4.4 主题选择

theme: next

部署设置

部署插件：npm install hexo-deployer-git --save

deploy:
  type: git
  repo: https://github.com/fjgjp/fjgjp.github.io.git
  branch: master

5. Next配置

5.1 主题选择

搜索关键字scheme，将需用启用的 scheme 前面注释#去除即可。

5.2 菜单设置

1. 开启菜单
   搜索关键字menu，去掉#注释，顺序可改。

   导航: /nav || calendar
   工具: /tools || sitemap
   categories: /categories/ || th
   archives: /archives/ || archive
   about: /about/ || user
   

2. 创建文件
   在Git bath中输入hexo n page nav创建文件，并打开。

   title: 个人导航
   date: 2018-12-25 16:39:45
   type: "nav"
   comments: false
   

   其余类似。

5.3 去除目录自弹出

搜索关键字display: remove，去除前面的#同时给display: post加上#。

5.4 开启阅读全文

搜索关键字auto_excerpt，将false改为true，字数可改。

5.5 开启浏览进度

搜索关键字scrollpercent，将false改为true。

5.6 去除底部强力驱动

在next/layout/_partials/footer.swig，删除或注释以下部分。

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

5.7 页脚文字居中

在next/layout/_partials/footer.swig中的copyright标签加入以下文字。

<div class="copyright" style="text-align:center;line-height:50px">

5.8 字数统计

安装插件：npm install hexo-wordcount --save
然后在next/layout/_partials/footer.swig文件©之前加入以下内容。

<span class="post-count">博客共{{ totalcount(site) }}字</span> 

5.9 网站Logo

把图标放在/themes/next/source/images里，搜索favicon修改。

favicon:
  small: /images/head.ico
  medium: /images/head.ico

5.10 文章末尾添加“本文结束”

在路径next/layout/_macro中新建passage-end-tag.swig文件,并添加以下内容。

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
    {% endif %}
</div>

接着打开themes/next/layout/_macro/post.swig文件，在END POST BODY下面添加以下内容。

{#####################}
{### END POST BODY ###}
{#####################}

<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
</div>

然后打开主题配置文件 _config.yml,在末尾添加以下内容。

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

5.11 内容区域宽度

在next/source/css/_variables/custom.styl中添加以下内容。

// 修改成你期望的宽度
$content-desktop = 55%

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

5.12 超链接样式

在next/source/css/custom/custom.styl中加入以下代码。

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    border-bottom: none;
  }
}

5.13 本地搜索

安装插件：npm install hexo-generator-searchdb --save
在站点配置文件末尾添加以下代码。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题配置文件中搜索Local search启用。

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true

5.14 行内代码样式

在next/source/css/custom/custom.styl中添加以下代码。

code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 2px 0;
    padding: 2px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}