hexo中插入音乐


title: " hexo中插入音乐"
date: 2017-02-14 01:24:49
tags:
hexo

前言

从用QQ空间开始就喜欢插入背景音乐,如今自己管理自己的博客,当然也要插入音乐,不用开绿钻哈哈哈哈。

关于主题

我用的是yilia

添加音乐

添加的网易云音乐,很方便。
打开网易云音乐某首歌详情页,点击生成外链播放器,选择iframe插件。选择好尺寸。复制html代码。如:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=4940455&auto=1&height=32"></iframe>

这里手动修改width为"100%",再添上class。然后把下面这段代码复制到
themes\yilia\layout\_partial\left-col.ejs里,代码:

<nav class="header-music">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=4940455&auto=1&height=32"></iframe>
</nav>

如图:

![开启网易云](http://github-10029416.cos.myqcloud.com/%E5%BC%80%E5%90%AF%E7%BD%91%E6%98%93%E4%BA%91.png
)。

这样就可以生成播放器了,但是还需要调一下css样式。
在themes\yilia\source\main.2d7529.css(如果名字不同,也应为main.xx.css)末尾添加

.header-music {margin-top: 80px; }

接着hexo clean,hexo g,hexo s 搞定。
效果如下:
网易云效果

之后会试着利用cplayer把列表插入到主题中。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用的内容是关于在Hexo Matery主题添加音乐页面的配置说明。通过在主题配置文件_config.yml增加音乐页面链接和标题,以及在新建的musics.ejs文件添加代码,可以支持音乐播放功能。在_config.yml文件,可以设置音乐的平台、类型、ID等参数,以及其他一些配置选项,如是否显示歌词、默认音量等。而在musics.ejs文件,可以使用APlayer播放器插件来实现音乐播放功能,并设置歌单ID、循环播放等参数。这样就可以在Matery主题添加音乐页面了。 总结:要在Hexo Matery主题添加音乐页面,需要进行一系列的配置,包括修改主题配置文件_config.yml、新建musics.ejs文件,并在其添加相应的代码。通过这些配置,可以实现音乐播放功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [关于给hexo博客增加音乐页面(使用Aplayer和MetingJS插件)](https://blog.csdn.net/weixin_42529972/article/details/109517313)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [hexo-matery主题美化(三)-音乐播放器](https://blog.csdn.net/gobullin/article/details/107910725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值