Hexo博客添加图片、音乐、视频

最新推荐文章于 2024-07-01 20:05:32 发布
原创 最新推荐文章于 2024-07-01 20:05:32 发布 · 2.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何在Hexo博客中添加本地图片、插入音乐、视频，包括使用embed标签和dplayer播放视频的方法，提供了具体的Markdown代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Hexo博客添加图片、音乐、视频

添加本地图片

在\hexo\source目录下新建文件夹，命名为images或者其他你喜欢的名字，然后编辑你的md博文，插入下面的代码样式：

![“图片描述”（可以不写）](/images/你的图片名字.JPG)

例如我在D:\hexo\source\images放入了一个haha.jpg图片，然后写下：

![](/images/haha.jpg)

插入音乐

比如网易云音乐，找到喜欢的歌曲，点击生成外部链接，把里面的代码复制下来，直接粘贴到博文中即可。

生成外部链接

效果如下

border="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=2780528&auto=0&height=66">

插入视频

embed标签

最低0.47元/天 解锁文章

200万优质内容无限畅学
在Hexo搭建的博客中插入音乐或者视频
倚马古道
04-25 5217
原文地址在Hexo搭建的博客中插入音乐或者视频 用hexo搭建博客后，记录了自己生活和学习中的很多事情。今天偶然想到能不能在博客中插入音乐和视频呢？然后就开始了今天的历程。。。。 hexo-tag-aplayer hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件（现已支持 MetingJS）。 安装 npm install --save hexo-tag-aplaye...
Hexo中添加音乐（列表）、视频的代码
LXl491214的博客
07-14 765
Hexo中添加音乐（列表）、视频的代码
hexo文章插入音乐和视频
会飞的小弋
05-24 4921
这里推荐一下我的个人网站，使用的是hexo的butterfly主题，效果演示：https://lovelijunyi.gitee.io/posts/743c.html 直接插入 直接插入的好处是无需任何的插件 插入音乐 音乐链接获取 生成链接 音乐代码 <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=825 height=86 src="//music.163.com/outchain/pla
Hexo（sakura）插入图片，视频，音乐
cungudafa的博客
02-15 2857
文章目录一、在Hexo中插入哔哩哔哩视频二、在Hexo中插入fancybox图片查看三、总结 参考：hexo-sakura主题配置–hojun 一、在Hexo中插入哔哩哔哩视频 效果： 步骤： 个人插件hexo-tag-bili中文文档，用来在文章或单页面中插入B站外链视频 2.1安装 npm i hexo-tag-bili --save 2.2在Hexo博客的文章或者单页面...
hexo博客插入图片与视频方法
suzhigao的博客
02-04 7226
hexo博客插入图片与视频方法 在博客中插入视频和图片能让人通俗易懂，生动形象。下面是我找到的一些方法。 图片插入 Hexo有多种图片插入方式，可以将图片存放在本地引用或者将图片放在CDN上引用。 本地引用–绝对路径 当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。 source/images/image.jpg ![...
hexo添加_Hexo博客中插入音乐/视频/
weixin_29688227的博客
01-13 1182
Hexo插入音乐/视频/网易云音乐/bilibili视频，会让博客看起来很洋气 (ง •̀_•́)ง 。查看更多于本人博客：iii.runMarkdown 通用的音乐视频插入方法iframe 标签代码从网易云音乐获得网易云音乐因为简书不支持，可以在李飞阳看到效果。iframeembed 标签因为简书不支持，可以在李飞阳看到效果。embedjavascript 标签举例javascript使用 H...
使用插件aplayer和MeingJS在hexo文章内添加音乐
最新发布
个人博客地址为http://elikhb.top/
07-01 1227
title: “在Hexo博客中使用APlayer和Meting音乐播放器”
从零开始免费搭建自己的博客(一)——本地搭建hexo框架
yushuaigee的博客
01-02 7988
本文是博客搭建系列文章第一篇，其他文章链接： 从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)——基于 Github pages 建站 从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站 从零开始免费搭建自己的博客(四)——编写 Markdown 文章并发布 从零开始免费搭建自己的博客(五)——三个站点一键发布博客 从零开始免费搭建自己的博客(六)——导出 优快云 博客为 Markdown 格式 从零开始免费搭建自己的博客(七)——博客.
hexo文章中插入图片
热门推荐
www.hohode.com
05-02 2万+
使用markdown写文章，插入图片的格式为，这里要说的是链接地址怎么写。 对于hexo，有两种方式： 使用本地路径：在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。 使用微博图床，地址http://weibotuchuang.sinaapp.com/，将图片拖入区域中，会生成图片的URL，这就是链接地址。
【Hexo】hexo在文章中添加图片
_cheny
04-10 2万+
hexo 添加图片插件 安装图片插件 npm install hexo-asset-image --save 在_config.yml配置文件中，修改为 post_asset_folder: true， 然后新建一篇文章 hexo new post ceshi 这个时候会出现一个ceshi.md 和 ceshi的文件夹 然后就可以在文章中引用了 重新编译一下 然后启动服务 当然也可以...
hexo-bilibili-card:一个Hexo插件，在你的文章中插入b站的视频卡片，样式模仿和借鉴自b站。A hexo plugin insert a bilibili card into your page or article
04-12
hexo-bilibili-card A hexo plugin insert a bilibili card into your page or article, some of css code is copy from bilibili. 一个Hexo插件，在你的文章中插入b站的视频卡片，样式模仿和借鉴自b站。 Install 安装 npm i hexo-bilibili-card Preview You can click to see the preview website. 点击 看预览哦~ Usage In your markdown file: 在你的markdown文件中插入以下片段 {% bilicard your_video_id %} your_video_id is the avid or bvid in Bilibili. your_video_id 是b站
hexo写博客时怎么插入图片
糖长老莫小贝的博客
05-11 5136
1.把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true（如果没有就不用管了） 2.在cmd中你的hexo目录下执行这样一句话npm install hexo-asset-image –save，这是下载安装一个可以上传本地图片的插件 3.安装完成后，再运行hexo n “title”来生成md博文时，/source/_posts文件夹内除了tit...
在hexo博客中插入图片的方法
2301_77285173的博客
04-16 9623
在使用网上的方法上传图片之后，我仍然遇到“图片无法显示”的问题，查阅官方文档并自己实践后，终于解决了，现将几种插入图片方法的步骤整理如下。在hexo文件夹下的source目录下，新建一个文件夹叫images(名字随意)，将要插入的图片放在该文件夹中。命令创建一篇新文章，此时会在hexo文件夹的source目录下，自动创建一个文件夹和.md文件。添加图片，可以在md文档中，通过下面的方式引用图片，其中双引号内的图片title可省略。这里的 / 指的是根目录，对于hexo，资源文件的根目录就是source。
在Hexo博客中插入图片
weixin_34348805的博客
04-21 5747
在写文章时，常常有配图说明的需求，Hexo 有多种图片插入方式，可以将图片存放在本地引用或者将图片放在 CDN 上引用，通过此文总接一下在 Hexo 搭建的博客中，插入图片的常用方式，你也可以理解为在 Markdown 中插入图片。 src 链接 如果你要插入的图片，是一个外部的 src 链接地址，比如该图片存放在 CDN 上，或某某图床上面，那就使用 Markdown 默认的插入图片的方式，方法...
hexo文章插入图片方法小结
u014155600的博客
02-09 1552
hexo插入图片方法总结
关于给hexo博客增加视频vlog页面（主要引入哔哩哔哩视频）
itsNekoDeng的博客
10-31 1573
前言: 这里是博主的vlog区，博主也是B站的一名普通up????，欢迎观看交流。本文基于matery主题，主要引入哔哩哔哩视频。 新建视频页面 在source文件下新建一个video文件 在该文件里新建一个index.md文件，其中文件内容为： --- title: video type: "video" layout: "video" --- 在主题配置文件_config.yml下，增加音乐页面链接和标题 video: url: /video 新建video.ejs文件 在主题layo
如何发布文章到hexo博客上(含插入图片的方法)
2301_77285173的博客
04-16 864
会在source/_post文件夹下生成一个"如何发布文章到hexo博客上(含插入图片的方法).md"文件。用浏览器打开你的博客链接，可以查看发布的博客。直接把编辑好的.md格式的文件，复制到hexo文件夹下的source/_posts文件夹。我们可以将所有与该文章有关的资源（包括图片）放在这个关联文件夹中，再通过相对路径来引用它们。命令创建新文章，此时会自动创建一个文件夹和.md文件。可以看到，同时还生成了一个同名的资源文件夹。
Hexo静态博客视频播放
博客
03-03 2005
如何实现Hexo静态博客视频播放？ 其实并不难，说一下我的想法： 博客文章一般是用Markdown来写的 Markdown 是一种用来写作的轻量级 标记语言 Markdown 优点 1.专注你的文字内容而不是排版样式，安心写作。 2.轻松的导出 HTML、PDF 和本身的 .md 文件。 3.纯文本内容，兼容所有的文本编辑器与字处理软件。 4.随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱。 5.可读、直观、学习成本低。 因为这些优点，所以绝大多数博客系统都支持Markdown写的文件
hexo中以iframe形式插入视频无法显示的问题解决
raintlung的博客
05-03 1628
文章目录前言一、文章参考二、问题解决1.按照文章插入代码2.尝试修改[元素样式](https://www.w3school.com.cn/css/index.asp)（1）在浏览器中打开开发人员工具，这里使用的是edge，按下ctrl+shift+i即可打开（2）在开发人员工具中的上方导航栏选择“元素”（一般默认就是“元素”），如下所示（3）左键单击代码部分，然后按下ctrl+f查找iframe![在这里插入图片描述](https://img-blog.csdnimg.cn/8720674d54be4ec2
hexo博客添加搜索功能
05-14
要为 Hexo 博客添加搜索功能，你可以使用第三方搜索引擎，如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。 Algolia 是一个强大的搜索引擎，提供了易于使用的 API，可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤： 1. 注册 Algolia 账户并创建一个应用程序。 2. 安装 Hexo Algolia 插件。 ``` npm install hexo-algolia --save ``` 3. 在博客根目录下创建一个名为 `algolia.json` 的配置文件，并填写以下内容： ``` { "applicationID": "YOUR_APP_ID", "apiKey": "YOUR_API_KEY", "indexName": "YOUR_INDEX_NAME" } ``` 将 `YOUR_APP_ID`、`YOUR_API_KEY` 和 `YOUR_INDEX_NAME` 替换为你在 Algolia 上创建的应用程序的信息。 4. 在你的 Hexo 主题中添加搜索框和搜索结果页面。 在主题的相应文件中添加以下代码： 搜索框： ```html <form class="search-form" method="get" action="/search/"> <input class="search-input" type="text" placeholder="Search" name="query"> <button class="search-submit" type="submit">Search</button> </form> ``` 搜索结果页面： ```html --- title: "Search Results" layout: "search" --- <section class="search-results"> {% for page in page.posts %} <article class="search-result"> <h2 class="search-result-title"><a href="{{ page.url }}">{{ page.title }}</a></h2> <p class="search-result-excerpt">{{ page.excerpt }}</p> </article> {% endfor %} </section> ``` 5. 重新生成站点并上传到你的服务器。 ``` hexo generate ``` 6. 同步你的博客数据到 Algolia 上。 ``` hexo algolia ``` 完成以上步骤后，你的 Hexo 博客就可以使用 Algolia 进行搜索了。当用户在搜索框中输入关键字并提交时，将会跳转到搜索结果页面，显示与关键字匹配的文章列表。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值