在hexo中插入音乐播放器
在hexo中插入音乐播放器
在md文件中加入以下代码，hexo能够自动渲染为音乐播放器。
1 | {% aplayer "曲目标题" "曲目作者" "mp3.mp3" %} |
代码说明：
- aplayer：是标记关键字，照写即可。
- 第1个参数是曲目标题。
- 第2个参数是曲目作者。
- 第3个参数是曲目的url，可以用相对路径。
最终效果如下图。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Chan Revival Sky！
相关推荐
2024-08-08
第七章：博客部署与上线——一步步教你搞定
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第七章：博客部署与上线——一步步教你搞定一、部署前的准备 在正式将博客部署到线上之前，我们需要确保以下几项内容都已准备完毕：1.1 安装 Hexo 及必要依赖 在本地搭建 Hexo 博客前，务必确保你已经安装了 Node.js 和 Git。如果尚未安装，可以参考以下步骤： 安装 Node.js 请前往 Node.js 官网 下载并安装最新的 LTS 版本。 安装完成后，通过命令行执行 node -v 和 npm -v 来验证安装情况。 安装 Git 请访问 Git 官网 下载安装包并按照提示完成安装。 安装后，在命令行执行 git --version 检查是否安装成功。 安装 Hexo CLI 打开命令行工具，输入以下命令安装 Hexo 命令行工具： npm install -g hexo-cli 安装完毕后，使用 hexo -v 检查版本信息，确保安装成功。 1.2 初始化 Hexo 博客项目 如果你还没有初始化博客项目，请在命令行中选择一个目录，然后运行： hexo init my-blogcd my-blognpm install 初始化完成后，你可以通过 hexo server 命令启动本地服务器，在浏览器中访问 http://localhost:4000 查看博客效果。1.3 配置 _config.yml 在 Hexo 博客的根目录下，有一个...
2024-07-22
第六章：插件加持——提升博客功能与用户体验
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第六章：插件加持——提升博客功能与用户体验在 Hexo 建设个人博客的过程中，插件无疑是一个提升博客功能和改善用户体验的重要手段。通过安装和配置各类实用插件，不仅可以丰富博客的交互性和视觉效果，还能帮助博客在搜索引擎中获得更好的排名。本文将详细讲解如何为 Hexo 博客添加和配置各种插件，包括搜索插件、评论插件、SEO 优化插件等，并提供实际操作步骤和参考示例代码，帮助你打造一个功能更加强大、用户体验更优质的博客平台。 插件的基本概念与作用1.1 插件的概念 插件是一段独立的代码模块，它能够在不修改博客核心代码的前提下，向博客添加额外功能。例如，你可以通过插件实现站内搜索、社交分享、评论系统、统计分析以及 SEO 优化等功能。插件往往由社区开发者提供，并在 GitHub 或 npm 上进行维护和更新。1.2 插件的作用 使用插件的主要作用包括： 功能扩展：实现博客原生功能无法提供的特定需求，如全文搜索、评论交互等。 用户体验提升：增强博客交互性，优化界面布局，让读者在浏览过程中感受到更高质量的体验。 SEO 优化：通过特定插件生成站点地图、自动添加 meta 标签，从而提高搜索引擎收录和排名。 定制化管理：借助插件实现博客管理的自动化，如内容统计、内容备份和性能监控等。 了解了插件的概念和作用之后，接下来我们将分别介绍几类常用插件，并通过实例讲解如何配置和使用这些插件。2. 安装插件的基本步骤 在 Hexo...
2024-06-11
第五章：撰写精彩内容——文章编辑与管理技巧
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第五章：撰写精彩内容——文章编辑与管理技巧在 Hexo 博客建设过程中，撰写和管理博客文章不仅仅是记录日常点滴和技术心得，更是一种艺术表现和品牌传递。一个优秀的博客不只是依靠精美的主题和炫酷的效果，更在于其深度、条理清晰、排版美观、内容丰富的文字。本文将详细介绍如何利用 Hexo 高效地撰写、编辑、分类和管理博客文章，帮助你在众多博客中脱颖而出。内容涵盖 Markdown 基础语法、文章分类、标签管理，以及如何通过 Hexo 高效的工作流程提高写作效率，从而让你的博客在内容创作和排版设计上均有出色表现。 Markdown 基础语法Hexo 默认采用 Markdown 作为撰写文章的主要格式，这一轻量级标记语言以简洁、直观著称。掌握 Markdown 的基本语法，不仅可以提高撰写效率，还能确保你的内容在不同设备和平台上呈现出一致的格式。 标题、段落和分割线Markdown 使用井号（#）来表示标题等级，越多的井号表示标题层级越低。例如： 123# 一级标题## 二级标题### 三级标题 在段落之间可以留空行来分隔内容；若需要插入水平分割线，可使用三个或更多的减号（—）或星号（***）： 123这是第一段内容。---这是第二段内容，使用分割线进行分隔。 强调与列表通过星号（*）或下划线（_）来实现斜体和粗体，单个符号代表斜体，两个符号代表粗体： 12*斜体文本* 或 _斜体文本_**粗体文本** 或...
2024-05-04
第四章：主题选择与定制——让你的博客个性十足
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第四章：主题选择与定制——让你的博客个性十足在 Hexo 博客搭建过程中，主题不仅仅决定了博客的外观，更在很大程度上影响了用户体验与博客的整体风格。一个优秀的主题可以让博客看起来既美观又专业，同时也为后续的个性化定制提供了坚实的基础。本章节将详细介绍如何选择一个适合自己的 Hexo 主题，并进一步进行个性化定制。内容将涵盖主题的选择标准、安装与配置、配色方案调整、布局优化、以及一些高级定制技巧，帮助你通过简单的修改打造独一无二的博客风格。 如何选择适合自己的 Hexo 主题选择一个合适的主题是博客定制的第一步。市面上有众多 Hexo 主题，从简单易用的到功能丰富、定制性极高的都有。下面我们从多个角度介绍如何挑选符合个人需求的主题： 了解主题来源Hexo 官方网站和 GitHub 上都有许多开源主题。官方推荐的主题通常经过较多用户的验证，具有较高的稳定性与良好的文档支持。许多技术博客会分享他们的主题使用心得与推荐主题，如 Next、Landscape、Even、Fluid 等。你可以通过搜索引擎、GitHub...
2024-04-19
第三章：创建你的第一个 Hexo 博客项目——动手实践篇
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第三章：创建你的第一个 Hexo 博客项目——动手实践篇Hexo 是一款基于 Node.js 的静态博客生成器，其简单高效、扩展性强的特点吸引了众多开发者和博客爱好者。无论你是新手还是有一定经验的开发者，这一章节都将详细介绍如何利用 Hexo 命令行工具创建并管理一个全新的博客项目，带你一步步动手实践。本文内容共分为如下几个部分： 环境准备与 Hexo 简介 安装 Hexo CLI 工具 初始化博客项目 项目目录结构解析 各主要文件与目录详细说明 实例演示：创建你的第一篇博客文章 启动 Hexo 服务器并预览效果 后续更新与部署提示 常见问题及解决方案 小结 下面我们将逐步展开介绍。 环境准备与 Hexo 简介在开始创建博客之前，首先需要确认你的开发环境已经满足 Hexo 的运行要求。Hexo 是基于 Node.js 构建的，因此需要安装 Node.js 和 npm（Node 包管理器）。另外，建议在开发过程中安装 Git 以便于项目管理和后续部署。 环境要求 Node.js： 建议使用 LTS 版本（长期支持版本），例如 Node.js 14.x 或 16.x。你可以从 Node.js 官网 下载并安装。 npm： Node.js 自带 npm，确保 npm 版本在 6.x 及以上。 Git： 用于版本控制和代码管理，建议提前安装 Git。 在终端中执行以下命令检查版本信息，确认安装成功： 123node...
2024-03-12
第二章：环境搭建与 Hexo 安装——从零开始的准备工作
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第二章：环境搭建与 Hexo 安装——从零开始的准备工作在正式搭建 Hexo 个人博客之前，首要任务便是构建好开发环境。对于大多数现代 Web 开发者来说，Node.js 已成为必备工具，而 Hexo 作为一款基于 Node.js 的静态博客生成器，自然依赖于这一平台。因此，本章将带领大家从最基础的操作系统环境准备入手，逐步完成 Node.js 和 npm 的安装，最后安装 Hexo，并针对安装过程中常见的问题提供详细的解决方案。即使你是编程新手，也可以按照下面的步骤一步步操作，顺利完成环境搭建。 操作系统环境准备在进行任何软件安装前，首先需要确认你的操作系统满足要求。目前，Hexo 支持在 Windows、macOS 和大多数 Linux 发行版上运行。下面分别介绍在不同操作系统下的准备工作。 Windows 环境在 Windows 环境下搭建开发环境相对简单。建议使用 Windows 10 或更高版本，这样可以获得更好的兼容性和性能体验。步骤如下： 系统更新与安全性检查 首先确保你的系统已经安装了最新的更新补丁，并启用了必要的安全软件。建议先运行 Windows 更新，安装所有推荐更新。 安装必备工具 Windows 用户通常需要安装 Git 以便于版本控制和后续使用命令行工具。可以从 Git 官网 下载最新版本，并按照安装向导完成安装。在安装过程中，建议选择“Use Git from the...
2024-02-14
第一章：初识Hexo——开启博客新时代
Hexo建设个人网站系列教程 目录第一章：初识Hexo——开启博客新时代第二章：环境搭建与 Hexo 安装——从零开始的准备工作第三章：创建你的第一个 Hexo 博客项目——动手实践篇第四章：主题选择与定制——让你的博客个性十足第五章：撰写精彩内容——文章编辑与管理技巧第六章：插件加持——提升博客功能与用户体验第七章：博客部署与上线——一步步教你搞定 第一章：初识 Hexo——开启博客新时代在互联网时代的浪潮中，每个人都有表达自我、记录生活与分享知识的渴望。而当传统的博客平台逐渐显示出种种局限时，一种全新的博客构建方式悄然兴起，成为开发者与博主们心中的新宠。这种方式就是基于静态站点生成器理念的 Hexo。作为一款基于 Node.js 的静态博客框架，Hexo 不仅在速度、灵活性与扩展性上大放异彩，更为我们开启了一扇通往博客新时代的大门。今天，就让我们从最初的认识开始，探究 Hexo 的基本概念、核心优势以及它与传统博客平台之间那截然不同的鲜明对比。这里贴上Hexo官方网站：Hexo官方网站 [{"url":"../../images/hexo.jpg","alt":"","title":""},{"url":"../../images/hexo.jpg","alt":"","title":""}] 博客进化的浪潮与 Hexo 的问世从手写日志到博客盛行在互联网诞生初期，人们通过论坛、留言板甚至电子邮件分享信息，那时的网络世界还显得朴实无华。随着 Web 技术的发展，博客这一新型的个人表达方式逐渐普及。早期的博客大多依赖于动态内容管理系统，比如 WordPress、Blogger...
2024-12-04
Linux命令大全
...
评论
