Hexo NexT相关配置以及美化

发表于 更新于 分类于 阅读次数： 本文字数： 979 阅读时长 ≈ 4 分钟
Hexo以及NexT主题的一些美化设置

全局配置

翻译

  • 创建文件source -> _data -> languages.yml

  • 在langugages.yml中填入相应语言的翻译，例如:

    zh-CN:
      menu:
        top: 热点
        comic: 动漫

链接地址设置

_config.yml 文件中设置 permalink参数, 默认为: :year/:month/:day/:title/, 但是太长了。也不太方便分类。

变量 描述
:year 文章的发表年份（4 位数）
:month 文章的发表月份（2 位数）
:i_month 文章的发表月份（去掉开头的零）
:day 文章的发表日期 (2 位数)
:i_day 文章的发表日期（去掉开头的零）
:hour 文章发表时的小时 (2 位数)
:minute 文章发表时的分钟 (2 位数)
:second 文章发表时的秒钟 (2 位数)
:title 文件名称 (relative to “source/_posts/“ folder)
:name 文件名称
:post_title 文章标题
:id 文章 ID (not persistent across cache reset)
:category 分类。如果文章没有分类，则是 default_category 配置信息。
:hash SHA1 hash of filename (same as :title) and date (12-hexadecimal)

首页(Index页)

文章首页只显示摘要

首先需要在Next主题的_config.yml中把设置打开：(默认安装时就打开了)

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

  • 方法一：写概要

    在文章的front-matter中添加description，其中description中的内容就会被显示在首页上，其余一律不显示。

    ---
    title: 标题
    date: 2020-02-23 22:55:10
    description: 这是显示在首页的概述，正文内容均会被隐藏。
    ---

  • 方法二：文章截断

    在需要截断的地方加入：

    <!--more-->

效果：

>

文章内容

图片上传PigGo + Github图床

  1. 首先下载工具

​ 下载地址: PicGO

  1. 登录 Github

    创建 Repository, 名字随便取一个自己能认识就行。例如PicGoGub

  2. 生成Token

    点击头像Settings -> Developer Settings -> Personal access tokens 点击 Generate new token

    点击最下面的 Generate token ，会出现 token ，这个 token 只出现一次，所以要保存一下

  3. 配置PicGo客户端

    打开 PicGo ，输入相关信息

    • 仓库名 即你的仓库名

    • 分支名 默认 master

    • Token 就是刚刚复制的那一串字符

    • 存储路径 这个可以填也可以不填，填了的话图片就上传到这个文件夹，比如 picture/ 图中少一个 /

    • 自定义域名 这个要改一下 格式： https://raw.githubusercontent.com/[仓库名]/master

    • 然后可以使用微信+快捷键的方式，快速上传，微信截图，图片到粘贴板后，使用picgo的快捷键ctrl+shift+P

    然后点确定就OK了，不妨试试。

图片懒加载

  • 安装 hexo-lazyload-image

    npm install hexo-lazyload-image --save

  • _config.yml中添加配置

    # 图片懒加载
    lazyload:
      enable: true 
      onlypost: false
      loadingImg: # eg. ./images/loading.png

音乐播放器

​

  • 安装hexo-tag-aplayer, 文档地址

    npm install hexo-tag-aplayer --save

  • 文章中添加tag

    {% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

  • 效果

  • QQ音乐下载歌词等

    • QQ音乐设置下载同时下载歌词和封面

    • 下载歌曲，下载完成后，打开所在的目录, 就能找到歌曲文件和歌词了

视频播放器

  • 安装hexo-tag-dplayer, 项目地址

  • 文章中添加tag

    {% dplayer url="https://raw.githubusercontent.com/wudizhangzhi/PicGoHub/master/img/SymphonicSuite(AoT)Part2-5th-Apple Seed).flv" %}

  • 效果：