前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版

Hexo主题功能优化

首页2016-07-07 02:08:41Hexo
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:17px;
    padding:11px 27px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}
@前端进阶之旅: 代码已经复制到剪贴板

引用:在想要引用的时候添加

<a href="#" class="myButton">MyButton</a>

fe
  • 添加音乐播放器
  • NexT使用自定义的CSS样式

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