跳过正文
  1. Teches/
  2. 前端/
  3. Hugo/

LearnHugo250804

·314 字·2 分钟
目录

设置code-header.language-label点击折叠
#

  1. 设置悬停spacing扩展效果
</> css
 1.language-brackets {
 2    /* 全属性切换过渡动画效果 */
 3    transition: all 0.3s ease; 
 4}
 5/* 悬停间距扩展,颜色高亮 */
 6.language-label:hover .language-brackets {
 7    letter-spacing: 3px;
 8    color: var(--code-header-hover-color);
 9}
10.language-label:hover .language-name {
11    color: var(--code-header-hover-color);
12}
  1. js设置点击label切换chroma.collapsed
</> javascript
 1    document.querySelectorAll('.language-label').forEach(button => {
 2      button.addEventListener('click', () => {
 3        const codeBlock = button.closest('.code-block-wrapper');
 4        const chroma = codeBlock?.querySelector('pre.chroma');
 5        if (chroma) {
 6          chroma.classList.toggle('collapsed');
 7        }
 8        else console.error('chroma折叠失败');
 9      });
10    });
  1. 设置pre.chroma.collapsed折叠样式
</> css
1pre.chroma.collapsed{
2  /* 折叠方法:设置高度为0 */
3  max-height: 0 !important;
4  /* 去除溢出拖动条 */
5  overflow: hidden !important;
6  /* 去除顽固padding */
7  padding: 0 !important;
8}

设置代码块换行按钮功能
#

  1. 核心样式方案:把ln设置固定宽度,cl设置为block,固定左侧间距
</> css
 1pre.chroma .ln {
 2  float: left;
 3  /* 设置行号区域的宽度 */
 4  width: 20px;
 5  text-align: right;
 6  margin-right: 10px;
 7  user-select: none;  /* 禁止行号被选中 */
 8}
 9
10pre.chroma .cl {
11  display: block;
12  margin-left: 30px; /* 与行号宽度一致 */
13}
14
15pre.chroma.wrap-lines .cl {
16  display: block;
17  margin-left: 30px; /* 与行号宽度一致 */
18  white-space: pre-wrap !important;
19}
  1. js代码
</> javascript
 1  document.querySelectorAll('.code-block-wrapper').forEach(wrapper => {
 2      // 为每个代码块创建换行状态存储
 3      const preElement = wrapper.querySelector('pre.chroma');
 4      if (preElement) {
 5          // 默认从 localStorage 读取用户偏好
 6          const wrapEnabled = localStorage.getItem('codeWrapEnabled') === 'true';
 7          if (wrapEnabled) {
 8              preElement.classList.add('wrap-lines');
 9              const wrapButton = wrapper.querySelector('.wrap-button');
10              if (wrapButton) {
11                  wrapButton.classList.add('active');
12                  const span = wrapButton.querySelector('span');
13                  if (span) span.textContent = '不换行';
14              }
15          }
16      }
17  });
18  // 换行按钮功能
19  document.addEventListener('click', function(e) {
20      if (e.target.closest('.wrap-button')) {
21          const button = e.target.closest('.wrap-button');
22          const codeBlock = button.closest('.code-block-wrapper');
23          const preElement = codeBlock.querySelector('pre.chroma');
24          
25          if (preElement) {
26              preElement.classList.toggle('wrap-lines');
27              button.classList.toggle('active');
28              
29              // 保存用户偏好
30              const isNowWrapped = preElement.classList.contains('wrap-lines');
31              localStorage.setItem('codeWrapEnabled', isNowWrapped.toString());
32              
33              // 更新按钮文本
34              const span = button.querySelector('span');
35              if (span) {
36                  span.textContent = isNowWrapped ? '换行' : '不换行';
37              }
38          }
39      }
40  });