tan-ln的博客

稳住，我们能赢

0%

Hexo&NexT 博客个性化主题设置

发表于 更新于

Hexo&NexT 博客骚操作-个性化主题设置

最简单的 hexo&next 主题个性化设置

前提须知：
站点配置文件: 根目录下的 _config.yml
主题配置文件: 主题文件夹内的 _config.yml

站内搜索功能

推荐使用 Hexo 提供的 Local Search，通过安装 hexo-generator-search 插件，在本地生成一个 search.xml 文件，搜索的时候从这个文件中根据关键字检索出相应的链接

  • 安装 hexo-generator-search 和 hexo-generator-searchdb

    站点根目录下命令行输入 

    1
    2
    3
    4
    $ npm install hexo-generator-search --save
    ```     
    ```bash
    $ npm install hexo-generator-searchdb --save

  • 配置站点

    编辑 站点配置文件 _config.yml ，新增以下内容:

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000

  • 启用本地搜索功能

    打开主题配置文件 _config.yml ，设为 true 

    1
    2
    3
    # Local search
    local_search:
    enable: true

    代码块自定义样式

    打开\themes\next\source\css_custom\custom.styl
    向里面加入：(颜色可以自己定义) 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Custom styles.
    code
        color #ff7600
        background #fbf7f8
        margin 2px

    // 大代码块的自定义样式
    .highlight, pre
        margin 5px 0
        padding 5px
        border-radius 3px

    .highlight, code, pre
        border 1px solid #d6d6d6

设置头像

编辑站点配置文件, 新增字段 avatar
头像的链接地址可以是:

  • 网络地址 
    1
    avatar: https://你的头像地址
  • 站内地址

    图片文件保存在 根目录 /source/iamges 中

    1
    avatar: ./images/icon.jpg

菜单设置

打开主题配置文件 _config.yml，找到 #Menu Settings 

1
2
3
4
5
6
7
8
9
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

去掉 # 以显示需要的菜单项
若站点运行在子目录中, 将链接前缀的 / 去掉

点击出现桃心效果(或文字)

  • 桃心效果
    点我获取 love.js 源码

    在路径 /themes/next/source/js/src 下新建 love.js 文件，并将网址中的代码复制进去
    然后打开 /themes/next/layout/_layout.swig 文件,在末尾（在前面引用会出现找不到的bug）添加以下代码： 

    1
    2
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/love.js"></script>
  • 文字效果

    代码替换为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var a_idx = 0;
    jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY,
            c = "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";
        $i.css({
            "z-index": 999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "font-size": "3em",
            "color": c
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function () {
            $i.remove();
        });
    });
    });

    自定义添加 js

    /themes/next/source/js/src 路径下建立 js 文件
    /themes/next/layout/_layout.swig 下引入

自定义样式

themes/next/source/css/custom/_custom.styl

文章阅读次数

  1. 创建LeanCloud账号，进入 LeanCloud官网
    并注册
  2. 进入访问控制台
  3. 单击“创建应用”按钮进行应用的创建，输入新应用名称，选择开发版，单击“创建”按钮完成创建
  4. 创建Class进入到刚刚创建的应用中，选择左侧导航栏的“存储”，然后点击“创建Class”，为了与Next形成配置关系，将Class名称填为Counter，并选择 第一项 限制写入 限制写入 限制写入，重要的事情说三次，然后单击“创建Class”按钮完成Class的创建
  5. 配置Key
    在左侧导航栏的设置界面，单击“应用Key”可以看到应用的App ID和App Key
  6. 复制ID和Key，然后将其配置到主题配置文件中，在文件中找到leancloud_visitors属性，将enable设置为true，然后将之前复制的ID和Key粘贴到相应的属性中
    1
    2
    3
    4
    5
    6
    # Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
      enable: true
      app_id: HCmcHOKGNq马赛克BTx7MtHpj-gzGzoHsz
      app_key: Lo4pIArbo马赛克liHjN6UMsk

字数统计

NexT主题默认已经集成了文章【字数统计】、【阅读时长】统计功能，如果我们需要使用，只需要在主题配置文件(Blog\themes\next_config.yml)中打开wordcount 统计功能即可 

1
2
3
4
5
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true

找到Blog\themes\next\layout\_macro\post.swig 文件,
将下面代码后面加 “字”

1
2
3
<span title="{{ __('post.wordcount') }}">
     {{ wordcount(post.content) }} 字
</span>

tags 标签创建与样式修改

创建 tags

命令行输入hexo new page "tags"

在myBlog/source下会新生成一个新的文件夹tags
，在该文件夹下会有一个index.md文件

编辑 tags 文件夹下的 index.md

1
2
3
4
5
---
title: tags
date: 2017-07-10 16:36:26
type: "tags"
---

编辑主题的 themes/next/_config.yml ，添加tags 到 menu 中

1
2
3
4
5
menu:
home: /
archives: /archives/
categories: /categories/
tags: /tags/

修改样式

路径themes\next\source\css\_common\components\post\post-tags.styl

1
2
3
4
5
6
7
8
9
10
11
.posts-expand .post-tags
  margin-top 40px
  text-align center

  a
    display inline-block
    margin-right 10px
    font-size 13px
    border 1px solid #ccc
    border-radius 5px 
    color #0593d3

添加 “文章标签” 字样

路径 themes\next\layout\_macro\post.swig

1
2
3
4
5
6
7
8
9
<footer class="post-footer">
  {% if post.tags and post.tags.length and not is_index %}
    <div class="post-tags">
    文章标签: 
      {% for tag in post.tags %}
        <a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
      {% endfor %}
    </div>
  {% endif %}
-------------本文结束感谢您的阅读-------------