Halo 2.0 的基础主题开发模板,包含了主题的基本目录结构。
主题开发文档可查阅:https://docs.halo.run/2.0.0-SNAPSHOT/developer-guide/theme/prepare
matcha的Halo移植
Halo 2.0 的基础主题开发模板,包含了主题的基本目录结构。
主题开发文档可查阅:https://docs.halo.run/2.0.0-SNAPSHOT/developer-guide/theme/prepare
从首页进去文章无法加载评论和目录,在文章页面刷新网页加载出来目录和评论后用pjax回到主页,目录和评论不会销毁
Halo的评论插件暂时不知道怎么适配,但是目录插件试了好久都没法
(我JS写的好烂,求个大佬帮帮(¦3[▓▓]
matcha.js文件的第112-139行
/tocbot
var tocbotLoad = function() {
//判断页面中是否有目录容器
if($('#toc').length){
//初始化 tocbot
tocbot.init({
tocSelector: '#toc',
contentSelector: '.post-content',
headingSelector: 'h2, h3',
hasInnerContainers: true,
smoothScroll: true,
headingsOffset: 20,
scrollSmoothOffset: -20
});
//滚动监听
$(window).scroll(function(){
//当视口滚动到评论区,关闭文章目录
if($('#comments').length){
if(isInViewport(document.getElementById('comments'), 0.5)){
$('#toc').fadeOut();
}else{
$('#toc').fadeIn();
}
}
});
}
}
267-304行
//Must load when page finish
var JSLoad = function(){
try {
if(typeof SmoothScroll === "function") SmoothScroll();
if(typeof matchaComment !== 'undefined'){
matchaComment.bindButton();
matchaComment.core();
}
} catch(e) {}
linkTarget();
bigfootLoad();
detailsAnimate();
prismLoad();
lazyloader();
archiveInit();
tocbotLoad();
$('.focus-mode-btn').click(toggleFocusMode);
}
JSLoad();
// Load Pjax
$(document).pjax('a[href]:not(a[target="_blank"], a[no-pjax], .cancel-comment-reply a, .comment-reply a)', {
container: '#main',
fragment: '#main',
timeout: 8000
}).on('pjax:send', function() {
$('body').append('<div class="progress" role="spinner" id="pjax-loading"><div class="progress-bar"></div></div>');
$("#main").removeClass("fadein").addClass("fadeout");
if ($('#toc').length) tocbot.destroy(); // 摧毁文章目录
$(window).off('scroll');
$(window).on('scroll', back2topShow); // 取消文章目录自动关闭的滚动绑定
if ($('body').hasClass('focus-mode')) toggleFocusMode(); // 切换页面时关闭专注模式
}).on('pjax:complete', function() {
$("#main").removeClass("fadeout").addClass("fadein").hide().fadeIn(700);
JSLoad();
toc = '';
$('#pjax-loading').remove();
});
相关的HTML在post.html的44-56行(评论和目录)
<h2 class="mb-2 text-base font-medium text-gray-900 dark:text-slate-50">评论</h2>
<halo:comment
group="content.halo.run"
kind="Post"
th:attr="name=${post.metadata.name}"
colorScheme="'matcha-dark' === (localStorage.getItem('color') || '') ? 'dark' : (localStorage.getItem('color') || '')"
/>
</div>
</div>
</div>
<aside id="tocbar" class="tocbar">
<div id="toc">
</div>
</aside>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.