前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Hexo主题功能优化

首页
2016-07-07 02:08:41
Hexo
Hexo

# 添加音乐播放器


以前觉得网页嵌入播放器很牛逼的感觉,原来就是一句代码的事儿!感谢外连接,感谢开源,让这个世界变得更美好。

markdown语法是完全兼容html代码的,直接把html代码扔进去就oook咯。

  • 添加豆瓣音乐

复制下面代码到你的博文任意位置,然后Hexo s预览。

加入豆瓣音乐 歌曲是随机播放,游客可切歌,不能定制播哪首歌,而且不能按钮停止,只能音量调到0,无语,有利有弊的吧。

尽量放在最下面,如果你放在最上面,很有可能别人还未点击进入博文,你的博客就有了背景音乐了,要想赶紧播放音乐的另说。

<center> <iframe name="iframe_canvas" src="http://douban.fm/partner/baidu/doubanradio" scrolling="no" frameborder="0" width="400" height="200"></iframe> </center>
@前端进阶之旅: 代码已经复制到剪贴板
  • 添加网易云音乐 打开网页版网易云音乐。

如果只是加入单曲,只需要搜索歌曲,点开歌曲名,点击生成外链播放器,复制html代码(可以选择是否自动播放),将html代码无需任何修改放入markdown文章里就OK了。

如果想要加入歌单,就需要自己创建歌单,然后分享歌单,找到自己的分享动态,点进去可以看到有“生成外链播放器”这些字眼,其余操作就和上面一样了。不过,你的歌单有变化的话,这个外链的歌曲同样跟着变,这一点挺棒的。

例如,播放待你长发及腰这首歌,自动播放只需要嵌入一下代码

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=28947001&auto=1&height=66"></iframe>
@前端进阶之旅: 代码已经复制到剪贴板

# NexT使用自定义的CSS样式


添加样式支持

首先,在样式文件的source文件夹下找到css文件夹,打开main.styl文件,在最后添加:@import "_my/mycss";

新建自定义样式 找到样式文件夹css 新建_my文件夹,在其中新建mycss.styl文件,之后就可以按照style的格式自定义样式了。

例子 例如:我想在文章中添加个自定义样式的按钮,怎么做呢???

打开新建的mycss.styl文件,在其中添加样式:

.myButton {
    background-color:#0f94bd;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:fe
  • 添加音乐播放器
  • NexT使用自定义的CSS样式

← ubuntu下无法安装Hexo简单做法Hexo持续集成自动部署到github →