feat(widget): show floating toc on mobile devices
This commit is contained in:
parent
bcf1ca69ce
commit
b138ed3a88
|
@ -7,6 +7,15 @@
|
||||||
* <%- column_count() %>
|
* <%- column_count() %>
|
||||||
*/
|
*/
|
||||||
module.exports = function (hexo) {
|
module.exports = function (hexo) {
|
||||||
|
hexo.extend.helper.register('has_widget', function (type) {
|
||||||
|
const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
|
||||||
|
if (!hasWidgets) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const widgets = hexo.extend.helper.get('get_config').bind(this)('widgets');
|
||||||
|
return widgets.some(widget => widget.hasOwnProperty('type') && widget.type === type);
|
||||||
|
});
|
||||||
|
|
||||||
hexo.extend.helper.register('get_widgets', function (position) {
|
hexo.extend.helper.register('get_widgets', function (position) {
|
||||||
const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
|
const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
|
||||||
if (!hasWidgets) {
|
if (!hasWidgets) {
|
||||||
|
|
|
@ -32,6 +32,11 @@
|
||||||
</a>
|
</a>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
<% if (get_config('toc') === true && has_widget('toc') && (page.layout === 'page' || page.layout === 'post')) { %>
|
||||||
|
<a class="navbar-item is-hidden-tablet catalogue" title="<%= _p('widget.catalogue', Infinity) %>" href="javascript:;">
|
||||||
|
<i class="fas fa-list-ul"></i>
|
||||||
|
</a>
|
||||||
|
<% } %>
|
||||||
<% if (has_config('search.type')) { %>
|
<% if (has_config('search.type')) { %>
|
||||||
<a class="navbar-item search" title="<%= __('search.search') %>" href="javascript:;">
|
<a class="navbar-item search" title="<%= __('search.search') %>" href="javascript:;">
|
||||||
<i class="fas fa-search"></i>
|
<i class="fas fa-search"></i>
|
||||||
|
|
|
@ -24,7 +24,7 @@ function buildToc(toc) {
|
||||||
result += '</li>';
|
result += '</li>';
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
%>
|
%>
|
||||||
<div class="card widget" id="toc">
|
<div class="card widget" id="toc">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
|
family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
|
||||||
family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
|
family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
|
||||||
|
gap = 64px
|
||||||
|
screen-tablet = 769px
|
||||||
|
screen-desktop = 1088px
|
||||||
|
screen-widescreen = 1280px
|
||||||
|
screen-fullhd = 1472px
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Override CSS Framework
|
* Override CSS Framework
|
||||||
|
@ -13,20 +18,20 @@ body
|
||||||
body, button, input, select, textarea
|
body, button, input, select, textarea
|
||||||
font-family: family-sans
|
font-family: family-sans
|
||||||
|
|
||||||
@media screen and (min-width: 1280px)
|
@media screen and (min-width: screen-widescreen)
|
||||||
.is-1-column .container
|
.is-1-column .container
|
||||||
.is-2-column .container
|
.is-2-column .container
|
||||||
max-width: 960px
|
max-width: screen-desktop - 2 * gap
|
||||||
width: 960px
|
width: screen-desktop - 2 * gap
|
||||||
@media screen and (min-width: 1472px)
|
@media screen and (min-width: screen-fullhd)
|
||||||
.is-2-column .container
|
.is-2-column .container
|
||||||
max-width: 1152px
|
max-width: screen-widescreen - 2 * gap
|
||||||
width: 1152px
|
width: screen-widescreen - 2 * gap
|
||||||
.is-1-column .container
|
.is-1-column .container
|
||||||
max-width: 960px
|
max-width: screen-desktop - 2 * gap
|
||||||
width: 960px
|
width: screen-desktop - 2 * gap
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
@media screen and (max-width: screen-tablet - 1)
|
||||||
.section
|
.section
|
||||||
padding: 1.5rem 1rem
|
padding: 1.5rem 1rem
|
||||||
|
|
||||||
|
@ -85,7 +90,7 @@ img.thumbnail
|
||||||
&.is-active
|
&.is-active
|
||||||
color: hsl(217, 71%, 53%)
|
color: hsl(217, 71%, 53%)
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
@media screen and (max-width: 1087px)
|
@media screen and (max-width: screen-desktop - 1)
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
justify-content: center
|
justify-content: center
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
|
@ -170,6 +175,32 @@ img.thumbnail
|
||||||
margin-left: 0.75rem
|
margin-left: 0.75rem
|
||||||
margin-right: 0
|
margin-right: 0
|
||||||
|
|
||||||
|
@media screen and (max-width: screen-tablet - 1)
|
||||||
|
#toc
|
||||||
|
display: none
|
||||||
|
position: fixed
|
||||||
|
margin: 1rem
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
z-index: 100
|
||||||
|
max-height: calc(100vh - 2rem)
|
||||||
|
overflow-y: auto
|
||||||
|
#toc-mask
|
||||||
|
display: none
|
||||||
|
position: fixed
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
z-index: 99
|
||||||
|
background: rgba(0, 0, 0, 0.7)
|
||||||
|
#toc,
|
||||||
|
#toc-mask
|
||||||
|
&.is-active
|
||||||
|
display: block
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Custom modifiers
|
* Custom modifiers
|
||||||
* --------------------------------- */
|
* --------------------------------- */
|
||||||
|
@ -233,7 +264,7 @@ img.thumbnail
|
||||||
.has-link-black-ter
|
.has-link-black-ter
|
||||||
color: hsl(0, 0%, 14%) !important
|
color: hsl(0, 0%, 14%) !important
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
@media screen and (max-width: screen-tablet - 1)
|
||||||
.has-text-centered-mobile
|
.has-text-centered-mobile
|
||||||
text-align: center !important
|
text-align: center !important
|
||||||
.is-flex-center-mobile
|
.is-flex-center-mobile
|
||||||
|
|
|
@ -25,4 +25,21 @@
|
||||||
}
|
}
|
||||||
adjustNavbar();
|
adjustNavbar();
|
||||||
$(window).resize(adjustNavbar);
|
$(window).resize(adjustNavbar);
|
||||||
|
|
||||||
|
var $toc = $('#toc');
|
||||||
|
if ($toc.length > 0) {
|
||||||
|
var $mask = $('<div>');
|
||||||
|
$mask.attr('id', 'toc-mask');
|
||||||
|
|
||||||
|
$('body').append($mask);
|
||||||
|
|
||||||
|
function toggleToc() {
|
||||||
|
$toc.toggleClass('is-active');
|
||||||
|
$mask.toggleClass('is-active');
|
||||||
|
}
|
||||||
|
|
||||||
|
$toc.on('click', toggleToc);
|
||||||
|
$mask.on('click', toggleToc);
|
||||||
|
$('.navbar-main .catalogue').on('click', toggleToc);
|
||||||
|
}
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
Loading…
Reference in New Issue