iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

APlayer放到网页底部

Browse Source
i18n
xaoxuu 4 years ago
parent b043d4f475
commit 3f49e4a722
10 changed files with 144 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      _config.yml
  2. 2
      layout/_meta/music.ejs
  3. 4
      layout/_partial/footer.ejs
  4. 2
      layout/_partial/head.ejs
  5. 34
      layout/_partial/header.ejs
  6. 2
      layout/_partial/meta.ejs
  7. 2
      layout/_partial/scripts.ejs
  8. 43
      layout/_third-party/aplayer.ejs
  9. 4
      layout/_widget/music.ejs
  10. 22
      source/less/_side.less

145
_config.yml
Unescape View File

@ -4,7 +4,7 @@ info:
docs: https://xaoxuu.com/wiki/material-x/
cdn: # 要使用CDN，请在根目录的config文件中写上 use_cdn: true
css:
style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2.20/css/style.css
# style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2.20/css/style.css
js:
app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2/js/app.js
search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2/js/search.js
@ -27,7 +27,6 @@ blur:
scrollreveal: true # 页面滚动显示动画
nodewaves: true # 按钮点击效果
busuanzi: true # 访问量统计
aplayer: true # 启用音乐播放器
# fastclick: true
commentTyping: true # 文本框打字机特效
# wordcount: true # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
@ -51,7 +50,7 @@ backstretch:
cover:
scheme: search # 后期将会提供多种封面布局方案
height: half # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
title: Demo
title: Live Demo
# logo: assets/logo.png # logo和title只显示一个，若同时设置，则只显示logo
# search_placeholder: '搜索'
# 主页封面菜单
@ -72,52 +71,64 @@ cover:
rel: nofollow
# 桌面端导航栏菜单
menu_desktop:
- name: 示例
icon: fas fa-grin
url: /
target: _self
- name: 分类
icon: fas fa-folder-open
url: blog/categories/
rel: nofollow
target: _self
- name: 标签
icon: fas fa-hashtag
url: blog/tags/
rel: nofollow
target: _self
- name: 归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
target: _self
# 导航栏
navbar:
# 左侧logo区
logo:
# 显示图片，使用图片时将不会显示icon和title
img: # https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.7/apple-touch-icon.png
# 显示图标
icon: fas fa-home
# 显示标题
title: XAOXUU
# logo后面的导航菜单
menu:
# 在桌面端显示的导航菜单
on_desktop:
- name: 近期
icon: fas fa-hourglass-half
url: /
target: _self
- name: 分类
icon: fas fa-folder-open
url: blog/categories/
rel: nofollow
target: _self
- name: 标签
icon: fas fa-hashtag
url: blog/tags/
rel: nofollow
target: _self
- name: 归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
target: _self
# 手机端导航菜单（从右上角的按钮点击展开）
on_mobile:
- name: 近期文章
icon: fas fa-clock
url: /
- name: 文章归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 开源项目
icon: fas fa-code-branch
url: projects/
- name: 我的友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: https://xaoxuu.com/wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
rel: nofollow
# 手机端导航菜单（从右上角的按钮点击展开）
menu_mobile:
- name: 近期文章
icon: fas fa-clock
url: /
- name: 文章归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 开源项目
icon: fas fa-code-branch
url: projects/
- name: 我的友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: https://xaoxuu.com/wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
rel: nofollow
# 布局
@ -249,25 +260,6 @@ widget:
icon: fas fa-bookmark
title: 相关文章
# ---------------------------------------
# 音乐小部件配置
- id: music
class: music
icon: fas fa-compact-disc
title: "最近在听"
theme: '#1BCDFC' # 主题色
autoplay: true # 自动播放
server: netease # netease（网易云音乐）tencent（QQ音乐） xiami（虾米） kugou（酷狗）
order: list # list (列表) 'random'（随机）
loop: all # 'all', 'one', 'none'
type: playlist # song （单曲） album （专辑） playlist （歌单） search （搜索）artist
mid: 3175833810 # 歌曲/专辑/歌单 ID/搜索关键词
volume: 0.7 # 音量, 0~1
more: # 右上角的按钮
icon: far fa-heart
url: https://music.163.com/#/user/home?id=63035382
rel: external nofollow noopener noreferrer
target: _blank
# ---------------------------------------
# 版权说明小部件（仅用于文章中）
- id: copyright
class: copyright
@ -372,6 +364,25 @@ social:
- icon: fas fa-headphones-alt
url: https://music.163.com/#/user/home?id=63035382
# APlayer配置 https://github.com/metowolf/MetingJS
aplayer:
# 是否启用，注释此项则不加载服务
enable: true
# 显示在哪里（导航栏、网页页脚）
display: footer # header, footer
# 必选参数
server: netease # netease, tencent, kugou, xiami, baidu
type: playlist # song, playlist, album, search, artist
id: 3175833810 # song id / playlist id / album id / search keyword
# 可选参数
fixed: false # enable fixed mode
theme: '#1BCDFC' # main color
autoplay: false # audio autoplay
order: list # player play order, values: 'list', 'random'
loop: all # player loop play, values: 'all', 'one', 'none'
volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
list_max_height: 340px # list max height
list_folded: true
############################### 需要复制到根目录配置文件中 ###############################
# 请复制到根目录配置文件！

2
layout/_meta/music.ejs
Unescape View File

@ -1,3 +1,3 @@
<% if(post.music && post.music.enable != false){ %>
<%- partial('../_third-party/aplayer', {post: post}) %>
<%- partial('../_third-party/aplayer', {post: post, where: 'meta'}) %>
<% } %>

4
layout/_partial/footer.ejs
Unescape View File

@ -13,6 +13,10 @@
</div>
<%}%>
<br>
<div class="aplayer-container">
<%- partial('../_third-party/aplayer', {post: null, where: 'footer'}) %>
</div>
<br>
<div><%- markdown(__('footer.license')) %></div>
<div>
<%- __('footer.use') %>

2
layout/_partial/head.ejs
Unescape View File

@ -59,7 +59,7 @@
<link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.favicon) %>">
<% } %>
<% if (theme.aplayer == true) { %>
<% if (theme.aplayer.enable) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<% } %>

34
layout/_partial/header.ejs
Unescape View File

@ -6,16 +6,21 @@
<div class='wrapper'>
<div class="nav-main container container--flex">
<a class="logo flat-box" target="_self" href='<%- url_for("/") %>' >
<% if (config.logo) { %>
<img class='logo' src='<%- url_for(config.logo) %>'/>
<% if (theme.navbar.logo.img) { %>
<img class='logo' src='<%- theme.navbar.logo.img %>'/>
<% } else { %>
<%- config.title %>
<% if (theme.navbar.logo.icon) { %>
<i class='<%- theme.navbar.logo.icon %>'></i>
<% } %>
<% if (theme.navbar.logo.title) { %>
<%- theme.navbar.logo.title %>
<% } %>
<% } %>
</a>
<div class='menu navgation'>
<ul class='h-list'>
<% if (theme.menu_desktop) { %>
<% (theme.menu_desktop || []).forEach(function(value){ %>
<% if (theme.navbar.menu.on_desktop) { %>
<% (theme.navbar.menu.on_desktop || []).forEach(function(value){ %>
<li>
<a class="nav flat-box" href="<%= url_for(value.url) %>"
<% if (value.rel) { %>
@ -33,14 +38,13 @@
</ul>
</div>
<% if (theme.search.enable === true) { %>
<div class="m_search">
<form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" />
<i class="icon fas fa-search fa-fw"></i>
</form>
</div>
<% } %>
<div class="m_search">
<form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" />
<i class="icon fas fa-search fa-fw"></i>
</form>
</div>
<ul class='switcher h-list'>
<% if (theme.search.enable === true) { %>
<li class='s-search'><a class="fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
@ -64,8 +68,8 @@
<header>
<nav class="menu navgation">
<ul>
<% if (theme.menu_mobile) { %>
<% (theme.menu_mobile || []).forEach(function(value){ %>
<% if (theme.navbar.menu.on_mobile) { %>
<% (theme.navbar.menu.on_mobile || []).forEach(function(value){ %>
<li>
<a class="nav flat-box" href="<%= url_for(value.url) %>"
<% if (value.rel) { %>

2
layout/_partial/meta.ejs
Unescape View File

@ -34,7 +34,7 @@ if (post.meta && (post.meta.footer !== undefined && post.meta.footer !== null))
<% if (position == 'header') { %>
<section class='meta'>
<% if (post.music && post.music.enable != false) { %>
<%- partial('../_third-party/aplayer', {post: post}) %>
<%- partial('../_third-party/aplayer', {post: post, where: 'meta'}) %>
<% } %>
<% if(post.thumbnail && post.thumbnail.length){ %>
<a title='<%- post.title %>' href='<%- url_for(post.link || post.path) %>'><img class='thumbnail' src='<%- post.thumbnail %>'></a>

2
layout/_partial/scripts.ejs
Unescape View File

@ -21,7 +21,7 @@
</script>
<% } %>
<script async src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
<% if (theme.aplayer == true) { %>
<% if (theme.aplayer.enable) { %>
<script async src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/meting@2.0/dist/Meting.min.js"></script>
<% } %>

43
layout/_third-party/aplayer.ejs vendored
Unescape View File

@ -1,34 +1,31 @@
<%
let music;
if (music == undefined) {
theme.widget.forEach(function(widget){
if (widget.class == 'music'){
music = widget;
}
})
}
let aplayer = theme.aplayer;
%>
<% if (theme.aplayer == true) { %>
<% if (theme.aplayer.enable == true) { %>
<% if (post && post.music) { %>
<meting-js
mini='true'
autoplay='<%- (post.music && post.music.autoplay) || music.autoplay %>'
volume='<%- music.volume %>'
loop='<%- music.loop %>'
server='<%- (post.music && post.music.server) || music.server %>'
type='<%- post.music && post.music.type || music.type %>'
id='<%- post.music && post.music.id || music.mid %>'>
autoplay='<%- post.music.autoplay || aplayer.autoplay %>'
volume='<%- post.music.volume || aplayer.volume %>'
loop='<%- post.music.loop || aplayer.loop %>'
order='<%- post.music.order || aplayer.order %>'
server='<%- post.music.server || aplayer.server %>'
type='<%- post.music.type || aplayer.type %>'
id='<%- post.music.id || aplayer.id %>'>
</meting-js>
<% } else { %>
<meting-js
theme='<%- music.theme %>'
autoplay='<%- music.autoplay %>'
volume='<%- music.volume %>'
loop='<%- music.loop %>'
order='<%- music.order %>'
server='<%- music.server %>'
type='<%- music.type %>'
id='<%- music.mid %>'>
theme='<%- aplayer.theme %>'
autoplay='<%- aplayer.autoplay %>'
volume='<%- aplayer.volume %>'
loop='<%- aplayer.loop %>'
order='<%- aplayer.order %>'
fixed='<%- aplayer.fixed %>'
list-max-height='<%- aplayer.list_max_height %>'
server='<%- aplayer.server %>'
type='<%- aplayer.type %>'
id='<%- aplayer.id %>'
list-folded='<%- aplayer.list_folded %>'>
</meting-js>
<% } %>
<% } %>

4
layout/_widget/music.ejs
Unescape View File

@ -1,8 +1,8 @@
<% if (theme.aplayer == true) { %>
<% if (theme.aplayer.enable == true) { %>
<section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
<%- partial('header', {item: item}) %>
<div class='content <%= theme.style %>'>
<%- partial('../_third-party/aplayer', {post: null}) %>
<%- partial('../_third-party/aplayer', {post: null, where: 'widget'}) %>
</div>
</section>
<% } %>

22
source/less/_side.less
Unescape View File

@ -349,11 +349,6 @@
&.pure{
padding-top: @gap/4; // 适合白色导航栏背景
}
.aplayer{
border-radius: 4px;
color: #666;
font-family: @fontfamily_base;
}
}
}
@ -393,3 +388,20 @@
}
}
.aplayer-container{
display: flex;
justify-content: center;
}
.aplayer{
max-width: 500px;
border-radius: 4px;
color: @color_text_main;
font-family: @fontfamily_base;
.aplayer-list{
text-align: left;
}
@media(max-width: @on_phone){
border-radius: @border_radius;
}
}

Write Preview
Loading…
Cancel
Save