本篇文章主要来对网站做进一步的设置和美化,这里的美化主要针对我用的主题-fluid,对于其他主题不一定完全适用。
站点设置
设置网站信息
在站点配置文件_config.yml
中修改:
| title: 你的博客名称 subtitle: 副标题(可不设置) description: 描述,通常由于搜索引擎搜索,SEO优化等(如果没有搜索引擎爬取收录的需要可不设置) keywords: 关键字,通常由于搜索引擎搜索,SEO优化等(可不设置) author: 作者 language: zh-CN(设置语言) timezone: 时区(可不设置)
|
修改永久链接的路径
在站点配置文件_config.yml
中修改:
|
permalink: :year/:month/:title/
|
跳过渲染某些文件
在站点配置文件_config.yml
中修改,为了显示某个自己做的网页,或者为了显示readme说明文件等等:
| 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
时自动覆盖。
注意:
修改网页标签icon
打开主题配置文件themes/fluid/_config.yml
,找到下面的代码修改:
| favicon: /img/favicon.png
|
上面的路径位于source文件夹下,而且必须位于source下,文件夹名称可以修改为别的,同时source文件夹在主题目录和站点目录各有一个,但是主题的source目录最终会合并到站点目录下,而主题目录在版本更新的时候可能会造成内容被覆盖或丢失,所以推荐放在博客站点的source文件夹下,文章后续提到的资源路径也均是放在站点source文件夹内。
设置标题的打字机效果
还是在主题配置文件themes/fluid/_config.yml
里面修改:
| typing: enable: true typeSpeed: 70 cursorChar: "_" loop: false
|
添加鼠标点击特效
修改主题配置文件themes/fluid/_config.yml
:
| mouse_click: enable: false style: values
|
图片懒加载
修改主题配置文件themes/fluid/_config.yml
:
| lazyload: enable: true onlypost: false
|
更多可修改信息在配置文件中查看。
设置音乐播放器
编辑主题配置文件themes/fluid/_config.yml
| aplayer: enable: false autoplay: false loop: 'all' order: 'random' theme: '#b7daff' songs: - { 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: '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' }
|
另外二级菜单写法如下:
| 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: enable: true path: /local-search.xml generate_path: /local-search.xml field: post content: true
|
更多配置可以查看主题配置文件以及官方配置指南。
自定义网页背景
首先在站点根目录的source\_data
文件夹内新建一个名为styles.styl
的文件,然后编辑主题配置文件:
| 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
文件末尾添加:
| <script type="text/javascript" src="/js/src/clicklove.js"></script>
|
参考链接:
fluid官方配置指南
hexo史上最全搭建教程
如何使用 Hexo 和 GitHub Pages 搭建这个博客
Hexo中文文档