本期将为大家讲解Hexo iCarus主题的使用。
1. Icarus介绍
Icarus 是一个广受欢迎的 Hexo 博客主题,以其清新、现代的界面和优秀的响应式设计著称。它提供了丰富的个性化选项,支持多语言,易于配置和使用。Icarus 还注重用户体验,包括SEO优化和性能,适合技术博主和创意写作者展示他们的作品。
Icarus主题官网:https://github.com/ppoffice/hexo-theme-icarus
官网效果图:
2. Icarus安装
2.1 下载主题
建议你使用clone最新版本的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。
切换到博客的主题根目录themes
下打开Git Bash
并执行以下命令:
git clone https://github.com/ppoffice/hexo-theme-icarus.git icarus
下载完成后,会在项目themes目录下生成icarus文件夹
2.2 安装主题
Git Bash
并执行以下命令来安装主题:
npm install hexo-theme-icarus
2.3 切换主题
与所有 Hexo 主题启用的模式一样。当 克隆/下载 完成后,打开 站点配置文件
, 找到 theme
字段,并将其值更改为 icarus
。
theme: icarus
到此,Icarus 主题安装完成。
2.4 验证主题
启动服务并访问http://localhost:4000查看效果.
hexo clean && hexo s
3. Icarus配置
启动成功之后,在博客的根目录里会自动生成Icarus的配置文件:_config.icarus.yml
。
3.1 配置说明
以下是``文件的翻译版本,可以复制进去替换原文件
# 配置文件版本
version: 5.1.0
# Icarus主题变体,可以是"default"或"cyberpunk"
variant: default
# 网站Logo的路径或URL
logo: /img/logo.svg
# 页面元数据配置
head:
# 网站图标的URL或路径
favicon: /img/favicon.svg
# Web应用程序清单配置
# https://developer.mozilla.org/en-US/docs/Web/Manifest
manifest:
# Web应用程序名称(默认使用站点标题)
name:
# 当没有足够空间显示全名时显示的应用程序名称
short_name:
# Web应用程序的起始URL
start_url:
# 应用程序的默认主题颜色
theme_color:
# 应用程序页面在样式表加载前显示的占位符背景颜色
background_color:
# 网站的首选显示模式
display: standalone
# 可用作不同上下文中应用程序图标的图像文件
icons:
-
# 图像文件的路径
src: ''
# 包含空格分隔图像尺寸的字符串
sizes: ''
# 图像的媒体类型提示
type:
# Open Graph元数据
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# 页面标题(og:title)(可选)
# 大多数情况下应保留为空
title:
# 页面类型(og:type)(可选)
# 大多数情况下应保留为空
type: blog
# 页面URL(og:url)(可选)
# 大多数情况下应保留为空
url:
# 页面封面(og:image)(可选)
# 大多数情况下应保留为空
image:
# 站点名称(og:site_name)(可选)
# 大多数情况下应保留为空
site_name:
# 页面作者(article:author)(可选)
# 大多数情况下应保留为空
author:
# 页面描述(og:description)(可选)
# 大多数情况下应保留为空
description:
# Twitter卡片类型(twitter:card)
twitter_card:
# Twitter ID(twitter:creator)
twitter_id:
# Twitter站点(twitter:site)
twitter_site:
# Google+个人资料链接(已废弃)
google_plus:
# Facebook管理员ID
fb_admins:
# Facebook应用程序ID
fb_app_id:
# 页面的结构化数据
# https://developers.google.com/search/docs/guides/intro-structured-data
structured_data:
# 页面标题(可选)
# 大多数情况下应保留为空
title:
# 页面描述(可选)
# 大多数情况下应保留为空
description:
# 页面URL(可选)
# 大多数情况下应保留为空
url:
# 页面作者(article:author)(可选)
# 大多数情况下应保留为空
author:
# 页面发布者(可选)
# 大多数情况下应保留为空
publisher:
# 页面发布者Logo(可选)
# 大多数情况下应保留为空
publisher_logo:
# 页面图像(可选)
# 大多数情况下应保留为空
image:
# 其他HTML元标签数组
meta:
# 以<属性>=<值>格式指定的元标签
# 例如,name=theme-color;content=#123456 => <meta name="theme-color" content="#123456">
- ''
# 网站RSS atom.xml的URL或路径
rss:
# 页面顶部导航栏配置
navbar:
# 导航菜单项
menu:
Home: /
Archives: /archives
Categories: /categories
Tags: /tags
About: /about
# 导航栏右侧显示的链接
links:
Download on GitHub:
icon: fab fa-github
url: https://github.com/ppoffice/hexo-theme-icarus
# 页面底部配置
footer:
# 版权文本
copyright: © 2019
# 底部右侧显示的链接
links:
Creative Commons:
icon: fab fa-creative-commons
url: https://creativecommons.org/
Attribution 4.0 International:
icon: fab fa-creative-commons-by
url: https://creativecommons.org/licenses/by/4.0/
Download on GitHub:
icon: fab fa-github
url: https://github.com/ppoffice/hexo-theme-icarus
# 文章相关配置
article:
# 代码高亮设置
highlight:
# 代码高亮主题
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light
# 显示复制代码按钮
clipboard: true
# 代码块的默认折叠状态。可以是""、"folded"、"unfolded"
fold: unfolded
# 是否显示预计的文章阅读时间
readtime: true
# 是否显示更新时间。当设置为"auto"时,仅在page.updated设置并与page.date不同的情况下显示文章更新时间
update_time: true
# 文章授权模块
licenses:
Creative Commons:
icon: fab fa-creative-commons
url: https://creativecommons.org/
Attribution:
icon: fab fa-creative-commons-by
url: https://creativecommons.org/licenses/by/4.0/
Noncommercial:
icon: fab fa-creative-commons-nc
url: https://creativecommons.org/licenses/by-nc/4.0/
# 搜索插件配置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search/
search:
type: insight
# 是否在搜索结果中包含页面
index_pages: true
# 评论插件配置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment/
comment:
type: disqus
# Disqus短名称
shortname: ''
# 捐赠插件配置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation/
donates:
# "Afdian.net"捐赠按钮配置
-
type: afdian
# "Afdian.net"个人页面的URL
url: ''
# 支付宝捐赠按钮配置
-
type: alipay
# 支付宝二维码图片URL
qrcode: ''
# "Buy me a coffee"捐赠按钮配置
-
type: buymeacoffee
# "Buy me a coffee"页面的URL
url: ''
# Patreon捐赠按钮配置
-
type: patreon
# Patreon页面的URL
url: ''
# Paypal捐赠按钮配置
-
type: paypal
# Paypal商业ID或电子邮件地址
business: ''
# 货币代码
currency_code: USD
# 微信捐赠按钮配置
-
type: wechat
# 微信二维码图片URL
qrcode: ''
# 分享插件配置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/
share:
type: sharethis
# ShareThis分享插件脚本的URL
install_url: ''
# 侧边栏配置
# 请注意,当侧边栏至少有一个小部件时才会显示
sidebar:
# 左侧侧边栏配置
left:
# 页面滚动时侧边栏是否固定在顶部
sticky: false
# 右侧侧边栏配置
right:
# 页面滚动时侧边栏是否固定在顶部
sticky: false
# 侧边栏小部件配置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
# 个人资料小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: profile
# 作者姓名
author: Your name
# 作者头衔
author_title: Your title
# 作者当前位置
location: Your location
# 头像图片的URL或路径
avatar:
# 是否显示圆形头像
avatar_rounded: false
# Gravatar的电子邮件地址
gravatar:
# 关注按钮的URL或路径
follow_link: https://github.com/ppoffice
# 个人资料小部件底部显示的链接
social_links:
Github:
icon: fab fa-github
url: https://github.com/ppoffice
Facebook:
icon: fab fa-facebook
url: https://facebook.com
Twitter:
icon: fab fa-twitter
url: https://twitter.com
Dribbble:
icon: fab fa-dribbble
url: https://dribbble.com
RSS:
icon: fas fa-rss
url: /
# 目录小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: toc
# 是否显示每个标题的索引
index: true
# 当子标题不在视图中时是否折叠
collapsed: true
# 显示的最大标题级别(1-6)
depth: 3
# 推荐链接小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: links
# 网站的名称和URL
links:
Hexo: https://hexo.io
Bulma: https://bulma.io
# 分类小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: categories
# 最近文章小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: recent_posts
# 归档小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: archives
# 标签小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: tags
# 如何排序标签。例如,按名称升序排序使用'name',按每个标签中的文章数量降序排序使用'-length'
order_by: name
# 要显示的标签数量。如果未设置,将显示所有标签。
amount:
# 是否显示标签计数,即每个标签中的文章数量。
show_count: true
# Google FeedBurner电子邮件订阅小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: subscribe_email
# 电子邮件输入框下的提示文本
description:
# Feedburner ID
feedburner_id: ''
# Google AdSense单元配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: adsense
# AdSense客户端ID
client_id: ''
# AdSense广告单元ID
slot_id: ''
# Follow.it电子邮件订阅小部件配置
-
# 小部件应放置在何处,左侧边栏或右侧边栏
position: left
type: followit
# 电子邮件输入框下的提示文本
description:
# 订阅表单操作URL
action_url: ''
# Feed认领验证码
verification_code: ''
# 插件配置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/
plugins:
# 启用页面启动动画
animejs: true
# 显示"返回顶部"按钮
back_to_top: true
# 百度统计插件设置
# https://tongji.baidu.com
baidu_analytics:
# 百度统计跟踪ID
tracking_id:
# 必应网站管理员工具插件设置
# https://www.bing.com/toolbox/webmaster/
bing_webmaster:
# 必应网站管理员工具<meta>标签中的跟踪ID
tracking_id:
# BuSuanZi站点/页面浏览量计数器
# https://busuanzi.ibruce.info
busuanzi: false
# CNZZ统计
# https://www.umeng.com/web
cnzz:
# CNZZ跟踪ID
id:
# CNZZ网站ID
web_id:
# 向用户提醒使用Cookies
# https://www.osano.com/cookieconsent/
cookie_consent:
# 合规类型。可以是"info"、"opt-in"或"opt-out"
type: info
# 弹出窗口的主题。可以是"block"、"edgeless"或"classic"
theme: edgeless
# 弹出窗口是否应在页面滚动时保持静止
static: false
# 同意弹出窗口应显示在屏幕的哪个位置
position: bottom-left
# 您站点的Cookie政策URL
policyLink: https://www.cookiesandyou.com/
# 启用lightGallery和Justified Gallery插件
gallery: true
# Google Analytics插件设置
# https://analytics.google.com
google_analytics:
# Google Analytics跟踪ID
tracking_id:
# Hotjar用户反馈插件
# https://www.hotjar.com/
hotjar:
# Hotjar站点ID
site_id:
# 启用KaTeX数学排版支持
# https://katex.org/
katex: false
# 启用MathJax数学排版支持
# https://www.mathjax.org/
mathjax: false
# 启用Outdated Browser插件
# http://outdatedbrowser.com/
outdated_browser: false
# 启用PJAX
pjax: true
# 在页面加载时在页面顶部显示进度条
progressbar: true
# Statcounter统计
# https://statcounter.com/
statcounter:
# Statcounter项目ID
project:
# Statcounter项目安全代码
security:
# Twitter转化跟踪插件设置
# https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
twitter_conversion_tracking:
# Twitter Pixel ID
pixel_id:
# CDN提供商设置
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
# JavaScript和/或样式表CDN提供商的名称或URL模板
cdn: jsdelivr
# Web字体CDN提供商的名称或URL模板
fontcdn: google
# FontAwesome图标字体CDN提供商的名称或URL
iconcdn: fontawesome
3.2 更改语言
首先我们要将英语改为中文;icarus主题自带了许多语言。
编辑**站点配置文件
**,修改语言设置。
language: zh-CN
3.3 修改logo、favicon
-
将logo、favicon放到
/themes/icarus/source/img/
中。打开主题配置文件,修改以下部分,注意:后面有一个空格。 -
编辑
_config.icarus.yml
文件,修改其中的logo
和favicon
内容 -
3
4. Icarus高级玩法
4.1 网站访问量与统计
编辑_config.icarus.yml
,修改配置:
# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: true
启动页面之后会在页面最底部显示访问量。
4.2 网站运行时间统计
-
在
/themes/icarus/source/js/
目录下新建文件runtime.js
用于计算网站的运行时间。注意将其中的时间替换成网站的上线时间。function siteRuntime(startDate) { const start = new Date(startDate); const now = new Date(); const elapsed = now - start; const days = Math.floor(elapsed / (1000 * 60 * 60 * 24)); const hours = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((elapsed % (1000 * 60)) / 1000); return `本站已安全运行${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`; } function updateRuntime() { const startDate = '2023-01-01T00:00:00'; // 将此处的日期替换为你的网站上线时间 const runtimeElement = document.getElementById('site-runtime'); if (runtimeElement) { runtimeElement.innerText = siteRuntime(startDate); } } setInterval(updateRuntime, 1000);
-
编辑
/themes/icarus/layout/common/head.jsx
文件,在文件的<head>
部分引入runtime.js
并保存。<script src={ url_for('/js/runtime.js') }></script>
参考下图:
-
编辑
/themes/icarus/layout/common/footer.jsx
文件,在合适的位置添加用于显示时间的HTML代码并保存。<div id="site-runtime"></div>
参考下图:
-
重新启动博客,打开任意页面看效果。
此处只抛砖引玉,如果熟悉js和html你可以进行优化并实现你想要的效果。