---
name: 示例 # 在这里填写你的名字
avatar: https://github.com/avatar.png # 在这里填写你的头像地址 (记得允许cors)
info: 在这里简短地介绍一下你自己吧！
color: "#1d42a8ff" # 在这里输入主色
tags: ["旅行"] # 为你的博客贴一点标签吧！
emoji: "❓" # 可空
href: "https://www.baidu.com" # 在这里填写你的博客地址
ignore: true # 示例代码不显示在友链区
---
<!-- 以下为示例内容区，你可以随意修改 -->
<!-- 当你需要编写html时，请用这个shortcode包裹！-->
{{< rawhtml >}}
<!-- 引入外部JS和CSS时请务必像这样指定integrity！-->
<!-- 可在https://www.srihash.org/生成 -->
<script src="https://cdn.jsdelivr.net/npm/pure-snow.ts@2.1.4/dist/pure-snow.iife.min.js" integrity="sha256-EqK1zc+3uzIcWBQdYNC2qCewqcR7Ej3eIqiGUBUPvw8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pure-snow.ts@2.1.4/style.min.css" integrity="sha256-jeet5usSJq1XLBaGoPk9fInB54BJP92YE26Ulfk+jXs=" crossorigin="anonymous">

<div class="bg">
<div class="snow-wrapper" data-count="100"></div>
<div class="content">
<span class="day-night"></span>
<script>
/* 
    当你需要shadowRoot时，请通过这个回调获取shadow对象。它的结构如下：
    shadow: {
        host: shadowHost,
        root: shadowHost.shadowRoot || shadowHost,
        document: shadowHost.shadowRoot ? shadowHost.shadowRoot.ownerDocument : document,
    }
    使用时只需要记住：
    需要得到你自己写的元素 -> shadow.root.querySelector()
    需要往页面中添加元素 -> shadow.document.createElement()
*/
document.addShadowEventListener(async (shadow) => {
    const shadowRoot = shadow.root;
    const bg = shadowRoot.querySelector(".bg");
    const observer = new IntersectionObserver(async (entries) => {
        for (entry of entries) {
            if (entry.isIntersecting) {
                const shadowRoot = shadow.root;
                const bg = shadowRoot.querySelector(".bg");
                initPureSnow({
                    root: bg,
                    cssRoot: bg,
                });
                observer.disconnect();
                return;
            }
        }
    });
    observer.observe(bg);
});
</script>

<script>
    console.log("hello!");
</script>

<style>
    button {
        cursor: pointer;
        border: none;
        text-decoration: underline;
        background: none;
        color: rgba(142, 198, 255, 1);
        display: inline;
        margin: 0;
    }

    .inline {
        display: inline;
    }

    .blue {
        color: rgba(142, 198, 255, 1);
    }

    .bg {
        position: relative;
        width: 100%;
        background: radial-gradient(ellipse at bottom, #000014 0%, #000000 100%);
        color: #fff;
        overflow: hidden;
    }

    .content {
        position: relative;
        z-index: 1;
        padding: 2rem;
    }

    a {
        color: #8ec6ff;
        text-decoration: underline;
    }

    .day-night::before {
        content: '🌞';
        position: absolute;
        right: 1em;
        opacity: 1;
        transition: opacity 0.5s;
    }

    .day-night::after {
        content: '🌜';
        position: absolute;
        right: 1em;
        opacity: 0;
        transition: opacity 0.5s;
    }

    /* 请使用:host-context来进行选择器查询 */
    :host-context([data-scheme="dark"]) .day-night::before {
        opacity: 0;
    }

    :host-context([data-scheme="dark"]) .day-night::after {
        opacity: 1;
    }
</style>
{{< /rawhtml >}}

嘿，<span class="blue inline">你好</span>！这里是可选的展示区，你可以在这里*随心所欲*地使用**Markdown**,
{{< hint "Shortcode" "你知道的太多了">}},
<button onclick="alert('我正在看着你…')">JavaScript</button>,
和CSS!

当然纯文本也是可以的，尽情发挥你的创意吧! 🚀

不过你需要遵守以下规则…
 - 请勿插入违反法律法规的内容。
 - 请勿插入恶意代码。
 - 请勿插入过大的资源。
 - 请勿滥用此特性。
 - 请确保内容不会影响网站的整体性能和用户体验。
 - 禁止使用不可信来源的外部script。
 - 所有外部script都需要添加integrity和crossorigin属性。

仿照源码制作好内容后请将md文件直链发送到**当前页面评论区**，经审核后会被添加到页面上，感谢你的理解与合作！😊

<a href="friends.example.md" download>点击下载当前页面源码</a>
</div>
</div>