Skip to content

Instantly share code, notes, and snippets.

@Moyf

Moyf/Dataview example.js

Created October 11, 2025 11:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Moyf/a5e6972edbd1997e95ef322fddbb09a6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Moyf/a5e6972edbd1997e95ef322fddbb09a6 to your computer and use it in GitHub Desktop.
Download ZIP
DV Button Examples
Raw
Dataview example.js
// put me inside ```dataviewjs``` code block
let content = ""
const baseFolder = "PeriodicNote/晨间日记/"
const dateFormat = "M月/M月d日"
const yesterday = baseFolder+dv.func.dateformat(dv.date('yesterday'), dateFormat)
const today = baseFolder+dv.func.dateformat(dv.date('today'), dateFormat)
content += `<a class="internal-link prev-daily elegant-btn ready" href="${yesterday}">🌙昨天</a>`;
content += `<a class="internal-link prev-daily elegant-btn ready" href="${today}">☀今天的晨间日记</a>`;
dv.el("div", `<div class="breadcrumbs-wrapper"> ${content} </div>`);
Raw
Moy-ButtonStyles.css
/* dailyBetween.css */
.breadcrumbs-wrapper {
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-bottom: 20px;
height: 48px;
}
.ready.elegant-btn {
/* color: black; */
text-decoration: none;
font-size: 1em;
padding: 6px 22px;
padding-bottom: 10px;
/*margin-bottom: -8px;*/
display: flex;
justify-content: center;
background-color: transparent;
transition: all 0.2s ease;
box-shadow: 11px 11px 0px 0px rgb(185, 185, 185);
border: 2px solid rgb(185, 185, 185);
}
/* 暗色主题的阴影颜色 */
.theme-dark .ready.elegant-btn {
border: 2px solid #333;
box-shadow: 11px 11px 0px 0px black;
}
.ready.elegant-btn:hover {
box-shadow: 0px 0px 0px 0px rgb(149, 148, 148);
}
.theme-dark .ready.elegant-btn:hover {
box-shadow: 0px 0px 0px 0px black;
}
.dv-prev-dates > span {
display: flex;
justify-content: space-around;
margin-bottom: 8px;
}
/* .block-language-dataviewjs.node-insert-event > p {
line-height: 1.5;
} */
.block-language-dataviewjs.node-insert-event .dataview.table-view-table {
margin-top: 10px;
margin-bottom: 10px;
}
/* 每月按钮做的样式 */
.ready.monthly-btn {
display: inline-block;
padding: 0.18rem 1.8rem;
/*font-size: 16px;*/
font-weight: 500;
color: var(--text-normal);
border: 3px solid var(--color-accent);
cursor: pointer;
position: relative;
background-color: transparent;
text-decoration: none;
overflow: hidden;
z-index: 1;
font-family: inherit;
/*固定按钮大小并居中文本*/
width: 6em;
text-align: center;
transition: color .3s;
}
/* 当前月份的按钮的特殊样式 */
.ready.monthly-btn.current-month {
color: var(--text-accent-hover) !important;
}
/* 尚未创建按钮的特殊样式 */
.ready.monthly-btn.not-exist {
color: var(--text-muted) !important;
}
/* 浮动的效果 */
.ready.monthly-btn::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-accent);
transform: translateX(-100%);
z-index: -1;
transition: all .3s;
}
.ready.monthly-btn:hover {
color: var(--background-primary) !important;
}
.ready.monthly-btn:hover::before {
transform: translateX(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment