代码折叠如何开启？

[cfzhous]

网页显示的代码是否可以默认折叠？

[reuixiy]

尝试下 Hugo 的短代码？

比如这个：https://github.com/jiridj/hugo-collapsible-code（可能还需要自己修改下，把 CSS 和 JS 放到 MemE 提供的自定义文件中引入下）

在线效果见 https://jiridj.be/posts/collapsible-code-block/，短代码的食用方法可参考 https://github.com/martignoni/hugo-notice。

或者你也可以自己写一个……

参考：

1. https://discourse.gohugo.io/t/how-to-make-a-collapsible-code-block/5902/7
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
3. https://gohugo.io/templates/shortcode-templates/

[cfzhous]

哦哦，好的，多谢

[cfzhous]

MemE 提供的自定义文件中引入 CSS 和 JS 这个在哪？我在static中引入了hugo-collapsible-code的css,和js，但是代码没有折叠？

[reuixiy]

需要自己新建：

1. CSS ~/blog/assets/custom/_custom.scss

2. JS ~/blog/assets/js/custom.js

[cfzhous]

不太懂前端，操作如下：hugo-collapsible-code的code.html添加到了~/blog/layouts/shortcodes/里，然后把hugo-collapsible-code里的css和js里的内容分别添加到了~/blog/assets/custom/_custom.scss和~/blog/assets/js/custom.js里，然后页面显示如下

[reuixiy]

行，稍等，我看看。

[reuixiy]

code.html

<div class="highlight-wrapper">
    {{ if len .Params | eq 2 }}
        {{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }}
    {{ else }}
        {{ highlight (trim .Inner "\n\r") (.Get 0) "" }}
    {{ end }}
</div>

_custom.scss

.highlight-wrapper {
    position: relative;
    margin-top: -1rem;
    margin-bottom: 2rem;
}

.highlight-link {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
}

custom.js

// Collapsible Hugo code blocks
// by Jiri De Jagere, @JiriDJ

const height = 300;

makeCollapsible();

function makeCollapsible() {
    const divs = document.querySelectorAll('.highlight-wrapper');

    divs.forEach((e) => {
        if (e.offsetHeight > height) {
            e.style.maxHeight = height + 'px';
            e.style.overflow = 'hidden';

            const linkWrapper = document.createElement('div');
            const link = document.createElement('a');

            link.href = '';
            link.textContent = 'more';
            link.addEventListener('click', codeToggle);

            linkWrapper.className = 'highlight-link';
            linkWrapper.appendChild(link);
            e.appendChild(linkWrapper);
        }
    });
}

function codeToggle(e) {
    e.preventDefault();

    const link = e.target;
    const linkWrapper = link.parentElement.parentElement;
  
    if (link.innerHTML === 'more') {
        link.innerHTML = 'less';
        linkWrapper.style.maxHeight = '';
        linkWrapper.style.overflow = 'none';
        link.parentElement.style.right = '0';
    } else {
        link.innerHTML = 'more';
        linkWrapper.style.maxHeight = height + 'px';
        linkWrapper.style.overflow = 'hidden';
        link.parentElement.style.right = '0.5em';
        scrollToTargetAdjusted(linkWrapper);
    }
}

function scrollToTargetAdjusted(e) {
    const header = document.querySelector('header');
    const headerHeight = window.getComputedStyle(header, null).getPropertyValue('height');
    const headerOffset = Number(headerHeight.replace('px', ''));

    const bodyRect = document.body.getBoundingClientRect().top;
    const elementRect = e.getBoundingClientRect().top;
    const elementPosition = elementRect - bodyRect;

    const offsetPosition = elementPosition - headerOffset;

    window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
    });
}

[reuixiy]

……又看了看，发现可以完全不用短代码，直接 JS 就能解决……

_custom.scss

.highlight {
    position: relative;
}

.highlight-link {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
}

custom.js

// Collapsible Hugo code blocks
// by Jiri De Jagere, @JiriDJ

const height = 300;

makeCollapsible();

function makeCollapsible() {
    const divs = document.querySelectorAll('.highlight');

    divs.forEach((e) => {
        if (e.offsetHeight > height) {
            e.style.maxHeight = height + 'px';
            e.style.overflow = 'hidden';

            const linkWrapper = document.createElement('div');
            const link = document.createElement('a');

            link.href = '';
            link.textContent = 'more';
            link.addEventListener('click', codeToggle);

            linkWrapper.className = 'highlight-link';
            linkWrapper.appendChild(link);
            e.appendChild(linkWrapper);
        }
    });
}

function codeToggle(e) {
    e.preventDefault();

    const link = e.target;
    const linkWrapper = link.parentElement.parentElement;
  
    if (link.innerHTML === 'more') {
        link.innerHTML = 'less';
        linkWrapper.style.maxHeight = '';
        linkWrapper.style.overflow = 'none';
        link.parentElement.style.right = '0';
    } else {
        link.innerHTML = 'more';
        linkWrapper.style.maxHeight = height + 'px';
        linkWrapper.style.overflow = 'hidden';
        link.parentElement.style.right = '0.5em';
        scrollToTargetAdjusted(linkWrapper);
    }
}

function scrollToTargetAdjusted(e) {
    const header = document.querySelector('header');
    const headerHeight = window.getComputedStyle(header, null).getPropertyValue('height');
    const headerOffset = Number(headerHeight.replace('px', ''));

    const bodyRect = document.body.getBoundingClientRect().top;
    const elementRect = e.getBoundingClientRect().top;
    const elementPosition = elementRect - bodyRect;

    const offsetPosition = elementPosition - headerOffset;

    window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
    });
}

这样就能自动折叠所有高度大于 300px 的高亮代码块。

[reuixiy]

等我理一理，然后加入主题中去 :)

[cfzhous]

哦，这个折叠了，不能再展开？

[reuixiy]

功能是开发好了，如上。

但我在想，我们好像把问题复杂化了，为什么非要折叠呢？

以上是设置最大高度，然后直接滚动的效果，个人感觉要比折叠更好一点。代码上也要简单不少。

[he-sb]

滚动的话看上下文有点费劲，显示面积太小了

[reuixiy]

可以配置高度

[he-sb]

配置的高度是固定的，但代码块长度不是固定的，个人感觉折叠式的稍好点，当然如果可以折叠+滚动就更完美了 🤣