Skip to content

Commit

Permalink
Merge pull request #5 from liuzhihang/dev
Browse files Browse the repository at this point in the history
适配 halo alpha.4
  • Loading branch information
liuzhihang authored Nov 4, 2022
2 parents 703aebf + c916c6e commit 1c4ddd1
Show file tree
Hide file tree
Showing 42 changed files with 1,124 additions and 670 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,17 @@

本主题是根据 [Heo](https://blog.zhheo.com/) 的博客进行开发,其中部分功能暂未支持

部分功能支持需要安装插件:
- [留言](https://github.com/halo-sigs/plugin-comment-widget)
- [代码高亮](https://github.com/liuzhihang/plugin-prismjs)
- [懒加载](https://github.com/liuzhihang/plugin-lazyload)
- [文章目录](https://github.com/liuzhihang/plugin-tocbot)

图标 icon 来自于 [iconfont](https://www.iconfont.cn/)
- [Awesome常用免费开源图标](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=11790)



## 预览

## 支持的功能
Expand Down
59 changes: 47 additions & 12 deletions settings.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,11 @@ metadata:
spec:
forms:
- group: nav
label: 导航栏
label: 导航
formSchema:
- $formkit: text
- $formkit: menuRadio
name: left_menu
label: 导航栏左侧相关链接
placeholder: 请填写 metadata name
help: "需要通过开发者模式获取菜单对应的 metadata name"
- $formkit: radio
name: right_menu
label: 右侧四个按钮
Expand Down Expand Up @@ -107,9 +105,9 @@ spec:
label: 博客封面随机 API
validation: "url"
value: "https://source.unsplash.com/random/600x400/?blog,scenery,night,desert,sea"
help: 默认随机封面图 url 不能保证一直可用
help: 二次元随机图地址:https://www.dmoe.cc/random.php 默认随机封面图 url 不能保证一直可用
- group: sidebar
label: 侧边栏
label: 侧栏
formSchema:
- $formkit: select
name: location
Expand All @@ -124,9 +122,26 @@ spec:
label: "左侧"
- $formkit: textarea
name: widgets
label: 小部件(无效)
value: "profile,recent-posts,latest-comments,categories,tags"
help: "目前提供的小部件有:profile(站点资料), recent-posts(近期文章), latest-comments(最新评论), categories(文章分类), tags(文章标签)。你可以随意组合或排序,以逗号隔开。"
label: 小部件
value: "profile,wechat,comments,recent-posts,categories,tags-stat"
help: "目前提供的小部件有:profile(站点资料), wechat(微信), recent-posts(近期文章), comments(最新评论), categories(文章分类), tags(文章标签), stat(统计), tags-stat(标签&统计)。你可以随意组合或排序,以逗号隔开。"
- $formkit: textarea
name: post_widgets
label: 文章页面小部件
value: "profile,wechat,toc,comments,recent-posts,categories,tags-stat"
help: "post 可以支持设置 toc "
- $formkit: textarea
name: tag_widgets
label: 标签页面小部件
value: "profile,wechat,comments,recent-posts,categories,tags-stat"
- $formkit: textarea
name: category_widgets
label: 分类页面小部件
value: "profile,wechat,comments,recent-posts,categories,tags-stat"
- $formkit: textarea
name: page_widgets
label: 自定义页面小部件
value: ""
- $formkit: text
name: profile_name
label: 个人卡片名称
Expand All @@ -153,11 +168,9 @@ spec:
label: 社交链接(无效)
placeholder: 暂时不支持配置
help: "当前版本不支持配置"
- $formkit: text
- $formkit: menuRadio
name: menu
label: 底部相关链接
placeholder: 请填写 metadata name
help: "需要通过开发者模式获取菜单对应的 metadata name"
- $formkit: text
name: copyright_start
label: 开始时间
Expand All @@ -168,6 +181,28 @@ spec:
label: ICP 备案
placeholder: 请输入 ICP 备案号
help: "京ICP备xxxxxxxx号"
- group: post
label: 文章
formSchema:
- $formkit: radio
name: copyright
label: 版权声明
value: true
options:
- label: 打开
value: true
- label: 关闭
value: false
help: "文章底部显示版权声明模块"
- $formkit: url
name: copyrightAgreement
label: 版权协议
placeholder: "请输入版权协议地址"
- $formkit: textarea
name: copyrightInfo
label: 版权声明
placeholder: '本文是原创文章,采用 <a target="_blank" href="/cc">CC BY-NC-ND 4.0</a> 协议,完整转载请注明来自 <a href="/" target="_blank" >程序员小航</a>'
help: "版权声明内容,支持填入 HTML 标签"
- group: right_menu
label: 右键菜单
formSchema:
Expand Down
Binary file added templates/assets/images/404.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
149 changes: 80 additions & 69 deletions templates/assets/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ document.addEventListener("DOMContentLoaded", function () {

let initTop = 0;
let $header = document.getElementById("page-header");
let $cookies = document.getElementById("cookies-window");

window.scrollCollect = btf.throttle(function () {

Expand All @@ -66,7 +65,6 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
$header.classList.add("nav-fixed")
$cookies.classList.add("cw-hide")
} else {
if (0 === currentTop) {
$header.classList.remove("nav-fixed", "nav-visible")
Expand All @@ -79,63 +77,73 @@ document.addEventListener("DOMContentLoaded", function () {

// 滚动处理
const scrollFnToDo = function () {
let $cardTocLayout = document.getElementById("card-toc");
let $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0];
let $tocLink = $cardToc.querySelectorAll(".toc-link");
let $article = document.getElementById("article-container");


const scrollPercent = function (currentTop) {
const docHeight = $article.clientHeight;
const winHeight = document.documentElement.clientHeight;
const headerHeight = $article.offsetTop;
const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
const scrollPercent = (currentTop - headerHeight) / (contentMath);
const scrollPercentRounded = Math.round(100 * scrollPercent);
const percentage = 100 < scrollPercentRounded ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded;
$cardToc.setAttribute("progress-percentage", percentage);
}

document.getElementById("mobile-toc-button")
.addEventListener("click", function () {
if ("0" === window.getComputedStyle($cardTocLayout).getPropertyValue("opacity")) {
window.mobileToc.open();
} else {
window.mobileToc.close();
}
});
const isToc = GLOBAL_CONFIG.htmlType === 'post' && document.getElementById("card-toc");
const $article = document.getElementById("article-container");

window.mobileToc = {
open: () => {
$cardTocLayout.style.cssText = "animation: toc-open .3s; opacity: 1; right: 45px";
},
if (!($article && isToc)) return

close: () => {
$cardTocLayout.style.animation = "toc-close .2s"
setTimeout(function () {
$cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''";
}, 100);
}
}
let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand

if (isToc) {

// toc 元素点击
$cardToc.addEventListener("click", e => {
e.preventDefault();
const target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement;

btf.scrollToDest(
btf.getEleTop(
document.getElementById(
decodeURI(target.getAttribute("href")).replace("#", "")
)
),
300
);
if (window.innerWidth < 900) {
window.mobileToc.close();
const $cardTocLayout = document.getElementById("card-toc");
$cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0];
$tocLink = $cardToc.querySelectorAll(".toc-link");

// const $tocPercentage = $cardTocLayout.querySelector(".toc-percentage");
isExpand = $cardToc.classList.contains("is-expand");

scrollPercent = function (currentTop) {
const docHeight = $article.clientHeight;
const winHeight = document.documentElement.clientHeight;
const headerHeight = $article.offsetTop;
const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight);
const scrollPercent = (currentTop - headerHeight) / (contentMath);
const scrollPercentRounded = Math.round(scrollPercent * 100);
const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded;
// $tocPercentage.textContent = percentage
$cardToc.setAttribute("progress-percentage", percentage);
};


window.mobileToc = {
open: () => {
$cardTocLayout.style.cssText = "animation: toc-open .3s; opacity: 1; right: 45px";
},

close: () => {
$cardTocLayout.style.animation = "toc-close .2s"
setTimeout(function () {
$cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''";
}, 100);
}
}
});

// toc 元素点击
$cardToc.addEventListener("click", e => {
e.preventDefault();
const target = e.target.classList;
if (target.contains('toc-content')) return;
const $target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement;

btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute("href")).replace("#", ""))), 300);
if (window.innerWidth < 900) {
window.mobileToc.close()
}
});

autoScrollToc = item => {
const activePosition = item.getBoundingClientRect().top
const sidebarScrollTop = $cardToc.scrollTop
if (activePosition > (document.documentElement.clientHeight - 100)) {
$cardToc.scrollTop = sidebarScrollTop + 150
}
if (activePosition < 100) {
$cardToc.scrollTop = sidebarScrollTop - 150
}
};
}
// find head position & add active class
const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6");
let detectItem = "";
Expand All @@ -150,7 +158,8 @@ document.addEventListener("DOMContentLoaded", function () {

list.forEach(function (ele, index) {
if (top > btf.getEleTop(ele) - 80) {
currentId = "#" + encodeURI(ele.getAttribute("id"));
const id = ele.id
currentId = id ? "#" + encodeURI(id) : ""
currentIndex = index
}

Expand All @@ -161,26 +170,28 @@ document.addEventListener("DOMContentLoaded", function () {

detectItem = currentIndex

$cardToc.querySelectorAll(".active").forEach(i => {
i.classList.remove("active")
})
if (isToc) {
$cardToc.querySelectorAll(".active").forEach(i => {
i.classList.remove("active")
});
if (currentId === "") {
return;
}

if (currentId === "") {
return
}
const currentActive = $tocLink[currentIndex];

const currentActive = $tocLink[currentIndex]
currentActive.classList.add("active")
currentActive.classList.add("active");

setTimeout(() => {
autoScrollToc(currentActive)
}, 0)
setTimeout(() => {
autoScrollToc(currentActive)
}, 0);

if (isExpand) return
let parent = currentActive.parentNode
if (isExpand) return;
let parent = currentActive.parentNode;

for (; !parent.matches(".toc"); parent = parent.parentNode) {
if (parent.matches("li")) parent.classList.add("active")
for (; !parent.matches(".toc-list"); parent = parent.parentNode) {
if (parent.matches("li")) parent.classList.add("active")
}
}
}

Expand Down
14 changes: 0 additions & 14 deletions templates/assets/js/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -167,10 +167,6 @@ const btf = {
}
},

isJqueryLoad: function (e) {
"undefined" == typeof jQuery ? getScript(GLOBAL_CONFIG.source.jQuery).then(e) : e()
},

isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,

getEleTop: ele => {
Expand All @@ -185,14 +181,4 @@ const btf = {
return actualTop
},

updateAnchor: (anchor) => {
if (anchor !== window.location.hash) {
if (!anchor) anchor = location.pathname
const title = GLOBAL_CONFIG_SITE.title
window.history.replaceState({
url: location.href,
title: title
}, title, anchor)
}
}
};
Loading

0 comments on commit 1c4ddd1

Please sign in to comment.