主题设置

个人比较喜欢 NexT 主题，所以这篇文章主要讲next主题的设置

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

NexT 主题安装

主题下载

现将路径切换到项目根目录

    cd blog
    git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开站点配置文件，找到 theme 字段，并将其值更改为 next。

    theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前，我们最好使用 hexo clean 来清除 Hexo 的缓存。

主题验证

    hexo s --debug

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

语言设置

编辑站点配置文件，将 language 设置成你所需要的语言。例如选用简体中文，配置如下

    language: zh-Hans

设置菜单

    menu:
        home: / || home
        about: /about/ || user
        tags: /tags/ || tags
        #categories: /categories/ || th
        archives: /archives/ || archive
        #schedule: /schedule/ || calendar
        #sitemap: /sitemap.xml || sitemap
        #commonweal: /404/ || heartbeat

常用创建命令

添加「标签」页面

新建页面

    hexo new page tags

设置页面类型

    title: 标签
    date: 2014-12-22 12:39:04
    type: "tags"
    comments: false
    ---

添加「分类」页面

新建页面

    hexo new page categories

设置页面类型

    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    comments: false
    ---

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。两者配置均在主题配置文件中

链接

    # Social links
    social:
        GitHub: https://github.com/your-user-name
        Twitter: https://twitter.com/your-user-name
        微博: http://weibo.com/your-user-name
        豆瓣: http://douban.com/people/your-user-name
        知乎: http://www.zhihu.com/people/your-user-name
        # 等等

图标

    # Social Icons
        social_icons:
        enable: true
        # Icon Mappings
        GitHub: github
        Twitter: twitter
        微博: weibo

友情链接

编辑主题配置文件添加：

    # title
    links_title: Links
    links:
        MacTalk: http://macshuo.com/
        Title: http://example.com/

站点建立时间

    since: 2015

设置「动画效果」

编辑主题配置文件，搜索 motion，根据您的需求设置值为 true 或者 false 即可,同时还可以根据需求设置需要的动画效果。

    motion:
        enable: true
        async: false
        transition:
        # Transition variants:
        # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
        # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
        # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
        # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
        # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
        # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
        post_block: fadeIn
        post_header: slideDownIn
        post_body: slideDownIn
        coll_header: slideLeftIn
        # Only for Pisces | Gemini.
        sidebar: slideUpIn

设置「背景动画」

NexT 自带四种背景动画效果

编辑主题配置文件，搜索 canvas_nest , canvas_lines,canvas_sphere 或 three_waves，根据您的需求设置值为 true 或者 false 即可,注意只能同时开启一种背景动画效果。：

    # Canvas-nest
    canvas_nest: true
    # three_waves
    three_waves: false
    # canvas_lines
    canvas_lines: false
    # canvas_sphere
    canvas_sphere: false

设置加载进度条样式

    # Progress bar in the top during page loading.
    pace: true
    # Themes list:
    #pace-theme-big-counter
    #pace-theme-bounce
    #pace-theme-barber-shop
    #pace-theme-center-atom
    #pace-theme-center-circle
    #pace-theme-center-radar
    #pace-theme-center-simple
    #pace-theme-corner-indicator
    #pace-theme-fill-left
    #pace-theme-flash
    #pace-theme-loading-bar
    #pace-theme-mac-osx
    #pace-theme-minimal
    # For example
    # pace_theme: pace-theme-center-simple
    pace_theme: pace-theme-flash

footer信息设置

    footer:
    # Specify the date when the site was setup.
    # If not defined, current year will be used.
    since: 2017
    # Icon between year and copyright info.
    icon: user
    # If not defined, will be used `author` from Hexo main config.
    copyright:
    # -------------------------------------------------------------
    # Hexo link (Powered by Hexo).
    powered: false
    theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: false
        # Version info of NexT after scheme info (vX.X.X).
        version: true
    # -------------------------------------------------------------
    # Any custom text can be defined here.
    #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>

添加字数统计功能

next中内置有hexo-wordcount的配置信息，但是启用被指之前需要下载hexo-wordcount

    $ npm install hexo-wordcount --save

安装完成之后，在主题配置文件中进行开始(true)或关闭(false)设置
wordcount：文章中的字数统计
min2read: 大概阅读完整篇文章的时间
totalcount: 文章中总的字数

    post_wordcount:
        item_text: true  
        wordcount: true  
        min2read: true
        totalcount: false
        separated_meta: true

启用busuanzi 展示网站的PV/UV

    # Show PV/UV of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi/
    busuanzi_count:
    # count values only if the other configs are false
    enable: true
    # custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"></i> 访问人数
    site_uv_footer: 人
    # custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"></i> 访问次数
    site_pv_footer: 次
    # custom pv span for one page only
    page_pv: false
    page_pv_header: <i class="fa fa-file-o"></i>
    page_pv_footer:

启用leancloud的文章阅读统计功能

需要先去leancloud官网申请一个账号，并获取到账号的app_id 和 app_key ,然后复制到以下代码的id和key中

    leancloud_visitors:
        enable: true
        app_id: xxxxx  #<app_id>
        app_key: xxxxx #<app_key>

配置完成后，需要在leancloud的后台创建一个Counter类，位置为：存储/数据，然后点击创建Class，如下图所示

创建完成后，再重新部署即可完成配置

在博客中添加Fork me on GitHub

在添加之前可以去官网官网选择自己喜欢的样式

在NexT主题中找到 next\layout\_layout.swig目录下的_layout.swig 的文件，然后找到如下代码块

    <div class="{{ container_class }} {% block page_class %}{% endblock %} ">
    <div class="headband"></div>

然后将选中的样式的代码放到<div class="headband"></div>的后面

    <a target="_blank" href="https://github.com/tankboo"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/11/30/1600c8fe7bc8587e~tplv-t2oaga2asx-image.image"></a>

然后在重新编译后就可以看到效果了

显示更多

在浏览生成后的页面时，发现首页会把文章的全部内容列出来，如果文章内容太多，则这种方式是不友好的，我们需要把一部分信息隐藏起来，方法就是在文章中的适当位置加入如下代码

    <!--more-->

然后重新编译生成的首页中的文章中就会生成如下按钮

自定义样式

这个模版用的人太多，我们想要更个性化一点，则需要我们自己去修改主题中的一些样式，自己定义的样式主要放在next\source\css\_variables\_custom.styi中，比如我们想给首页的每个文章加上一个含有阴影的边框，并增加文章之间的上下间距，可以进行如下设置

    .post {
         margin-bottom: 100px;
        padding: 25px;
        -webkit-box-shadow: 0 0 14px #cacbcb;
        -moz-box-shadow: 0 0 14px #cacbcc;
         background: #fff;
    }

然后就能看到上一图中的样式了

使用Hexo＋ github快速搭建自己的博客网站（二）

主题设置

NexT 主题安装

主题下载

启用主题

主题验证

语言设置

设置菜单

常用创建命令

添加「标签」页面

新建页面

设置页面类型

添加「分类」页面

新建页面

设置页面类型

侧边栏社交链接

链接

图标

友情链接

站点建立时间

设置「动画效果」

设置「背景动画」

设置加载进度条样式

footer信息设置

添加字数统计功能

启用busuanzi 展示网站的PV/UV

启用leancloud的文章阅读统计功能

在博客中添加Fork me on GitHub

显示更多

自定义样式