PaperModx 模板：多标签页

需求：新建一个模板，支持在文章正文中显示多标签页

实现步骤：

创建模板

./layouts/shortcodes/tabs.html

1
2
3
4
<div class="x-tabs">
  <div class="x-tabs-nav"></div>
  <div class="x-tabs-content">{{ .Inner }}</div>
</div>

./layouts/shortcodes/tab.html

1
2
3
<div class="x-tab" title="{{ .Get 0 }}">
  {{ .Inner }}
</div>

添加样式

./assets/css/extended/custom.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.x-tabs {
  margin: 8px 0;
  display: block;
  border: 1px solid var(--tertiary);
  border-radius: 2px;
}

.x-tabs-nav {
  position: relative;
  display: flex;
  flex: none;
  background-color: var(--theme);
  border-bottom: 1px solid var(--tertiary);
}

.x-tabs-nav-item.active {
  border-bottom: 1px solid #1890ff;
}

.x-tabs-nav-item > span {
  display: block;
  color: var(--primary);
  font-size: 16px;
  padding: 4px 16px;
}

.x-tabs-nav-item.active > span,
.x-tabs-nav-item > span:hover {
  color: #1890ff !important;
}

.x-tab {
  display: none;
  padding: 8px 16px;
}

.x-tab.active {
  display: block;
} 

添加脚本

./layouts/partials/footer.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
const removeClass = (parent, el, className) => {
    parent.querySelectorAll(el).forEach($el => {
        $el.classList.remove(className);
    });
};

document.querySelectorAll('.x-tabs').forEach(tabs => {
    const $tabsNav = tabs.querySelector('.x-tabs-nav');
    const $tabsContent = tabs.querySelector('.x-tabs-content');

    tabs.querySelectorAll('.x-tab').forEach(tab => {
        const title = tab.getAttribute('title') || 'tab';
        const nav = document.createElement('div');
        nav.classList.add('x-tabs-nav-item')
        nav.innerHTML = '<span>' + title + '</span>';
        $tabsNav.append(nav);
    });

    tabs.querySelectorAll('.x-tabs-nav-item').forEach($navItem => {
        $navItem.addEventListener('click', e => {
            e.preventDefault();
            removeClass(tabs, '.x-tabs-nav-item', 'active');
            removeClass(tabs, '.x-tab', 'active');
            $navItem.classList.add('active');

            const index = Array.from($navItem.parentNode.children).indexOf($navItem);
            $tabsContent.children.item(index).classList.add('active');
        });
    });

    const $firstNav = $tabsNav.querySelector('.x-tabs-nav-item:first-child');
    if ($firstNav) {
        $firstNav.click();
    }
});
</script>

使用姿势

1
2
3
4
5
6
7
8
{{ % tabs %}}
{{ % tab "Java" %}}
  第一个 tab，注意 {{ 和 % 之间有个空格，使用的时候记得去掉
{{ % /tab %}}
{{ % tab "JavaScript" %}}
  第二个 tab
{{ % /tab %}}
{{ % /tabs %}}

1
System.out.println("hello tabs");

1
console.log("hello tabs");