ᛡ home ᛒ

#1b1b1e 向你问好:)

吧唧 Badge

badge暂时是基于sheield.io的静态版本，超链接通过md语法中对图片超链接实现。

https://github.com/nsgih/nsgih.github.io/tree/main/assets/books

![](https://img.shields.io/badge/any_text-you_like-blue)

![](https://img.shields.io/badge/just%20the%20message-8A2BE2)

样式 scss

{spoiler-text} {tooltip-text}

<span class="spoiler-tooltip">
{spoiler-text}
  <span class="tooltip-text">{tooltip-text}
  </span>
</span>

• 导入scss

<!-- 导入css -->
<style>
/* spoiler 样式 */
.spoiler-tooltip {
  position: relative;
  background-color: black;
  color: black;
  cursor: pointer;
  transition: color 0.3s ease;
  border-bottom: 1px dotted gray; /* 可选装饰 */
}

.spoiler-tooltip:hover {
  color: white;
}

/* Tooltip 样式 */
.tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 300px;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 5px 8px;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9em;
  white-space: normal;
  transition: opacity 0.2s;
}

.spoiler-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
</style>

信息中心 info

直播，默认自己看自己，欢迎来玩。

参照 Reference

1. How-to-post
2. Chronic.local(限本地开发)
3. Chronic
4. jekyll-chirpy-theme
5. chirpy-demo
6. jekyll-component

ign