首页 > 其他分享 >Hexo 配置 Icarus 主题

Hexo 配置 Icarus 主题

时间:2024-08-17 15:51:01浏览次数:13  
标签:配置 hexo utterances config 主题 Icarus 安装 Hexo icarus

本文讲述如何给 hexo 博客网站配置。

1. 安装环境说明

  • 首先粘贴本教程测试使用的环境,如果在安装配置中,环境有差异,请酌情修改或调整参数.
$hexo v
INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
hexo: 5.4.0
hexo-cli: 4.3.2
os: linux 6.8.8-300.fc40.x86_64 Fedora Linux 40 (Workstation Edition)
node: 20.12.2
acorn: 8.11.3
.....

$tree -L 1
your_project_dir/blog
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── scaffolds
├── source
        └── _posts
                ├── hexo
                └── rust
└── themes

source 目录下已经有两篇文章,项目能发布到 github 上,能在公网上通过https://pengtech.net正常访问了.下一步实现尝试一下修改默认的主题,将其替换为 icarus 主题.

2. 安装 Icarus 主题

安装 Icarus 主题有两种方式:

  • 通过 npm 安装
  • 通过 git clone 安装
  • 通过压缩包安装

2.1. 安装方式一: 通过 npm 安装


npm install -S hexo-theme-icarus hexo-renderer-inferno

2.2. 安装方式二: 通过 git 克隆安装

  git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus --branch 6.1.0 --depth 1
  #另外,你也可以使用下面的命令将Icarus安装为Git子模块(submodule):
  git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus --branch 6.1.0 --depth 1

安装 dependencies


npm install -S semver@^7.5.4

npm install --save [email protected] hexo-component-inferno@^3.1.0

npm install -S  hexo-renderer-inferno@^1.0.2

2.3. 安装方式三: 通过压缩包安装

  • 进入项目

    $cd blog
    $pwd
    your_project_dir/blog
    

    项目目录结构如上节所示

  • 找到对应的压缩包

  • 下载
    源代码包 Source code(tar.gz)

  • 解压缩
    将源码包解压到 themes/icarus 目录下即可.

  • 一键安装

    • 前提是你的电脑支持 curl, wget, grep 等命令,针对大多数 windows 用户,建议还是参考上面的步骤一步一步安装主题,对于 MacOs 和 windows 用户,可以使用如下命令一键安装

    • 理解以上步骤,能更好地帮助你理解一键安装命令

    • 这里将以上步骤压缩成一条命令

      mkdir themes/icarus
      curl -s https://api.github.com/repos/ppoffice/hexo-theme-icarus/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/icarus --strip-components=1
      
      
    • 安装完成后,  themes/icarus 目录的结构如下所示

      $tree -L 2
      .
      ├── _config.landscape.yml
      ├── _config.yml
      ├── db.json
      ├── node_modules
      ├── package.json
      ├── package-lock.json
      ├── scaffolds
      │   ├── draft.md
      │   ├── page.md
      │   └── post.md
      ├── source
      │   └── _posts
      ├── themes
      │   └── icarus
      └── yarn.lock
    
    

3. 配置 Icarus 主题

3.1. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件_config.yml, 找到 theme 字段,并将其值更改为 icarus

theme: icarus

也可以使用 hexo 命令启用 icarus 主题

hexo config theme icarus

3.2. 验证主题

  • 首先启动 Hexo 本地站点

    hexo server
    
  • 当命令行输出中提示出:
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

  • 此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

3.3. 配置作者资料卡

你可以启用作者资料卡挂件来展示文章作者/网站站长的信息。 资料卡的配置如下所示:

_config.icarus.yml

widgets:
  - position: left
    type: profile
    # 作者名称
    author: 鹏叔
    # 作者头衔
    author_title: A GitHub Octocat
    # 作者所在地/公司
    location: GitHub Inc.
    # 头像图片地址
    avatar: https://octodex.github.com/images/hula_loop_octodex03.gif
    # 是否显示圆形头像
    avatar_rounded: false
    # Gravatar邮箱(如不设置`avatar`项)
    gravatar:
    # 关注按钮链接地址
    follow_link: "https://pengtech.net"
    # 社交媒体链接
    social_links:
      Github:
        icon: fab fa-github
        url: "https://github.com/guoapeng"

需要注意的是:

  • 如果你希望使用 Gravatar 而不是 avatar 配置项作为头像图片,请在 gravatar 项填入 你的 Gravatar 邮箱地址并在 avatar 一项中留空;

  • social_links 可以采用如下两种格式:

    • 图标形式:

      <链接名称>:
          icon: <FontAwesome5_图标的_HTML_class名称>
          url: <链接的URL地址>
      
    • 文字形式:

      <链接名称>: <链接的URL地址>
      

3.4. 配置友站链接

你可以使用友站链接挂件来展示外部网站的列表。 示例配置如下所示:

widgets:
  - position: left
    type: links
    # 友站名称与链接
    links:
      pengtech: "https://pengtech.net"
      philoenglish: "https://philoenglish.com"

3.5. 配置最新文章

使用如下挂件配置来开启最新文章挂件:

_config.icarus.yml

widgets:
  - position: right
    type: recent_posts

3.6. 配置文章归档

使用如下挂件配置来开启文章归档挂件:

_config.icarus.yml

widgets:
  - position: right
    type: archives

3.7. 配置文章分类

使用如下挂件配置来开启文章分类挂件:

_config.icarus.yml

widgets:
  - position: right
    type: categories

3.8. 配置文章标签

使用如下挂件配置来开启文章标签挂件:

_config.icarus.yml

widgets:
  - position: right
    type: tags
    order_by: name # 可选项。按名称(name)或长度(length)来排序。加上`-`前缀来倒序排列。
    amount: 20 # 可选项。最多显示的标签数量。留空以显示所有标签。
    show_count: true # 可选项。是否显示标签名称右侧的文章数量。

3.9. 开启 shareThis 分享按钮

  1. 访问 ShareThis 并点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。
  2. 在“选择分享按钮类型”(Choose type of sharing button)页面选择你需要的按钮类型。 不要启用”GDPR 规范工具“,否则可能会导致一些问题。 你也可以点击“自定义你的分享按钮”(Customize your share buttons)链接来进行按钮的进一步配置。 完成后点击“下一步”(Next)。
  3. 在”选择你的 CMS 平台“(Choose your CMS platform)页面选择”HTML“并点击”下一步“(Next)。
  4. 在“注册并获取代码”(Register and get the code!)页面输入邮箱和密码完成 ShareThis 的注册。
  5. 最后,从 HTML 代码段中复制 src 中的 URL 地址到分享按钮配置中。

例如,下面的 ShareThis 代码:

<script
  type="text/javascript"
  src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons"
  async="async"
></script>

对应下面的主题配置:

share:
  type: sharethis
  install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons

3.10. 开启 follow.it

安装 hexo-generator-feed


npm install hexo-generator-feed --save

配置 feed, 参考 https://github.com/hexojs/hexo-generator-feed

修改_config.yml,配置 feed 如下


feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

按照如下步骤即可启用 follow.it 邮件订阅插件:

首先,使用诸如 hexo-generator-feed 此类的 Hexo 插件生成 你的 Hexo 网站的 RSS 源。

访问 follow.it 并在“向你的站点添加关注功能”(Add the follow feature to your site)下方的 输入框中填写 RSS 源的文件地址,例如http://example.com/atom.xml。 然后,点击“下一步”(Next)。

follow it enter feed url

点击“定义关注表单设计”(Define the follow form’s design)页面上的“继续”(Continue)按钮。

搜索 action=并复制 action=后双引号中的链接。 把你复制的 action 链接粘贴到挂件配置中的 action_url 设置项。 在那之后,点击“完成”(Done)。

3.11. 开启评论系统

可以有多种选择,但是我一直使用的是 utterances,这次依然是 utterances

3.11.1. utterances

安装指南在线预览
准备一个公开的 GitHub 仓库(Repository)。

访问 GitHub Apps - utterances 并点击”安装“(Install)。

GitHub 应用页 - utterances
GitHub 应用页 - utterances

(可选)如果你的账号下有组织账号,在下一页中选择需要安装 utterances 的用户。

选择用户 - utterances
选择用户 - utterances

在下一页面选择将 utterances 安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。 然后点击“安装”(Install)按钮。

选择仓库 - utterances
选择仓库 - utterances

若安装成功,网页将跳转到 utterances 官网。 你可以阅读每个的配置项的说明,并按照配置你的 utterances 安装。

完成配置后,转到页面上的”开启 utterances“(Enable Utterances)并从 utterances 的 HTML 代码中复制属性值到主题配置的对应配置项中。

获取代码 - utterances
获取代码 - utterances

例如下面的 utterances 代码:

utterances 安装代码

对应下面的主题配置:

_config.icarus.yml

comment:
  type: utterances
  repo: Your-GitHub-Username/Your-Public-Repo-Name
  issue_term: pathname # 必填项,与issue_number二选一填写
  issue_number: 100 # 必填项,与issue_term二选一填写,每篇文章对应一个issue,填写前需要手动创建issue
  label: some-issue-label # 可选填
  theme: github-light # 可选填

开启站内搜索

修改icarus配置文件_config.icarus.yml,


search:
    type: insight
    # Whether to include pages in the search results
    index_pages: true

4. 支持夜间模式

参考 https://www.imaegoo.com/2020/icarus-night-mode-3/

5. 添加相关文章推建

相关文章推荐,每次都是手动写的,最近发现 hexo-related-popular-posts 可以自动生产相关文章推荐。但是这个已经有几年没有更新了,比较适合 next 等较早一批出现的 hexo 主题。网上搜索了一下,发现ZhongHuihong做了向 icarus 主题的适配 - 参考这篇文章 hexo icarus 主题添加相关文章

这里为了防止网页找不到,结合 hexo-related-popular-posts 官方文档和上述文章将步骤重新整理一下。


npm install hexo-related-popular-posts --save

5.2. 修改 icarus 主题源码

由于最新的 Icarus 使用 npm 安装的话是安装到 node_modules 下的,所以我们需要把主题弄到 themes 目录下。可以直接 git clone 一份到这个目录或者是复制出来,hexo 加载 themes 目录下的主题优先级是大于 node_modules 目录。

layout\common 目录下新增 related.jsx

const { Component } = require("inferno");
const view = require("hexo-component-inferno/lib/core/view");

module.exports = class extends Component {
  render() {
    const { config, helper, page } = this.props;
    const { __, popular_posts } = helper;
    let relatedText = popular_posts({}, page);
    if (!relatedText || relatedText.length == 0) {
      return null;
    }
    return (
      <div class="card">
        <div class="card-content">
          <h3>相关文章</h3>
          <span dangerouslySetInnerHTML={{ __html: relatedText }}></span>
        </div>
      </div>
    );
  }
};

说明
与其他主题不同,icarus 的 post 叫做 page,this.props 中是不包含 post 的。hexo-related-popular-posts 注册了 popular_posts 函数用于渲染相关文章,这个需要在 helper 加上。
hexo-related-popular-posts 生成的 html text 需要使用 dangerouslySetInnerHTML 设置,否则直接渲染出来的是带引号的。
下面是我编写的 related.jsx。

修改 article.jsx
编写好了 related.jsx,就需要在 article.jsx 中修改了。需要引入自定义的 jsx 文件,并在合适的位置插入标签。

require.jsx

const Share = require('./share');
const Donates = require('./donates');
const Comment = require('./comment');
+ const Related = require('./related');

插入相关文章标签


+ {/* Related articles */}

+ {!index ? <Related config={config} page={page} helper={helper}/> :null}

{/* Donate button */}
{!index ? <Donates config={config} helper={helper} /> : null}

把它放在文章的尾部,捐赠的上方,!index 表示首页不出现。

效果预览&后记
如果有啥报错的话,记得 hexo clean 一下。

具体的样式可以自己微调,上述代码的改动效果如下。
hexo-related-popular-posts 生成的 div 有自带 class,可以自行添加 icarus/source/css/style.styl 与修改 icarus/include/style 目录下的 style 进行样式的微调。

6. 添加 google 广告

注册 Google Adsense 账号
注册账号流程比较简单,入口在这里:Google Adsense
注册完成后,google 会提供一段广告脚本, 将他放到下面文件的头部位置

从脚本获取到 google adsense client_id 和 slot_id

修改icarus配置文件_config.icarus.yml, 配置google adsense widget如下

widgets:
  ...
  # Where should the widget be placed, left sidebar or right sidebar
        position: right
        #type: adsense
        # AdSense client ID
        #client_id: 'ca-pub-zzzzzzz'
        # AdSense AD unit ID
        #slot_id: 'yyyyyyyyyy'
  ...

7. hexo Icarus主题优化

记 hexo icarus 主题优化 Google PageSpeed Insights 分数

8. 参考文档

Icarus 快速上手

hexo icarus 主题添加相关文章

记 hexo icarus 主题优化 Google PageSpeed Insights 分数

标签:配置,hexo,utterances,config,主题,Icarus,安装,Hexo,icarus
From: https://www.cnblogs.com/guoapeng/p/18364500/hexo_apply_icarus_theme

相关文章

  • 使用Hexo搭建自己的博客网站
    1.背景介绍本文是写给完全没有接触过技术的普通博客用户使用的,所以解释地比较细致,如果有技术基础,可以忽略其中的解释部分,按命令执行即可.说明:我的工作环境是fedoralinux,出于安全性考虑一直运行在普通用户下,如果你的安装环境是Mac或者windows,请理解每一步骤的含义后......
  • Hexo-Github Actions 自动部署方案
    前阵子因为很久没有捡起来写博客,导致电脑的node环境各种版本问题,本地压根运行不起来,所以折腾了一下Hugo方案,感觉Hugo相较于Hexo还是有很多优势的,让我印象比较深的是:整个环境较为独立,不再像Hexo需要依赖电脑Node版本,各种插件需要独立版本,随着Hexo或者Node版本升......
  • Hexo-常用插件&配置
    参考文档地址:Plugins,Hexo官方插件列表地址theme-next/awesome-next::sunglasses:ThemeNexT,AWESOMENexT!这里汇总一下自己比较常用的插件以及相关的配置,希望对你有所帮助。注意:我使用的是next主题,很多配置可能是主题专用!RSS安装hexo-generator-feed插件即可n......
  • 高清极致美丽:抽象蓝黄主题下的美丽女孩
    这是一幅极致高清、极具视觉震撼的杰作,展现了一位美丽女孩的形象。画面以抽象艺术风格呈现,黄色与蓝色主题交织,形成鲜明的对比,背景为纯白色。作品细节处理极端精细,呈现出情感丰富、引人入胜的美感。正向提示词masterpiece,bestquality,ultrahighres,(extremedetail......
  • 使用 Decap CMS 作为 Hexo 后端以实现在线编辑(保姆级教程)
    转自我的博客,本人博客体验效果更佳。Posts:使用DecapCMS作为Hexo后端以实现在线编辑(保姆级教程)前言静态网站建站成本低、安全、轻量,但最大的缺点就是没有后台,更新网站麻烦。DecapCMS就能解决这个问题本文将介绍DecapCMS,并详细讲解DecapCMS部署教程。让你......
  • 把廉价香橙派利用到极致,跑自建 Gitea 和 Hexo 服务
    这篇文章在我的博客同步发布:把廉价香橙派利用到极致,跑自建Gitea和Hexo服务书接上回code-server搭建。code-server因为是原生服务,再加上这枚H618芯片性能相当可以,内存和CPU占用都很小,但是耗电却紧压电源适配器的15W极限,剩余的性能……浪费了?这怎么行?!经过苦思冥想,......
  • 高性能无锁队列 Disruptor 核心原理分析及其在i主题业务中的应用
    一、i主题及Disruptor简介i主题是vivo旗下的一款主题商店app,用户可以通过下载主题、壁纸、字体等,实现对手机界面风格的一键更换和自定义。Disruptor是英国外汇交易公司LMAX开发的一个高性能的内存队列(用于系统内部线程间传递消息,不同于RocketMQ、Kafka这种分布式消息......
  • 高性能无锁队列 Disruptor 核心原理分析及其在i主题业务中的应用
    作者:来自vivo互联网服务器团队-LiWanghong本文首先介绍了Disruptor高性能内存队列的基本概念、使用Demo、高性能原理及源码分析,最后通过两个例子介绍了Disruptor在i主题业务中的应用。一、i主题及Disruptor简介i主题是vivo旗下的一款主题商店app,用户可以通过下......
  • hexo搭建个人博客
    Tips:hexoGithubhexo使用文档(英文)hexo使用文档(中文)博客地址一、安装依赖包hexo需要依赖:nodejs、npm等依赖包,先下载:#更新apt源和升级本地软件包sudoaptupdatesudoaptupgrade#安装依赖包sudoaptinstallgitnet-toolsiputils-pingbuild-essentialsudoa......
  • Ubuntu22 安装和恢复 Hexo,解决nodejs默认版本较低的问题。
    因为Ubuntu自带的nodejs版本和我之前搭建好的hexo环境不符合,从github上面拉取之后不能够直接使用hexo配置,要重新下载和配置nodejs的版本。安装nvm安装步骤sudoaptinstallcurlcurlhttps://raw.githubusercontent.com/creationix/nvm/master/install.sh|bash出现问题......