从零开始的Hexo博客搭建（二）—— 网站设置和主题优化

本文最后更新于：1 年前

本篇文章主要来对网站做进一步的设置和美化，这里的美化主要针对我用的主题-fluid，对于其他主题不一定完全适用。

站点设置

设置网站信息

在站点配置文件_config.yml中修改：

# Site
title: 你的博客名称
subtitle: 副标题（可不设置）
description: 描述，通常由于搜索引擎搜索，SEO优化等（如果没有搜索引擎爬取收录的需要可不设置）
keywords: 关键字，通常由于搜索引擎搜索，SEO优化等（可不设置）
author: 作者
language: zh-CN（设置语言）
timezone: 时区（可不设置）

修改永久链接的路径

在站点配置文件_config.yml中修改：

1
2
3

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
permalink: :year/:month/:title/

跳过渲染某些文件

在站点配置文件_config.yml中修改，为了显示某个自己做的网页，或者为了显示readme说明文件等等：

# Directory
skip_render: 
 - README.md
 - test/*
 # 跳过文件夹下所有文件
  - "文件夹名/*"  
 # 跳过子文件夹
  - "文件夹名/子文件夹名/*"
 # 跳过文件夹下所有子文件夹和文件
  - "文件夹名/**"

主题美化设置

主题配置我使用了覆盖配置，将主题配置文件放置在 fluid 目录之外，避免在更新主题时丢失自定义的配置。

使用该功能必须保证 Hexo 版本不低于 3.0，因为该功能利用了 Hexo 数据文件功能。

使用方式：

进入博客根目录（不是主题目录）的 source 目录下，创建 _data 目录（和 _post 目录同级）；
在 _data 目录下创建 fluid_config.yml 文件，将 /theme/fluid/_config.yml 中全部配置（或部分配置）复制到 fluid_config.yml 中；
以后配置都在 fluid_config.yml 中修改，配置会在 hexo g 时自动覆盖。

注意：

存在于 fluid_config.yml 的配置都是高优先级，修改原 _config.yml 是无效的。

如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的，比如：

about:
  icons:  # 不要把 icon 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }

修改网页标签icon

打开主题配置文件themes/fluid/_config.yml，找到下面的代码修改：

1	`favicon: /img/favicon.png # 网站标签页的 icon`

上面的路径位于source文件夹下，而且必须位于source下，文件夹名称可以修改为别的，同时source文件夹在主题目录和站点目录各有一个，但是主题的source目录最终会合并到站点目录下，而主题目录在版本更新的时候可能会造成内容被覆盖或丢失，所以推荐放在博客站点的source文件夹下，文章后续提到的资源路径也均是放在站点source文件夹内。

设置标题的打字机效果

还是在主题配置文件themes/fluid/_config.yml里面修改：

typing: # 为 subtitle 添加打字机效果
    enable: true
    typeSpeed: 70  # 打印速度，数字越大越慢
    cursorChar: "_" # 游标字符
    loop: false # 是否循环播放效果

添加鼠标点击特效

修改主题配置文件themes/fluid/_config.yml：

1
2
3

mouse_click:  # 鼠标点击动效
    enable: false
    style: values # 目前设置两个值：values（价值观词汇） | love（爱心）

图片懒加载

修改主题配置文件themes/fluid/_config.yml：

1
2
3

lazyload: # 对页面中的图片进行懒加载处理，可见范围外的图片不会加载
  enable: true
  onlypost: false  # 仅在文章页使用懒加载，开启后如果自定义页面需要使用，可以在 Front-matter 里指定 `lazyload: true`

更多可修改信息在配置文件中查看。

设置音乐播放器

编辑主题配置文件themes/fluid/_config.yml

aplayer:  # 音乐播放器，注意不能与 hexo-tag-aplayer 插件共用
  enable: false
  autoplay: false  # 音频自动播放
  loop: 'all'  # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'  # 播放顺序，可选值: 'list', 'random'
  theme: '#b7daff'  # 主题色
  songs:  # 歌曲列表，必须传入下列各参数，其中 url 与 cover 在本地需存于 source 目录，更多参数见文档：https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0
    - { name: 'name', artist: 'artist', url: '/songs/test.mp3', cover: '/img/cover.jpg' }
    - { name: 'name', artist: 'artist', url: 'https://...url.mp3', cover: 'https://...cover.jpg' }

设置右上角导航菜单

编辑主题配置文件themes/fluid/_config.yml

menu:  # 可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
    - { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
    - { key: 'archive', link: '/archives/', icon: 'iconfont icon-archive-fill' }
    - { key: 'category', link: '/categories/', icon: 'iconfont icon-category-fill' }
    - { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
    - { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill' }
    #- { key: 'links', link: '/links/', icon: 'iconfont icon-link-fill' }  # 友链页，把前面#去掉即可展示

另外二级菜单写法如下：

menu:
  - {
      key: '文档',
      icon: 'iconfont icon-books',
      submenu: [
        { key: '配置指南', link: 'https://hexo.fluid-dev.com/docs/guide/' },
        { key: '操作示例', link: 'https://hexo.fluid-dev.com/docs/example/' },
        { key: '图标用法', link: 'https://hexo.fluid-dev.com/docs/icon/' }
      ]
  }

添加搜索功能

编辑主题配置文件themes/fluid/_config.yml

search: # 搜索栏，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件。
  enable: true
  path: /local-search.xml # 文件引用地址，默认是下方生成位置，也可以将生成后的 local-search.xml 上传到其它位置引用，如：https://www.example.com/local-search.xml
  generate_path: /local-search.xml # 文件生成位置，必须为相对位置
  field: post
  content: true

更多配置可以查看主题配置文件以及官方配置指南。

自定义网页背景

首先在站点根目录的source\_data文件夹内新建一个名为styles.styl的文件，然后编辑主题配置文件：

1 2	`custom_file_path: style: source/_data/styles.styl`

我们所有自定义的样式都会在styles.styl这个文件里添加。

编辑styles.styl，添加如下代码，把URL里面的地址改为你的背景图片的链接即可：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

自定义鼠标样式

还是在styles.styl里编辑，添加下面的代码：

// 鼠标样式
  * {
      cursor: url("鼠标图标地址"),auto!important
  }
  :active {
      cursor: url("鼠标图标地址"),auto!important
  }

点击出现爱心效果

在主题文件夹内的/source/js/src下新建文件click-effect.js，接着把下面的内容复制粘贴到click-effect.js文件中。
代码如下：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在主题文件夹的\layout\_layout.swig文件末尾添加：

1 2	`<!-- 页面点击出现小桃心 --> <script type="text/javascript" src="/js/src/clicklove.js"></script>`

参考链接：

fluid官方配置指南

hexo史上最全搭建教程

如何使用 Hexo 和 GitHub Pages 搭建这个博客

Hexo中文文档

Hexo

Hexo hexo 博客

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

从零开始的Hexo博客搭建（三）—— 博客进阶设置、在其他电脑发布博客上一篇

从零开始的Hexo博客搭建（一）—— 搭建博客并部署到github 下一篇