Hexo Icarus配置和美化升级

早期的配置版本:
在这里插入图片描述
我的源码供参考: Icarus佛系修改 建议当成样本配合下文修改!!!强烈建议替换前先备份!!!(欢迎star~,你的star是对我的鼓励)

我的博客原文:https://littlezero.top/20190811HexoIc/ 最新修改将首先在博客发布

前言

Icarus /ˈɪˌkɜrəs/,出自希腊神话,他的发音可谓是清新俊逸格外好听。

这主题让我爱不释手,我花费了许多心血,踩尽了无数坑,折腾地心甘情愿。

本文内容为hexo—Icarus总记录文案,根据我自己的配置日记改编,马马虎虎称得上是大集合攻略了,简称集成攻略︿( ̄︶ ̄)︿ 。由于Icarus和主流的NextT、yilia配置文件书写方式有些格格不入,导致网上大部分攻略的操作都很难照搬进Icarus中,故特写此篇希望能提供给icarus使用者一些小小的搭建思路。

重要定义

1)站点配置文件指Hexo根目录下的_config.yml

2)主题配置文件指icarus目录下的_config.yml

准备工作

Icarus Download (官方原版)
Cute Icarus Download(民间自改版作品)
将下载的icarus文件放入Hexo/themes路径下,记得把站点配置文件_config.yml的themes选项设为Icarus!

Hexo官方doc
Icarus官方doc(基础功能实现和已整合插件使用说明书)
配置必不可少的资料,虽然部分功能实现表述的很简略,但多阅读它没有什么坏处,也许你会从中发现让你眼前一亮的彩蛋。

主题文件结构

(请好好利用这张地图)

/includes
/languages   #用来配置国际化语言版本,里边包含各种个配置像的文本翻译。
/layout      #以ejs文件来定义各种含有配置信息调用的布局(绝大多数修改点的位置)
/scripts     #一些JS脚本
/source  
   /css      #用来修改自定义样式,需要掌握一定的css语法。
   /fonts    #定义字体文件,可以修改博客字体
   /images   #本地调用的图片放这里
   /js       #一些js脚本(特效.js存放处)
   /404.html #自定义的公益404页面
/_config.yml #YML数据串行化格式语言书写的配置文件(首先修改)

开始施工

基础内容先放我自己用的攻略给大家配置,最后放一些我自己曾用过的进阶内容。
1. 基本功能实现:

(带 * 为初级版本,可升级)

表格列出/路径均为相对路径
对应绝对路径为 ~/hexo/themes/icarus/

e.g.       /_config.yml 为
~/hexo/themes/icarus/_config.yml
功能描述 修改位置
主题配置文件 / _config.yml
看板娘插件* / _config.yml
雪花飘落效果* /source/js
鼠标点击特效* /source/js 和 /layout/layout.ejs
网站访问量与访客量统计 /layout/common/footer.ejs
网站运行时间统计 /layout/common/footer.ejs

攻略位置:https://blog.csdn.net/marvine/article/details/89816846

2.进阶功能实现:

功能描述 修改位置
鼠标指针样式 / _config.yml
鼠标点击特效(进阶升级) /source/js
浏览器网页标题恶搞 /source/js
彩色滚动变换字体 多放在/layout/layout.ejs和 /layout/common/footer.ejs的自定义位置
添加背景音乐(网易云和aplayer) 外链形式放置自定义位置
背景添加动态线条效果 /layout/common/footer.ejs
添加人体时钟等有趣的挂件 放置自定义位置
背景动态彩带效果 /layout/layout.ejs

攻略位置:https://blog.csdn.net/qq_36759224/article/details/85420403#font_colorFF0000___font_289

3.查漏补缺

下面攻略非常全面。

注意该攻略面向NextT主题,由于文件排布不一,部分资料很难直接套用,故上面给出专属Icarus的解决方案!

攻略位置:https://www.jianshu.com/p/efbeddc5eb19
包含内容:有站点配置文件的修改,添加分类和标签、RSS、文章版权,文章阅读数统计,fork me on GitHub,markdown语法的使用贴士与自定义

4.正文开始

从前面的配置开始一路走来,想必你一定收获了很多体验,那么我们接下来去进行美化升级吧!

1. 如何优雅地捕捉萌妹子(会说话,可换装)

在这里插入图片描述
参考资料:

live2d-widget (最简单最快捷的配置方法)

live2d (最优方法,根据博文内容配置,装完就能自定义,推荐)

UpUpUp!补充资料:萌妹纸增加陪聊功能

最快用法(三行代码按需插入完美运行):

使用:live2d-widget

首先安装依赖

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

将上面两行代码插入layout目录下layout.ejs文件的<head>和</head>标签内

最后调用

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

将上面一行代码插入layout目录下layout.ejs文件的<head>和</head>标签内或者<body>和</body>标签内

CDN用法(可自定义的萌妹纸):

使用:live2d-widget

原理:萌妹的实现代码可通过该链接进行访问。https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js

如果要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为

<script src="https://cdn.jsdelivr.net/gh/username/live2d-widget/autoload.js"></script>

将username替换为你的GitHub用户名即可。

酱纸就能通过jsdelivr访问存于你自己的仓库的萌妹纸代码,先clone到本地修改后再上传。

当然如果模型在手想怎么改怎么改,你懂的。

绅士警告
Self-Host Usage:

live2d (最优方法,根据博文内容配置,装完就能自定义,无需git上传,hexo自动部署,推荐)

2. 评论系统

hexo是静态网页博客,评论系统得借助第三方插件来完成。

综合比较各大评论插件,鉴于界面美观和方便与否,我选择了Valine

官方安装方法,浏览入口找到Valine comment plugin即可
https://blog.zhangruipeng.me/hexo-theme-icarus/categories/Plugins/Comment/

安装分三步,第一注册LeanCloud(推荐国际服 免身份验证),第二步将Valine提供的官方代码插入指定位置,第三参照官方安装方法配置主题_config.yml文件。

3.访客小地球和图表
在这里插入图片描述在这里插入图片描述

点击装配revolvermaps

把html代码插入layout文件下的layout.ejs或者common/footer.ejs中就可以了~

4.下出电脑屏幕的大雪~

这可比上面地不断随机刷新雪花图片的效果要up的多!
在这里插入图片描述
攻略链接: 3D落雪

5.Tidio

有了之前积累的经验想必不用我过多赘述你也知道该如何使用外链了吧~

官网试一试吧!

在这里插入图片描述

6.非常美观的分享按钮

hotjar官网

在这里插入图片描述

放在后面的话

因为版面有限,关于Icarus文字排版,页面排版以及授人以渔的方法只得安排到下期发布了~
感谢Hexo社区的各位。

本文完~

参考:https://blog.csdn.net/qq_29329775/article/details/51019301
参考:https://io-oi.me/tech/hexo-next-optimization.html#重要的定义
来源:https://blog.csdn.net/marvine/article/details/89816846
来源:https://blog.csdn.net/qq_36759224/article/details/85420403#font_colorFF0000___font_289
来源:https://www.jianshu.com/p/efbeddc5eb19
来源:https://leflacon.github.io/9a99eb64/
来源:https://haremu.com/p/205

发布了23 篇原创文章 · 获赞 10 · 访问量 4997

猜你喜欢

转载自blog.csdn.net/Fzidx/article/details/99185663