【Hexo系列】【5】主题icarus使用

本期将为大家讲解Hexo iCarus主题的使用。

1. Icarus介绍

Icarus 是一个广受欢迎的 Hexo 博客主题,以其清新、现代的界面和优秀的响应式设计著称。它提供了丰富的个性化选项,支持多语言,易于配置和使用。Icarus 还注重用户体验,包括SEO优化和性能,适合技术博主和创意写作者展示他们的作品。

Icarus主题官网:https://github.com/ppoffice/hexo-theme-icarus

官网效果图:

image-20240723124631979

2. Icarus安装

2.1 下载主题

建议你使用clone最新版本的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。

切换到博客的主题根目录themes下打开Git Bash并执行以下命令:

git clone https://github.com/ppoffice/hexo-theme-icarus.git icarus

下载完成后,会在项目themes目录下生成icarus文件夹

image-20240723125527715

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

image-20240723172456218

3. Icarus配置

启动成功之后,在博客的根目录里会自动生成Icarus的配置文件:_config.icarus.yml

image-20240723172745382

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主题自带了许多语言。

image-20240723183511911

编辑**站点配置文件**,修改语言设置。

language: zh-CN

image-20240723183636553

3.3 修改logo、favicon

  1. 将logo、favicon放到/themes/icarus/source/img/中。打开主题配置文件,修改以下部分,注意:后面有一个空格。

  2. 编辑_config.icarus.yml文件,修改其中的logofavicon内容

    image-20240723184203881

  3. 3

4. Icarus高级玩法

4.1 网站访问量与统计

编辑_config.icarus.yml,修改配置:

# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: true

启动页面之后会在页面最底部显示访问量。

image-20240723181348524

4.2 网站运行时间统计

  1. /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);
    
    
  2. 编辑/themes/icarus/layout/common/head.jsx文件,在文件的<head>部分引入runtime.js并保存。

    <script src={ url_for('/js/runtime.js') }></script>
    

    参考下图:

    image-20240723183003397

  3. 编辑/themes/icarus/layout/common/footer.jsx文件,在合适的位置添加用于显示时间的HTML代码并保存。

    <div id="site-runtime"></div>
    

    参考下图:

    image-20240723182904446

  4. 重新启动博客,打开任意页面看效果。

    image-20240723183144688

此处只抛砖引玉,如果熟悉js和html你可以进行优化并实现你想要的效果。

5. 其他

GPT-4o 教程

MidJourney教程

Poe教程

Fantia教程

  • 16
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值