hexo+next主题美化

最新推荐文章于 2024-05-14 10:18:50 发布

Guchcx

最新推荐文章于 2024-05-14 10:18:50 发布

阅读量1.1k

点赞数 2

分类专栏： hexo

原文链接：https://tding.top/archives/42c38b10.html

版权

hexo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、站点配置

1、设置 hexo 的 next 主题
我们在站点的配置文件_config.yml 中找到 theme 后添加：

theme: next  # 配置成刚下载的next主题

2、配置 hexo 网站相关信息
我们在站点的配置文件_config.yml 中，修改：

# Site
title:          # 网站标题
subtitle:       # 网站副标题
description:    # 描述，介绍网站的
keywords:       # 网站的关键字
author:         # 博主姓名
language: zh-CN # 语言：zh-CN 是简体中文
timezone: UTC   # 时区

注意：博客框架默认的语言是英文，我们需要到 /themes/next/languages 目录下，查看当前 NexT 版本简体中文对照文件的名称是 zh-Hans 还是 zh-CN。这里是 zh-CN。

3、设置 hexo 永久链接
我们在站点的配置文件_config.yml 中，修改：

url: https://tding.top/
root: /
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:

注：这个文章永久链接设置需要安装插件，详细安装配置过程见：本博客当前使用的插件总结中的 Hexo 文章永久链接插件。

4、nofollow 标签的使用
减少出站链接能够有效防止权重分散，hexo 有很方便的自动为出站链接添加 nofollow 标签的插件。

首先安装 hexo-filter-nofollow 插件：

npm install hexo-filter-nofollow --save

然后我们在站点的配置文件_config.yml 中添加配置，将 nofollow 设置为 true：

外部链接优化

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

其中 exclude（例外的链接，比如友链）将不会被加上 nofollow 属性。

二、主题配置

1、配置 hexo 中的 about、tag、categories、sitemap 菜单
默认的主题配置文件_config.yml 中，菜单只开启了首页和归档，我们根据需要，可以添加 about、tag、categories、sitemap 等菜单，所以把它们也取消注释。

# 菜单设置为 菜单名: /菜单目录 || 菜单图标名字
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

menu_settings:
  icons: true   # 显示图标
  badges: true  # 显示统计信息

注：hexo 所有图标均来自 fontawesome，其中 || 后面是你想要设置的图标的名字。

2、手动生成 hexo 菜单对应文件
新菜单开启后是没有对应文件的，所以要手动生成 about、tags、categories、404 页面。

新建 about 页面
about 页面一般用来介绍站点信息和博主信息。

我们可以在博客根目录下输入以下命令新建页面：

hexo new page about

然后你会发现多了一个 hexo/source/about 文件夹，里面有一个 index.md 文件，你可以根据自己的需要在这个 Markdown 文件中写一些内容（同文章一样，用 Markdown 语法）。

新建一个 tags 页面
同样的，我们可以新建 tags 页面：

hexo new page tags

在 tags 页面文件 hexo/source/tags/index.md 的头部修改为：

title: 标签
date: 2019-06-29 11:35:42   # 时间随意
type: "tags"                # 类型一定要为tags
comments: false             # 提示这个页面不需要加载评论

新建一个 categories 页面
同样的，我们可以新建 categories 页面：

hexo new page categories

在 categories 页面文件 hexo/source/categories/index.md 的头部修改为：

title: 文章分类
date: 2018-10-15 00:03:57
type: "categories"
comments: false

新建一个 404 页面
这里我们将 404 替换成腾讯的公益页面。

首先我们在 hexo/source 目录下创建自己的 404.html：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>404</title>
    </head>
    <body>
        <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script> 
    </body>
</html>

注意：Hexo 博客的基本内容是一些 Markdown 文件，放在 source/_post 文件夹下，每个文件对应一篇文章。除此之外，放在 source 文件夹下的所有开头不是下划线的文件，在 hexo generate 的时候，都会被拷贝到 public 文件夹下。但是，Hexo 默认会渲染所有的 HTML 和 Markdown 文件。

因此我们可以简单地在文件开头加上 layout: false 一行来避免渲染：

+layout: false
+---

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>404</title>
    </head>
    <body>
        <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script> 
    </body>
</html>

这样我们就完成了 404 页面的创建。

注意：本地测试不出来，发布出来就可以了。

3、配置 hexo 本地搜索
本地搜索的原理
对于动态网站来说，可以通过 php 实现。但是，Hexo 博客是静态网站，用不了 php。

NexT 主题已经实现这个功能，它用了 Hexo 的拓展包 hexo-generator-searchdb，预先生成了一个文本库 search.xml，然后传到了网站里面。在本地搜索的时候，NexT 直接用 javascript 调用了这个文件，从而实现了静态网站的本地搜索。

设置过程
安装插件:

npm install hexo-generator-searchdb --save

然后我们修改站点配置_config.yml 文件，添加如下内容：

# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 100
path：索引文件的路径，相对于站点根目录
field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
limit：限制搜索的条目数

然后修改主题配置文件_config.yml：

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

4、设置 hexo 中的 rss 订阅
安装插件：

npm install hexo-generator-feed --save

在站点配置文件_config.yml 中添加以下代码：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

5、配置 hexo 站点的 footer 信息
底部 footer 可以开关显示 hexo 信息、theme 信息、建站时间等个性化配置：

footer:
  since: 2018        # 建站开始时间
  icon:
    name: user       # 设置 建站初始时间和至今时间中间的图标，默认是一个'小人像'，更改user为heart可以变成一个心
    animated: true
    color: "#808080" # 更改图标的颜色，红色为'#ff0000'
  powered:
    enable: true     # 开启hexo驱动
    version: true    # 开启hexo版本号
  theme:
    enable: true     # 开启主题驱动
    version: true    # 开启主题版本号
  custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> # 这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages

6、配置 hexo 中 next 主题样式选择
NexT 一共提供了 4 种首页样式，按照自己喜好选择一个，选择一个其他主题样式后其他的主题前一定要加上注释#：

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

7、头像信息设置

avatar:
  url: /images/avatar.jpg  # 设置头像资源的位置
  rounded: true            # 开启圆形头像
  opacity: 1               # 不透明的比例：0就是完全透明
  rotated: false           # 不开启旋转

8、社交信息和友链配置
这里和菜单设置格式一样，社交名字: 社交url || 社交图标，图标信息来自 fontawesome：



social: 
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google

social_icons:
  enable: true      # 显示社交图标
  icons_only: false # 只显示图标，不显示文字

友链配置：

# Blog rolls
links_icon: link          # 友链的图标 参考上文
links_title: Links        # 友链的title  比如你可以更改为 友情链接
links_layout: block       # 友链摆放的样式：按块（一行一个）
#links_layout: inline     # 友链摆放的样式：按线摆放（一行很多个），注意，同时只能一种样式
links:
  Title: http://example.com/  # 友链的地址

9、首页文章不展示全文显示摘要
通过在文章中加入来控制 Read More 摘要内容。

10、首页文章属性

post_meta:
  item_text: false    # 设为true 可以一行显示，文章的所有属性
  created_at: true    # 显示创建时间
  updated_at:
    enabled: true     # 显示修改的时间
    another_day: true # 设true时，如果创建时间和修改时间一样则显示一个时间
  categories: true    # 显示分类信息

11、页面阅读统计

busuanzi_count:
  enable: false              # 设true 开启
  total_visitors: true       # 总阅读人数（uv数）
  total_visitors_icon: user  # 阅读总人数的图标
  total_views: true          # 总阅读次数（pv数）
  total_views_icon: eye      # 阅读总次数的图标
  post_views: true           # 开启内容阅读次数
  post_views_icon: eye       # 内容页阅读数的图标

12、字数统计、阅读时长
首先安装插件：

npm install hexo-symbols-count-time --save

主题配置文件_config.yml 修改如下：

symbols_count_time:
  separated_meta: true  # false会显示一行
  item_text_post: true  # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
  item_text_total: true # 底部footer是否显示字数统计属性文字
  awl: 4                # 计算字数的一个设置,没设置过
  wpm: 275              # 一分钟阅读的字数

站点配置文件_config.yml 新增如下：

symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

13、内容页里的代码块新增复制按钮

codeblock:
  copy_button:
    enable: false      # 增加复制按钮的开关
    show_result: false # 点击复制完后是否显示 复制成功 结果提示

14、配置微信，支付宝打赏

# Reward
reward_comment:                   # 打赏描述
wechatpay: /images/wechatpay.png  # 微信支付的二维码图片地址
alipay: /images/alipay.png        # 支付宝的地址
#bitcoin: /images/bitcoin.png     # 比特币地址

15、相关文章推荐
安装推荐文章的插件：

npm install hexo-related-popular-posts --save

主题配置信息如下:

related_posts:
  enable: true
  title: 相关文章推荐      # 属性的命名
  display_in_home: false # false代表首页不显示
  params:
    maxCount: 5          # 最多5条
    #PPMixingRate: 0.0   # 相关度
    #isDate: true        # 是否显示日期
    #isImage: false      # 是否显示配图
    isExcerpt: false     # 是否显示摘要

16、文章原创申明

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true       # 默认显示版权信息
  language:

17、背景动画设置
Canvas-nest 风格
进入 theme/next 目录，执行命令：

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

实际上就是将一个显示动效的 js 文件 clone 到对应目录。

这时将配置文件_config.yml 中的 canvas_nest: false 改为 canvas_nest: true 才能真正生效。

18、添加 Google 统计
访问 Google Analytics，按照提示填写网站信息开通 GA 服务，获取统计 ID。

然后编辑主题配置文件_config.yml，找到关键字 google_analytics，删除注释#并填写获取到的统计 ID：

# Google Analytics
google_analytics:
  tracking_id: 
  localhost_ignored: true

19、Google Search Console
该版本已经集成了 HTML 标记的验证方式。

查看原标记，将其中 content 字段引号内的内容拷贝出来
修改主题配置文件_config.yml。搜索 google_site_verification，将上述拷贝的内容复制在该值后面：

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification: uW8bwgMGUwIA01nPfItoty1rmtmmuVkOVTeS9O0nAUg

20.添加背景图片
设置背景图片
将想要的背景图片放入 themes/next/source/images。打开 themes/next/source/css/ _custom/custom.styl 文件，这个是 Next 故意留给用户自己个性化定制一些样式的文件，添加以下代码即可：

body {
    background:url(/images/yourbackground.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

background:url 为图片路径，也可以直接使用链接。
background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定
background-size：图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。
博客内容透明化
NexT 主题的博客文章均是不透明的，这样读者就不能好好欣赏背景图片了，下面的方法可以使博客内容透明化：

在 themes/next/source/css/_custom/custom.styl 中添加以下内容：

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

注意：其中 header-inner 不能使用 opacity 进行配置。因为 header-inner 包含 header.swig 中的所有内容。若使用 opacity 进行配置，子结点会出很多问题。

无_custom/custom.styl 文件时，在根目录source下创建 _data文件夹创建styles.styl文件加入css代码，主题_config.yml 文件修改：

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

三、参考文章

Hexo-NexT (v7.0+) 主题配置
 Hexo-NexT 设置博客背景图片

Guchcx

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
hexo+next主题美化

一、站点配置1、设置 hexo 的 next 主题我们在站点的配置文件_config.yml 中找到 theme 后添加：theme: next # 配置成刚下载的next主题2、配置 hexo 网站相关信息我们在站点的配置文件_config.yml 中，修改：# Sitetitle: # 网站标题subtitle: # 网站副标题descrip...
复制链接

扫一扫