Skip to content

Y
yanglr2010

大白技术控 / yanglr2010

通知 1
Star 1
Fork 0
Y
yanglr2010

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 82e7d421 编写于 作者: EvanOne(文一)'s avatar EvanOne(文一)
浏览文件
操作

refactor: Change responsive style & some function

上级 2f38dda9
隐藏空白更改
内联 并排
Showing with 632 addition and 654 deletion
layout/_layout.pug
浏览文件 @ 82e7d421
...@@ -36,15 +36,15 @@ html(lang=config.language) ...@@ -36,15 +36,15 @@ html(lang=config.language)
include ./_scripts/vendors.pug include ./_scripts/vendors.pug
include ./_third-party/search/index.pug include ./_third-party/search/index.pug
//- if theme.pjax && theme.pjax.enable if theme.pjax && theme.pjax.enable
//- include ../_third-party/pjax.pug include ./_third-party/pjax.pug
//- div#pjax-reload div#pjax-reload
//- include ../_third-party/math/index.pug include ./_third-party/math/index.pug
//- include ../_third-party/quicklink.pug include ./_third-party/quicklink.pug
//- else else
//- include ../_third-party/math/index.pug include ./_third-party/math/index.pug
//- include ../_third-party/quicklink.pug include ./_third-party/quicklink.pug
include ./_third-party/comments/index.pug include ./_third-party/comments/index.pug
include ./_third-party/advertising/index.pug include ./_third-party/advertising/index.pug
......
layout/_partials/head/head.pug
浏览文件 @ 82e7d421
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
var keywords = config.author + ', ' + config.title var keywords = config.author + ', ' + config.title
var title_suffix = ' | ' + title var title_suffix = ' | ' + title
if (is_home()) title = title + (theme.index_subtitle ? subtitle : '') if (is_home()) title = title + (theme.index_subtitle ? ' | ' + subtitle : '')
else if (is_archive()) title = __('title.archive') + title_suffix else if (is_archive()) title = __('title.archive') + title_suffix
else if (is_category()) title = __('title.category') + ': ' + page.category + title_suffix else if (is_category()) title = __('title.category') + ': ' + page.category + title_suffix
else if (is_tag()) title = __('title.tag') + ': ' + page.tag + title_suffix else if (is_tag()) title = __('title.tag') + ': ' + page.tag + title_suffix
......
layout/_scripts/stun.pug
浏览文件 @ 82e7d421
...@@ -5,6 +5,3 @@ script(src=`${url_for(theme.js)}/header.js?v=${stun_env("version")}`) ...@@ -5,6 +5,3 @@ script(src=`${url_for(theme.js)}/header.js?v=${stun_env("version")}`)
if theme.sidebar && theme.sidebar.enable if theme.sidebar && theme.sidebar.enable
script(src=`${url_for(theme.js)}/sidebar.js?v=${stun_env("version")}`) script(src=`${url_for(theme.js)}/sidebar.js?v=${stun_env("version")}`)
if theme.algolia_search.enable
script(src=`${ url_for(theme.js)}/algolia-search.js?v=${stun_env("version")}`)
layout/_third-party/comments/disqus.pug
浏览文件 @ 82e7d421
...@@ -31,5 +31,5 @@ script(data-pjax). ...@@ -31,5 +31,5 @@ script(data-pjax).
if (!{ theme.pjax.enable }) { if (!{ theme.pjax.enable }) {
loadDisqus(); loadDisqus();
} else { } else {
window.addEventListener('load', loadDisqus, false); window.addEventListener('DOMContentLoaded', loadDisqus, false);
} }
layout/_third-party/comments/gitalk.pug
浏览文件 @ 82e7d421
...@@ -33,5 +33,5 @@ script(data-pjax). ...@@ -33,5 +33,5 @@ script(data-pjax).
if (!{ theme.pjax.enable }) { if (!{ theme.pjax.enable }) {
loadGitalk(); loadGitalk();
} else { } else {
window.addEventListener('load', loadGitalk, false); window.addEventListener('DOMContentLoaded', loadGitalk, false);
} }
layout/_third-party/comments/livere.pug
浏览文件 @ 82e7d421
...@@ -13,5 +13,5 @@ script(data-pjax). ...@@ -13,5 +13,5 @@ script(data-pjax).
if (!{ theme.pjax.enable }) { if (!{ theme.pjax.enable }) {
loadLivere(); loadLivere();
} else { } else {
window.addEventListener('load', loadLivere, false); window.addEventListener('DOMContentLoaded', loadLivere, false);
} }
layout/_third-party/comments/valine.pug
浏览文件 @ 82e7d421
...@@ -36,5 +36,5 @@ script(data-pjax). ...@@ -36,5 +36,5 @@ script(data-pjax).
if (!{ theme.pjax.enable }) { if (!{ theme.pjax.enable }) {
loadValine(); loadValine();
} else { } else {
window.addEventListener('load', loadValine, false); window.addEventListener('DOMContentLoaded', loadValine, false);
} }
layout/_third-party/pjax.pug
浏览文件 @ 82e7d421
...@@ -39,7 +39,7 @@ if theme.pjax && theme.pjax.enable ...@@ -39,7 +39,7 @@ if theme.pjax && theme.pjax.enable
script(src=pjax_js) script(src=pjax_js)
script. script.
window.addEventListener('load', function () { window.addEventListener('DOMContentLoaded', function () {
var pjax = new Pjax(!{ pjaxArgs }); var pjax = new Pjax(!{ pjaxArgs });
// 加载进度条的计时器 // 加载进度条的计时器
var loadingTimer = null; var loadingTimer = null;
......
layout/_third-party/quicklink.pug
浏览文件 @ 82e7d421
...@@ -22,7 +22,7 @@ if theme.quicklink.enable ...@@ -22,7 +22,7 @@ if theme.quicklink.enable
} }
if (!{ theme.quicklink.delay }) { if (!{ theme.quicklink.delay }) {
window.addEventListener('load', initQuicklink, false); window.addEventListener('DOMContentLoaded', initQuicklink, false);
} else { } else {
initQuicklink(); initQuicklink();
} }
layout/_third-party/search/algolia.pug
浏览文件 @ 82e7d421
...@@ -3,3 +3,155 @@ ...@@ -3,3 +3,155 @@
if (theme.cdn.instantsearch_js) instantsearch_js = theme.cdn.instantsearch_js if (theme.cdn.instantsearch_js) instantsearch_js = theme.cdn.instantsearch_js
script(src=instantsearch_js defer) script(src=instantsearch_js defer)
script.
window.addEventListener('DOMContentLoaded', function () {
$('.header-nav-search').on('click', function (e) {
e.stopPropagation();
$('body').css('overflow', 'hidden');
$('.search-popup')
.velocity('stop')
.velocity('transition.expandIn', {
duration: 300,
complete: function () {
$('.search-popup input').focus();
}
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeIn', {
duration: 300
});
});
$('.search-mask, .search-close').on('click', function () {
closeSearch();
});
$(document).on('keydown', function (e) {
// Escape <=> 27
if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
closeSearch();
}
});
var algolia = CONFIG.algolia;
if (!(algolia.appId && algolia.apiKey && algolia.indexName)) {
return console.error('Algolia setting is invalid.');
}
var search = instantsearch({
appId: algolia.appId,
apiKey: algolia.apiKey,
indexName: algolia.indexName,
searchParameters: {
hitsPerPage: algolia.hits.per_page || 10
},
searchFunction: function (helper) {
var searchInput = $('.search-input').find('input');
if (searchInput.val()) {
helper.search();
}
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '.search-input',
reset: false,
magnifier: false,
placeholder: algolia.languages.input_placeholder
})
);
// The hits of search results.
search.addWidget(
instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
item: function (data) {
var link = data.permalink ? data.permalink : CONFIG.root + data.path;
return (
'<a href="' + link + '" class="algolia-hit-item-link">' +
data._highlightResult.title.value +
'</a>'
);
},
empty: function (data) {
return (
'<div id="algolia-hits-empty">' +
algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
'</div>'
);
}
},
cssClasses: {
item: 'algolia-hit-item'
}
})
);
// The stats of search results.
if ($('#algolia-stats')[0]) {
search.addWidget(
instantsearch.widgets.stats({
container: '#algolia-stats',
templates: {
body: function (data) {
var stats = algolia.languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS);
return (
stats +
'<span class="algolia-logo pull-right">' +
'<img src="' + CONFIG.root +
'images/algolia.svg" alt="Algolia" />' +
'</span>'
);
}
}
})
);
}
// The pagination of the results.
search.addWidget(
instantsearch.widgets.pagination({
container: '#algolia-pagination',
scrollTo: false,
showFirstLast: false,
labels: {
first: '<i class="fa fa-angle-double-left"></i>',
last: '<i class="fa fa-angle-double-right"></i>',
previous: '<i class="fa fa-angle-left"></i>',
next: '<i class="fa fa-angle-right"></i>'
},
cssClasses: {
root: 'pagination',
item: 'pagination-item',
link: 'page-number',
active: 'current',
disabled: 'disabled-item'
}
})
);
search.start();
function closeSearch () {
$('body').css('overflow', 'auto');
$('.search-popup')
.velocity('stop')
.velocity('transition.expandOut', {
duration: 300
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeOut', {
duration: 300
});
}
});
layout/_third-party/search/localsearch.pug
浏览文件 @ 82e7d421
if theme.local_search.enable script.
script. window.addEventListener('DOMContentLoaded', function () {
window.addEventListener('load', function () { $('.header-nav-search').on('click', function (e) {
$('.header-nav-search').on('click', function (e) { e.stopPropagation();
e.stopPropagation();
$('body').css('overflow', 'hidden'); $('body').css('overflow', 'hidden');
$('.search-popup') $('.search-popup')
.velocity('stop') .addClass('show')
.velocity('transition.expandIn', { .velocity('stop')
duration: 300, .velocity('transition.expandIn', {
complete: function () { duration: 300,
$('.search-popup input').focus(); complete: function () {
} $('.search-popup input').focus();
}); }
$('.search-mask') });
.velocity('stop') $('.search-mask')
.velocity('transition.fadeIn', { .velocity('stop')
duration: 300 .velocity('transition.fadeIn', {
}); duration: 300
});
initSearch();
}); initSearch();
});
$('.search-mask, .search-close').on('click', function () {
closeSearch();
});
$(document).on('keydown', function (e) { $('.search-mask, .search-close').on('click', function () {
// Escape <=> 27 closeSearch();
if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) { });
closeSearch();
}
});
var isXML = true; $(document).on('keydown', function (e) {
var search_path = '!{ config.search.path }'; // Escape <=> 27
if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
if (!search_path) { closeSearch();
search_path = 'search.xml';
} else if (/json$/i.test(search_path)) {
isXML = false;
} }
});
var path = '!{ config.root }' + search_path;
function initSearch() { var isXML = true;
$.ajax({ var search_path = '!{ config.search.path }';
url: path,
dataType: isXML ? 'xml' : 'json', if (!search_path) {
async: true, search_path = 'search.xml';
success: function (res) { } else if (/json$/i.test(search_path)) {
var datas = isXML ? $('entry', res).map(function () { isXML = false;
// 将 XML 转为 JSON }
return {
title: $('title', this).text(), var path = '!{ config.root }' + search_path;
content: $('content', this).text(),
url: $('url', this).text()
};
}).get() : res;
var $input = $('.search-input input'); function initSearch() {
var $result = $('.search-results'); $.ajax({
url: path,
dataType: isXML ? 'xml' : 'json',
async: true,
success: function (res) {
var datas = isXML ? $('entry', res).map(function () {
// 将 XML 转为 JSON
return {
title: $('title', this).text(),
content: $('content', this).text(),
url: $('url', this).text()
};
}).get() : res;
// 搜索对象（标题、内容）的权重，影响显示顺序 var $input = $('.search-input input');
var WEIGHT = { title: 100, content: 1 }; var $result = $('.search-results');
var searchPost = function () { // 搜索对象（标题、内容）的权重，影响显示顺序
var searchText = $input.val().toLowerCase().trim(); var WEIGHT = { title: 100, content: 1 };
// 根据空白字符分隔关键字
var keywords = searchText.split(/[\s]+/);
// 搜索结果
var matchPosts = [];
// 有多个关键字时，将原文字整个保存下来 var searchPost = function () {
if (keywords.length > 1) { var searchText = $input.val().toLowerCase().trim();
keywords.push(searchText); // 根据空白字符分隔关键字
} var keywords = searchText.split(/[\s]+/);
// 搜索结果
// 防止未输入字符时搜索 var matchPosts = [];
if (searchText.length > 0) {
datas.forEach(function (data) {
var isMatch = false;
// 没有标题的文章使用预设的 i18n 变量代替
var title = (data.title && data.title.trim()) || '!{_p("post.untitled")}';
var titleLower = title && title.toLowerCase();
// 删除 HTML 标签 和 所有空白字符
var content = data.content && data.content.replace(/<[^>]+>|\s+/, '');
var contentLower = content && content.toLowerCase();
// 删除重复的 /
var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/, '/');
// 标题中匹配到的关键词
var titleHitSlice = [];
// 内容中匹配到的关键词
var contentHitSlice = [];
keywords.forEach(function (keyword) { // 有多个关键字时，将原文字整个保存下来
/** if (keywords.length > 1) {
* 获取匹配的关键词的索引 keywords.push(searchText);
* @param {String} keyword 要匹配的关键字 }
* @param {String} text 原文字
* @param {Boolean} caseSensitive 是否区分大小写 // 防止未输入字符时搜索
* @param {Number} weight 匹配对象的权重。权重大的优先显示 if (searchText.length > 0) {
* @return {Array} datas.forEach(function (data) {
*/ var isMatch = false;
function getIndexByword (word, text, caseSensitive, weight) {
if (!word || !text) return []; // 没有标题的文章使用预设的 i18n 变量代替
var title = (data.title && data.title.trim()) || '!{_p("post.untitled")}';
var startIndex = 0; // 每次匹配的开始索引 var titleLower = title && title.toLowerCase();
var index = -1; // 匹配到的索引值 // 删除 HTML 标签 和 所有空白字符
var result = []; // 匹配结果 var content = data.content && data.content.replace(/<[^>]+>|\s+/, '');
var contentLower = content && content.toLowerCase();
// 删除重复的 /
var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/, '/');
// 标题中匹配到的关键词
var titleHitSlice = [];
// 内容中匹配到的关键词
var contentHitSlice = [];
if (!caseSensitive) { keywords.forEach(function (keyword) {
word = word.toLowerCase(); /**
text = text.toLowerCase(); * 获取匹配的关键词的索引
} * @param {String} keyword 要匹配的关键字
* @param {String} text 原文字
* @param {Boolean} caseSensitive 是否区分大小写
* @param {Number} weight 匹配对象的权重。权重大的优先显示
* @return {Array}
*/
function getIndexByword (word, text, caseSensitive, weight) {
if (!word || !text) return [];
var startIndex = 0; // 每次匹配的开始索引
var index = -1; // 匹配到的索引值
var result = []; // 匹配结果
while((index = text.indexOf(word, startIndex)) !== -1) { if (!caseSensitive) {
var hasMatch = false; word = word.toLowerCase();
text = text.toLowerCase();
}
// 索引位置相同的关键词，保留长度较长的 while((index = text.indexOf(word, startIndex)) !== -1) {
titleHitSlice.forEach(function (hit) { var hasMatch = false;
if (hit.index === index && hit.word.length < word.length) {
hit.word = word;
hasMatch = true;
}
});
startIndex = index + word.length;
!hasMatch && result.push({ index: index, word: word, weight: weight });
}
return result; // 索引位置相同的关键词，保留长度较长的
titleHitSlice.forEach(function (hit) {
if (hit.index === index && hit.word.length < word.length) {
hit.word = word;
hasMatch = true;
}
});
startIndex = index + word.length;
!hasMatch && result.push({ index: index, word: word, weight: weight });
} }
titleHitSlice = titleHitSlice.concat(
getIndexByword(keyword, titleLower, false, WEIGHT.title));
contentHitSlice = contentHitSlice.concat(
getIndexByword(keyword, contentLower, false, WEIGHT.content));
});
var hitTitle = titleHitSlice.length;
var hitContent = contentHitSlice.length;
if (hitTitle > 0 || hitContent > 0) { return result;
isMatch = true;
} }
titleHitSlice = titleHitSlice.concat(
getIndexByword(keyword, titleLower, false, WEIGHT.title));
contentHitSlice = contentHitSlice.concat(
getIndexByword(keyword, contentLower, false, WEIGHT.content));
});
var hitTitle = titleHitSlice.length;
var hitContent = contentHitSlice.length;
if (isMatch) { if (hitTitle > 0 || hitContent > 0) {
;[titleHitSlice, contentHitSlice].forEach(function (hit) { isMatch = true;
// 按照匹配文字的索引的递增顺序排序 }
hit.sort(function (left, right) {
return left.index - right.index; if (isMatch) {
}); ;[titleHitSlice, contentHitSlice].forEach(function (hit) {
// 按照匹配文字的索引的递增顺序排序
hit.sort(function (left, right) {
return left.index - right.index;
}); });
});
/**
* 给文本中匹配到的关键词添加标记，从而进行高亮显示 /**
* @param {String} text 原文本 * 给文本中匹配到的关键词添加标记，从而进行高亮显示
* @param {Array} hitSlice 匹配项的索引信息 * @param {String} text 原文本
* @param {Number} start 开始索引 * @param {Array} hitSlice 匹配项的索引信息
* @param {Number} end 结束索引 * @param {Number} start 开始索引
* @return {String} * @param {Number} end 结束索引
*/ * @return {String}
function highlightKeyword (text, hitSlice, start, end) { */
if (!text || !hitSlice || !hitSlice.length) return; function highlightKeyword (text, hitSlice, start, end) {
if (!text || !hitSlice || !hitSlice.length) return;
var result = ''; var result = '';
var startIndex = start; var startIndex = start;
var endIndex = end; var endIndex = end;
hitSlice.forEach(function (hit) { hitSlice.forEach(function (hit) {
if (hit.index < startIndex) return; if (hit.index < startIndex) return;
var hitWordEnd = hit.index + hit.word.length; var hitWordEnd = hit.index + hit.word.length;
result += text.slice(startIndex, hit.index); result += text.slice(startIndex, hit.index);
result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>'; result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
startIndex = hitWordEnd; startIndex = hitWordEnd;
}); });
result += text.slice(startIndex, endIndex); result += text.slice(startIndex, endIndex);
return result; return result;
} }
var postData = {}; var postData = {};
// 文章总的搜索权重 // 文章总的搜索权重
var postWeight = titleHitSlice.length * 100 + contentHitSlice.length; var postWeight = titleHitSlice.length * 100 + contentHitSlice.length;
// 标记匹配关键词后的标题 // 标记匹配关键词后的标题
var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title; var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
// 标记匹配关键词后的内容 // 标记匹配关键词后的内容
var postContent; var postContent;
// 截取匹配的第一个字符，前后共 200 个字符来显示 // 截取匹配的第一个字符，前后共 200 个字符来显示
if (contentHitSlice.length > 0) { if (contentHitSlice.length > 0) {
var firstIndex = contentHitSlice[0].index; var firstIndex = contentHitSlice[0].index;
var start = firstIndex > 20 ? firstIndex - 20 : 0; var start = firstIndex > 20 ? firstIndex - 20 : 0;
var end = firstIndex + 180; var end = firstIndex + 180;
postContent = highlightKeyword(content, contentHitSlice, start, end); postContent = highlightKeyword(content, contentHitSlice, start, end);
} else { // 未匹配到内容，直接截取前 200 个字符来显示 } else { // 未匹配到内容，直接截取前 200 个字符来显示
postContent = content.slice(0, 200); postContent = content.slice(0, 200);
}
postData.title = postTitle;
postData.content = postContent;
postData.url = postURL;
postData.weight = postWeight;
matchPosts.push(postData);
} }
});
} postData.title = postTitle;
postData.content = postContent;
var resultInnerHtml = '<ul>'; postData.url = postURL;
postData.weight = postWeight;
// 按权重递增的顺序排序，使权重大的优先显示 matchPosts.push(postData);
matchPosts.sort(function (left, right) { }
return right.weight - left.weight;
});
matchPosts.forEach(function (post) {
resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
resultInnerHtml += post.title;
resultInnerHtml += '</a><div class="search-results-content">';
resultInnerHtml += post.content;
resultInnerHtml += '</div></li>';
}); });
resultInnerHtml += '</ul>'; }
$result.html(resultInnerHtml);
};
$input.on('input', searchPost); var resultInnerHtml = '<ul>';
$input.on('keypress', function (e) {
if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) { // 按权重递增的顺序排序，使权重大的优先显示
searchPost(); matchPosts.sort(function (left, right) {
} return right.weight - left.weight;
}); });
}
}); matchPosts.forEach(function (post) {
} resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
resultInnerHtml += post.title;
resultInnerHtml += '</a><div class="search-results-content">';
resultInnerHtml += post.content;
resultInnerHtml += '</div></li>';
});
resultInnerHtml += '</ul>';
$result.html(resultInnerHtml);
};
function closeSearch () { $input.on('input', searchPost);
$('body').css('overflow', 'auto'); $input.on('keypress', function (e) {
$('.search-popup') if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
.velocity('stop') searchPost();
.velocity('transition.expandOut', { }
duration: 300
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeOut', {
duration: 300
}); });
} }
}, false); });
}
function closeSearch () {
$('body').css('overflow', 'auto');
$('.search-popup')
.removeClass('show')
.velocity('stop')
.velocity('transition.expandOut', {
duration: 300
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeOut', {
duration: 300
});
}
}, false);
scripts/filters/shake-file.js 0 → 100644
浏览文件 @ 82e7d421
/* global hexo */
'use strict';
hexo.extend.filter.register('after_generate', () => {
var theme = hexo.theme.config;
if (!theme.shake_file) return;
if (!theme.sidebar.enable) {
hexo.route.remove('js/sidebar.js');
}
});
source/css/_common/components/header/index.styl
浏览文件 @ 82e7d421
.header {
width: 100%;
}
.header-inner { .header-inner {
width: 100%; width: 100%;
font-size: $font-size-header; font-size: $font-size-header;
...@@ -55,7 +50,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh ...@@ -55,7 +50,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
.header-nav-inner { .header-nav-inner {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: $main-width; width: 'calc(100% - %s)' % ($content-aside-gap * 2);
height: 100%; height: 100%;
i { i {
...@@ -65,12 +60,16 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh ...@@ -65,12 +60,16 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
.header-nav-btn { .header-nav-btn {
display: none; display: none;
padding: 0 .5rem;
line-height: header-nav-height;
color: $header-nav-link-color; color: $header-nav-link-color;
} }
.header-nav-menu { .header-nav-menu {
visibility: hidden;
height: 100%; height: 100%;
line-height: header-nav-height; line-height: header-nav-height;
opacity: 0;
transition-property: opacity; transition-property: opacity;
transition-ease(); transition-ease();
...@@ -119,8 +118,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh ...@@ -119,8 +118,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
word-wrap(); word-wrap();
&__a { &__a {
padding: .4rem; line-height: header-nav-height;
line-height: 1.8em;
} }
} }
} }
...@@ -129,6 +127,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh ...@@ -129,6 +127,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: 0 .5rem;
height: 100%; height: 100%;
line-height: header-nav-height; line-height: header-nav-height;
color: $header-nav-link-color; color: $header-nav-link-color;
......
source/css/_common/components/pages/page.styl
浏览文件 @ 82e7d421
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
} }
&-link { &-link {
font-size: $font-size-main + 2px; font-size: 1em;
color: $category-link-color; color: $category-link-color;
transition-property: color; transition-property: color;
transition-ease(); transition-ease();
......
source/css/_common/components/plugins/friends.styl
浏览文件 @ 82e7d421
...@@ -6,9 +6,8 @@ ...@@ -6,9 +6,8 @@
.friends-item { .friends-item {
display: block; display: block;
float: left; float: left;
margin: 0 5px; padding: .5rem;
padding: .5rem .5rem .5rem 1rem; width: calc(50% - 10px);
width: calc(33.3% - 10px);
height: 100px; height: 100px;
transition: background-color .3s; transition: background-color .3s;
......
source/css/_common/components/search/common.styl
浏览文件 @ 82e7d421
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
background-color: alpha($black-dark, .7); background-color: alpha($black-dark, .7);
} }
search-popup-padding = 1rem;
.search-popup { .search-popup {
display: none; display: none;
position: fixed; position: fixed;
...@@ -17,22 +19,30 @@ ...@@ -17,22 +19,30 @@
z-index: $z-index2; z-index: $z-index2;
margin-left: -350px; margin-left: -350px;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: search-popup-padding;
width: 700px; width: 700px;
max-height: 80%; max-height: 80%;
font-size: $font-size-base + 2px; font-size: $font-size-base + 2px;
color: $font-color; color: $font-color;
background-color: $white-light; background-color: $white-light;
&.show {
will-change: transform;
}
} }
search-input-height = 2rem;
search-input-padding = 1rem;
.search-input { .search-input {
margin: 1.2rem 0 1rem; margin: search-input-padding 0;
input { input {
border: 2px solid alpha($blue-light, .5); border: 2px solid alpha($blue-light, .5);
border-radius: 2rem; border-radius: 2rem;
padding: .2rem .8rem; padding: .2rem .8rem;
line-height: 1.3rem; height: search-input-height;
line-height: search-input-height;
outline: 0; outline: 0;
transition: border-color .3s; transition: border-color .3s;
......
source/css/_common/components/search/index.styl
浏览文件 @ 82e7d421
@import './common.styl'; @import './common.styl' if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable'));
@import './algolia.styl' if (hexo-config('algolia_search.enable')); @import './algolia.styl' if (hexo-config('algolia_search.enable'));
@import './localsearch.styl' if (hexo-config('local_search.enable')); @import './localsearch.styl' if (hexo-config('local_search.enable'));
source/css/_common/components/search/localsearch.styl
浏览文件 @ 82e7d421
...@@ -4,8 +4,10 @@ ...@@ -4,8 +4,10 @@
} }
} }
search-results-height = search-popup-padding * 2 + search-input-padding * 2 + search-input-height;
.search-results { .search-results {
max-height: calc(80vh - 6rem); max-height: 'calc(80vh - %s)' % search-results-height;
b { b {
border-bottom: 1px dashed red; border-bottom: 1px dashed red;
......
source/css/_common/components/sidebar/index.styl
浏览文件 @ 82e7d421
.sidebar { .sidebar {
width: convert(hexo-config('sidebar.width') || '$sidebar-width');
.hide { .hide {
display: none; display: none;
} }
...@@ -6,7 +8,8 @@ ...@@ -6,7 +8,8 @@
&-inner { &-inner {
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: convert(hexo-config('sidebar.width') || '$sidebar-width'); width: 100%;
height: 100%;
font-size: $font-size-sidebar; font-size: $font-size-sidebar;
background-color: $white; background-color: $white;
} }
......
source/css/_common/outline/macro.styl
浏览文件 @ 82e7d421
.container { .container {
display: flex;
overflow: hidden; /* !!! */
position: relative; position: relative;
min-height: 100vh;
flex-direction: column;
}
.header {
flex: 0 0 auto;
}
.footer {
flex: 0 0 auto;
} }
.main { .main {
margin: 2rem auto; margin: $main-sidebar-gap auto;
width: 100%; width: 100%;
flex: 1 0 auto;
} }
.main-inner { .main-inner {
margin: 0 auto; margin: 0 auto;
width: $main-width; width: 'calc(100% - %s)' % ($content-aside-gap * 2);
font-size: $font-size-main; font-size: $font-size-main;
} }
...@@ -25,6 +38,8 @@ ...@@ -25,6 +38,8 @@
} }
.content { .content {
width: 'calc(100% - %s)' % ($sidebar-width + $main-sidebar-gap);
if (hexo-config('sidebar.position') == 'left') { if (hexo-config('sidebar.position') == 'left') {
float: right; float: right;
} else if (hexo-config('sidebar.position') == 'right') { } else if (hexo-config('sidebar.position') == 'right') {
...@@ -32,7 +47,7 @@ ...@@ -32,7 +47,7 @@
} }
&-inner { &-inner {
width: $content-width; width: 100%;
height: 100%; height: 100%;
layout-card(); layout-card();
...@@ -81,6 +96,6 @@ ...@@ -81,6 +96,6 @@
} }
.content-home { .content-home {
padding: 0; padding: 0 !important;
background-color: transparent; background-color: transparent;
} }
source/css/_common/responsive.styl
浏览文件 @ 82e7d421
// // $main-width: A calc value. // $content-width: A calc value.
// // ----------------------------------------- // -----------------------------------------
// @media screen and (min-width: $main-width) @media (min-width: $content-width + $content-aside-gap * 2) {
// #header .header-nav-inner {
// width: 100% width: $content-width;
}
// .header-nav-inner
// width: $main-width .main-inner {
width: $content-width;
// .main-inner }
// width: $main-width }
// // $md-width: 992px - 0.02px // $md-width: 992px - 0.02px
// // ----------------------------------------- // -----------------------------------------
// @media screen and (min-width: $md-width) @media (min-width: $md-width) {
// .header-nav-menu .header-nav-menu {
// visibility: visible visibility: visible;
// opacity: 1 opacity: 1;
}
// @media screen and (max-width: $md-width) }
// #header
// height: 340px @media (max-width: $md-width) {
// background-attachment: local .header-inner {
height: 340px;
// #footer }
// background-attachment: local
.main {
// #main margin: 1rem 0;
// margin: 1rem 0 }
// #sidebar .content {
// display: none width: 100%;
}
// .main-inner
// width: 100% .sidebar {
display: none;
// .content }
// padding: .8rem
// width: 100% .post-list .post {
margin: 0 0 1rem;
// #recent-posts article.post padding: 1rem;
// margin: 0 0 1rem }
// padding: .8rem 1rem
.header-nav-btn {
// .header-nav-menu display: block;
// visibility: hidden float: left;
// border-radius: 3px }
// height: auto
// background-color: $header-nav-bg-color .header-nav-menu {
// opacity: 0 display: inline-block;
// transform: translate(-1.5rem, 2.5rem) border-radius: 3px;
width: auto;
// .menu-item height: auto;
// float: none background-color: $header-nav-bg-color;
// margin: 0 transform: translate(-1.5rem, header-nav-height);
// a &-item {
// padding: 0 1rem float: none;
// color: $white-light !important margin: 0;
// user-select: none
&__a {
// &:hover padding: 0 1.5rem;
// color: $white-light text-align: left;
// background-color: $blue-lighter color: $white-light;
disable-user-select();
// .header-nav-btn
// display: block &:hover {
// float: left color: $white-light;
background-color: $blue-lighter;
// .header-nav-submenu }
// top: 0 }
// right: 0 }
// left: 100% }
// width: 100%
.header-nav-submenu {
// .friends-plugin top: 0;
// .friends-item right: 0;
// width: calc(50% - 10px) left: 100%;
width: 100%;
// // sm-width: 768px - 0.02px }
// // ----------------------------------------- }
// @media screen and (max-width: $sm-width)
// .header-info-inner // sm-width: 768px - 0.02px
// .header-info-title // -----------------------------------------
// font-size: 3.25rem @media (max-width: $sm-width) {
.header-info-title {
// .header-info-subtitle font-size: 3rem;
// font-size: 1rem }
// div.search-popup .header-info-subtitle {
// top: 0 font-size: .9rem;
// left: 0 }
// margin: 0
// border-radius: 0 .search-popup {
// width: 100% top: 0;
// height: 100vh left: 0;
// max-height: 100vh margin: 0;
border-radius: 0;
// div.search-results width: 100%;
// max-height: calc(100vh - 6rem) height: 100vh;
max-height: 100vh;
// // $xs-width: 576px - 0.02px }
// // -----------------------------------------
// @media screen and (min-width: $xs-width) .search-results {
// .content max-height: 'calc(100vh - %s)' % search-results-height;
// font-size: $font-size-base + 2px }
}
// .sidebar-inner
// font-size: $font-size-base + 2px // xs-width: 576px - 0.02px
// -----------------------------------------
// .footer-inner @media (max-width: $xs-width) {
// font-size: $font-size-base + 2px .header-inner {
height: 260px;
// @media screen and (max-width: $xs-width) }
// #header
// height: 240px .header-info-title {
font-size: 1.8rem;
// #main }
// margin: .8rem 0
.header-info-subtitle {
// .content font-size: $font-size-base;
// padding: .8rem .6rem }
// font-size: $font-size-base
.main-inner {
// .home-content width: 100%;
// padding: 0 }
// #recent-posts article.post .content-inner {
// margin: 0 0 .8rem padding: .6rem .8rem;
// padding: .8rem font-size: $font-size-base;
}
// .header-info-inner
// .header-info-title .archive {
// font-size: 1.8rem margin-left: .5rem;
}
// .header-info-subtitle
// font-size: $font-size-base .header-nav-search {
span {
// .header-nav-search display: none;
// span }
// display: none }
// .algolia-hit-item .post-list .post {
// margin: 0 margin: 0 0 .8rem;
padding: .8rem;
// .post-header }
// font-size: $font-size-base
.algolia-hit-item {
// .post-title margin: 0;
// font-size: 1.2rem }
// .post-meta .gallery__img {
// &-create, width: 100%;
// &-read, }
// &-word
// :first-child .friends-plugin {
// display: none .friends-item {
margin: 0;
// .dot padding: .5rem 1rem;
// margin: 0 .3rem width: 100%;
}
// .archive-inner }
// margin-left: .5rem }
// .article-sort-title
// margin-bottom: .8rem
// .article-sort-item
// margin-bottom: .5rem
// .gallery-image
// width: 100%
// div.search-popup
// padding: .8rem .6rem 1rem
// div.search-results
// & > ul
// padding-left: 1rem
// .friends-plugin
// .friends-item
// padding: .5rem
// width: 100%
source/css/_mixins/index.styl
浏览文件 @ 82e7d421
...@@ -22,48 +22,6 @@ transition-ease-in-out() { ...@@ -22,48 +22,6 @@ transition-ease-in-out() {
transition-duration: .2s; transition-duration: .2s;
} }
// < 576px
mobile-small() {
@media (max-width: $xs-width) {
{block};
}
}
// < 768px
mobile() {
@media (max-width: $sm-width) {
{block};
}
}
// < 992px
tablet-mobile() {
@media (max-width: $md-width) {
{block};
}
}
// > 768px && < 992px
tablet() {
@media (min-width: $sm-width) and (max-width: $md-width) {
{block};
}
}
// > 992px
desktop() {
@media (min-width: $md-width) {
{block};
}
}
// > 1200px
desktop-large() {
@media (min-width: $lg-width) {
{block};
}
}
clearfix() { clearfix() {
&::before, &::before,
&::after { &::after {
......
source/css/_variables/index.styl
浏览文件 @ 82e7d421
...@@ -35,11 +35,11 @@ $md-width = 992px - 0.02px ...@@ -35,11 +35,11 @@ $md-width = 992px - 0.02px
$lg-width = 1200px - 0.02px $lg-width = 1200px - 0.02px
// Width // Width
$sidebar-width = convert(hexo-config('sidebar.width') || '260px') $sidebar-width = convert(hexo-config('sidebar.width') || '260px')
$side-main-gap = 20px $main-width = $md-width
$content-width = $md-width $main-sidebar-gap = 30px
$main-aside-gap = 40px $content-aside-gap = 20px
$main-width = $sidebar-width + $content-width + $side-main-gap $content-width = $main-width + $sidebar-width + $main-sidebar-gap
// ------------------------------------------- // -------------------------------------------
// Font, line-height // Font, line-height
...@@ -130,7 +130,7 @@ $home-readmore-bg-hover-color = $blue-light ...@@ -130,7 +130,7 @@ $home-readmore-bg-hover-color = $blue-light
$category-list-dot-color = $blue-light $category-list-dot-color = $blue-light
$category-list-dot-hover-color = $orange-dark $category-list-dot-hover-color = $orange-dark
$category-post-count-color = #99a9bf $category-post-count-color = #99a9bf
$category-link-color = $font-color $category-link-color = $blue-light
$category-link-hover-color = $blue-light $category-link-hover-color = $blue-light
// Tag page // Tag page
......
source/js/algolia-search.js 已删除 100644 → 0
浏览文件 @ 2f38dda9
$(document).ready(function () {
$('.header-nav-search').on('click', function (e) {
e.stopPropagation();
$('body').css('overflow', 'hidden');
$('.search-popup')
.velocity('stop')
.velocity('transition.expandIn', {
duration: 300,
complete: function () {
$('.search-popup input').focus();
}
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeIn', {
duration: 300
});
});
$('.search-mask, .search-close').on('click', function () {
closeSearch();
});
$(document).on('keydown', function (e) {
// Escape <=> 27
if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
closeSearch();
}
});
var algolia = CONFIG.algolia;
if (!(algolia.appId && algolia.apiKey && algolia.indexName)) {
return console.error('Algolia setting is invalid.');
}
var search = instantsearch({
appId: algolia.appId,
apiKey: algolia.apiKey,
indexName: algolia.indexName,
searchParameters: {
hitsPerPage: algolia.hits.per_page || 10
},
searchFunction: function (helper) {
var searchInput = $('.search-input').find('input');
if (searchInput.val()) {
helper.search();
}
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '.search-input',
reset: false,
magnifier: false,
placeholder: algolia.languages.input_placeholder
})
);
// The hits of search results.
search.addWidget(
instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
item: function (data) {
var link = data.permalink ? data.permalink : CONFIG.root + data.path;
return (
'<a href="' + link + '" class="algolia-hit-item-link">' +
data._highlightResult.title.value +
'</a>'
);
},
empty: function (data) {
return (
'<div id="algolia-hits-empty">' +
algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
'</div>'
);
}
},
cssClasses: {
item: 'algolia-hit-item'
}
})
);
// The stats of search results.
if ($('#algolia-stats')[0]) {
search.addWidget(
instantsearch.widgets.stats({
container: '#algolia-stats',
templates: {
body: function (data) {
var stats = algolia.languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS);
return (
stats +
'<span class="algolia-logo pull-right">' +
'<img src="' + CONFIG.root +
'images/algolia.svg" alt="Algolia" />' +
'</span>'
);
}
}
})
);
}
// The pagination of the results.
search.addWidget(
instantsearch.widgets.pagination({
container: '#algolia-pagination',
scrollTo: false,
showFirstLast: false,
labels: {
first: '<i class="fa fa-angle-double-left"></i>',
last: '<i class="fa fa-angle-double-right"></i>',
previous: '<i class="fa fa-angle-left"></i>',
next: '<i class="fa fa-angle-right"></i>'
},
cssClasses: {
root: 'pagination',
item: 'pagination-item',
link: 'page-number',
active: 'current',
disabled: 'disabled-item'
}
})
);
search.start();
function closeSearch () {
$('body').css('overflow', 'auto');
$('.search-popup')
.velocity('stop')
.velocity('transition.expandOut', {
duration: 300
});
$('.search-mask')
.velocity('stop')
.velocity('transition.fadeOut', {
duration: 300
});
}
});
source/js/scroll.js
浏览文件 @ 82e7d421
...@@ -69,7 +69,7 @@ $(document).ready(function () { ...@@ -69,7 +69,7 @@ $(document).ready(function () {
} }
} }
$(window).on('load', back2topHandler); $(window).on('DOMContentLoaded', back2topHandler);
$(window).on('scroll', Stun.utils.throttle(function () { $(window).on('scroll', Stun.utils.throttle(function () {
back2topHandler(); back2topHandler();
}, 500)); }, 500));
......
source/js/utils.js
浏览文件 @ 82e7d421
...@@ -111,11 +111,11 @@ Stun.utils = Stun.$u = { ...@@ -111,11 +111,11 @@ Stun.utils = Stun.$u = {
}; };
if (!$('.stun-alert')[0]) { if (!$('.stun-alert')[0]) {
var fa_prfix = CONFIG.fontawesome.prefix; var faPrefix = CONFIG.fontawesome.prefix;
var $alert = $( var $alert = $(
'<div class="stun-message">' + '<div class="stun-message">' +
'<div class="stun-alert stun-alert-' + status + '">' + '<div class="stun-alert stun-alert-' + status + '">' +
'<i class="stun-alert-icon ' + fa_prfix + ' fa-' + icon[status] + '"></i>' + '<i class="stun-alert-icon ' + faPrefix + ' fa-' + icon[status] + '"></i>' +
'<span class="stun-alert-description">' + text + '</span>' + '<span class="stun-alert-description">' + text + '</span>' +
'</div>' + '</div>' +
'</div>' '</div>'
...@@ -252,10 +252,10 @@ Stun.utils = Stun.$u = { ...@@ -252,10 +252,10 @@ Stun.utils = Stun.$u = {
addIconToExternalLink: function (container) { addIconToExternalLink: function (container) {
if (!$(container).length) return; if (!$(container).length) return;
var fa_prfix = CONFIG.fontawesome.prefix; var faPrefix = CONFIG.fontawesome.prefix;
var $wrapper = $('<span class="external-link"></span>'); var $wrapper = $('<span class="external-link"></span>');
var $icon = $( var $icon = $(
'<i class="' + fa_prfix + ' fa-' + '<i class="' + faPrefix + ' fa-' +
CONFIG.external_link.icon.name + CONFIG.external_link.icon.name +
'"></i>' '"></i>'
); );
...@@ -389,12 +389,12 @@ Stun.utils = Stun.$u = { ...@@ -389,12 +389,12 @@ Stun.utils = Stun.$u = {
} }
}); });
var fa_prfix = CONFIG.fontawesome.prefix; var faPrefix = CONFIG.fontawesome.prefix;
var $copyIcon = $( var $copyIcon = $(
'<div class="copy-button" data-popover=' + '<div class="copy-button" data-popover=' +
CONFIG.prompt.copy_button + CONFIG.prompt.copy_button +
' data-popover-pos="up">' + ' data-popover-pos="up">' +
'<i class="' + fa_prfix + ' fa-clipboard"></i>' + '<i class="' + faPrefix + ' fa-clipboard"></i>' +
'</div>' '</div>'
); );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或