主题美化 - 米尔嘉

Joe主题美化

主题菜单


应用joe-font joe-icon-application

首页joe-font joe-icon-shouye

导航joe-font joe-icon-faxian

分类joe-font joe-icon-fenlei

标签joe-font joe-icon-tag

文章归档joe-font joe-icon-timeline

友情链接joe-font joe-icon-zhifeiji

留言joe-font joe-icon-youjian

日志joe-font joe-icon-yumao

图片joe-font joe-icon-tupian

实验室joe-font joe-icon-unreal

关于页面joe-font joe-icon-biaoqing

音乐joe-font joe-icon-yinfu

加速joe-font joe-icon-jiasu

收藏joe-font joe-icon-shoucang

发现joe-font joe-icon-faxian

火箭joe-font joe-icon-rocket

设置joe-font joe-icon-shezhi

主题图标iconfont

<link rel="stylesheet" href="//at.alicdn.com/t/font_2788564_crkap1ed9j5.css">

主题样式指南

### 文章标题

```
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```

### 文本元素

#### 下划线

安然++无恙++

#### 加粗

**安然**无恙

#### 倾斜

*安然无恙*

#### 删除线

~~安然无恙~~

#### 引用

> 内心安然无恙

#### 超链接

[=== 安然无恙 ===](https://hanyu.baidu.com/zici/s?wd=%E5%AE%89%E7%84%B6%E6%97%A0%E6%81%99&query=%E5%AE%89%E7%84%B6%E6%97%A0%E6%81%99&srcid=28232&from=kg0)

#### 段落缩进

<p class="indent">
跨越山河去拥抱你
多大风浪都在一起
听到最美的记忆
关于你所有的消息
盼望每天都看到你
雨天也风和日丽
花花绿绿的世界里
我只会喜欢你
愿你在我看不到的地方
安然无恙
愿你的冬天永远不缺暖阳
愿你的明天不再
经历雨打风霜
愿你的未来永远热泪盈眶
</p>

```HTML
<p class="indent">
    跨越山河去拥抱你多大风浪都在一起听到最美的记忆关于你所有的消息盼望每天都看到你雨天也风和日丽花花绿绿的世界里我只会喜欢你愿你在我看不到的地方安然无恙愿你的冬天永远不缺暖阳愿你的明天不再经历雨打风霜愿你的未来永远热泪盈眶
</p>
```

#### 居中标题

<joe-mtitle title="安然无恙"></joe-mtitle>

```HTML
<joe-mtitle title="安然无恙"></joe-mtitle>
```

### 代码元素

#### 行内代码

`安然无恙`

#### 代码块

```HTML
安然无恙
```

```HTML
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <p>远上寒山石径斜，白云生处有人家。</p>
  </body>
</html>
```

```自定义标题
#Joe {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100vh;
}
```

### 列表元素

#### 有序列表

1. 有序列表
2. 有序列表
3. 有序列表

#### 无序列表

- 无序列表
- 无序列表
- 无序列表

#### 任务列表

<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 早餐</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 上班</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 午餐</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 锻炼</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 睡觉</li>
</ul>

```
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 早餐</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 上班</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 午餐</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 锻炼</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 睡觉</li>
</ul>
```

### 表格元素

#### 左对齐

| 表头 1 | 表头 2 | 表头 3 |
| :----- | :----- | :----- |
| 内容 1 | 内容 2 | 内容 3 |

```
| 表头 1 | 表头 2 | 表头 3 |
| :----- | :----- | :----- |
| 内容 1 | 内容 2 | 内容 3 |
```

#### 居中

| 表头 1 | 表头 2 | 表头 3 |
| :----: | :----: | :----: |
| 内容 1 | 内容 2 | 内容 3 |

```
| 表头 1 | 表头 2 | 表头 3 |
| :----: | :----: | :----: |
| 内容 1 | 内容 2 | 内容 3 |
```

#### 右对齐

| 表头 1 | 表头 2 | 表头 3 |
| -----: | -----: | -----: |
| 内容 1 | 内容 2 | 内容 3 |

```
| 表头 1 | 表头 2 | 表头 3 |
| -----: | -----: | -----: |
| 内容 1 | 内容 2 | 内容 3 |
```

### 按钮元素

#### 多彩按钮

> 自定义自己想要的颜色
> <joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>

```
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>
```

> 自定义图标，达 6000+ 图标任你使用
> <joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>

```
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
```

> 自定义圆角度数，最大 18px
> <joe-abtn radius="12px" content="圆角按钮"></joe-abtn>

```
<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>
```

> 搭配在一起任意使用
> <joe-abtn color="#409eff" icon="fa-bell" href="#" radius="3px" content="搭配在一起"></joe-abtn>

```
<joe-abtn color="#409eff" icon="fa-bell" href="#" radius="3px" content="搭配在一起"></joe-abtn>
```

#### 便条按钮

> 便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样

<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>

```
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>
```

#### 复制按钮

<joe-copy
title="点击复制" content="这是复制按钮" color="green"  bold>
</joe-copy>

```
<joe-copy
    title="点击复制" content="这是复制按钮" color="green"  bold>
</joe-copy>
```

#### 标签按钮

<joe-anote
icon="fa-download"  href="#"  type="success" content="标签按钮"></joe-anote>

```
<joe-anote
      icon="fa-download"  href="#"  type="success" content="标签按钮">
</joe-anote>
```

#### 网盘按钮

```
<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>
```

<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>

### 装饰元素

#### 分割线

<hr>

#### 跑马灯

<span class="joe_lamp"></span>

```
<span class="joe_lamp"></span>
```

#### 进度条

<joe-progress percentage="50%" color="#6ce766"></joe-progress>

```
<joe-progress percentage="50%" color="#6ce766"></joe-progress>
```

#### 彩色虚线

> 可自定义虚线颜色

<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>

```
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>
```

#### Tabs

<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}单身狗的故事{/tabs-pane}
    {tabs-pane 第二个}小说家的故事{/tabs-pane}
  </div>
</joe-tabs>

```
<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}安然无恙{/tabs-pane}
    {tabs-pane 第二个}身体健康{/tabs-pane}
  </div>
</joe-tabs>
```

#### 时间线

<joe-timeline>
 <div class="_tpl">
   {timeline-item 2020}10元{/timeline-item}
   {timeline-item 2021}20元{/timeline-item}
   {timeline-item 2022}100元{/timeline-item}
 </div>
</joe-timeline>

```
<joe-timeline>
 <div class="_tpl">
   {timeline-item 2020}1000元{/timeline-item}
   {timeline-item 2021}2000元{/timeline-item}
   {timeline-item 2022}100000元{/timeline-item}
 </div>
</joe-timeline>
```

#### 评论后可见

<joe-hide></joe-hide>

```
<joe-hide></joe-hide>
```

#### 渲染原始内容

> 主题默认对常用的 HTML 标签进行了样式美化，但有时候你可能不想应用这些样式。比如你想富文本内容中的样式能够原样展示，那么就需要用到这个标签来承载你的内容，该标签内的内容将 不会被外部样式和脚本污染，反之亦然。

<joe-raw-content>
  <div id="_raw">
    <div
      style="padding: 1px 10px;background: linear-gradient(45deg, #329891, #ffe266);"
    >
      <h3 style="color:blue;font-style:italic">
        俺是个3级标题，我有自己的样式
      </h3>
      <p>我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的</p>
    </div>
  </div>
</joe-raw-content>

```
<joe-raw-content>
  <div id="_raw">
    <div
      style="padding: 1px 10px;background: linear-gradient(45deg, #329891, #ffe266);"
    >
      <h3 style="color:blue;font-style:italic">
        俺是个3级标题，我有自己的样式
      </h3>
      <p>我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的</p>
    </div>
  </div>
</joe-raw-content>
```

#### emoji 表情

> 列出一些通用表情元素，更多请[参见这里](https://bbchin.com/s/emoji)

### 媒体元素

#### 图片预览

<img  src="/upload/2022/04/minterjia.jpg" width="200px" height="200px">

#### 视频播放器

```
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4">
</joe-dplyer>
```

#### Bilibili 视频

<joe-bilibili bvid="BV1sZ4y1k7dP"></joe-bilibili>

```
<joe-bilibili bvid="BV1sZ4y1k7dP"></joe-bilibili>
```

#### PDF 预览

```
<joe-pdf  src="https://bbchin.com/upload/2022/03/Node%E7%9A%84%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0-0a7b571b1a5b4a0d8f810a253afe7077.pdf">
</joe-pdf>
```

```
<embed
      src="pdf链接"
      type="application/pdf"
      width="100%"
      height="800px"
    />
```

#### 网易云歌单

<joe-mlist id="6800335663"></joe-mlist>

```
<joe-mlist id="6800335663"></joe-mlist>
```

#### 网易云单曲

<joe-music id="1303046498"></joe-music>

```
<joe-music id="1303046498"></joe-music>
```

#### 音频播放器

<joe-mp3
name="天生狂野-柴古唐斯主题曲"
url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3" theme="red" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay>
</joe-mp3>

```
<joe-mp3
name="天生狂野-柴古唐斯主题曲"
url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3" theme="red" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay>
</joe-mp3>
```

### 提示元素

#### 消息提示

<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>

```
<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>
```

### 数学公式

> 主题已经提供了对 `数学公式` 和 `Mermaid图形` 的支持，数学公式使用 `Katex` 进行渲染，默认为关闭状态，需要手动打开。

必须先在 后台管理-外观-主题设置-文章页 中启用 数学公式支持

```
$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$
$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$
```

$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

### Mermaid 图形

> 对于要展示 `时序图、UML类图、甘特图` 等的场景，需要使用代码块包裹内容，并指定语言类型为 `mermaid`，`Halo` 会自动将它转换为 `svg` 给前台展示。（下面的示例是一个 `UML类图`，更多用法大家可以去 `Mermaid` 仓库 查看）。

```mermaid
classDiagram

Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
```

### 注意事项！！！

> 以上大部分为 `webcomponents` 组件，且仅在使用 `halo-theme-joe2.0` 主题时才能生效，请根据实际情况使用。
> 组件定义文件见主题目录下的 `source/js/custom.js`

> 转自[ Joe2.0 样式指南](https://bbchin.com/archives/style-guideline)

侧边栏和首页文章卡片顶部添加mac操作栏

mac操作栏添加代码步骤

侧边栏添加mac操作栏
进入`themes/theme-Joe3/templates/modules/widgets/asideWidget.html`
在指定位置添加`<span class="title-right_icon"></span>`
首页文章卡片顶部添加mac操作栏
进入`/themes/theme-Joe3/templates/index.html`
在指定位置添加`<span class="title-right_icon"></span>`

mac操作栏css代码如下

/* 侧边栏的卡片添加一个仿mac操作栏 */
.joe_aside__item .title-right_icon {
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 11px;
    height: 11px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 55px;
    top: 17px;
} 


/*文章目录mac操作栏*/
.toc-container .title-right_icon {
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 11px;
    height: 11px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 55px;
    top: 17px;
}

/*首页文章卡片顶部mac操作栏*/
.joe_index__title-notice .title-right_icon {
    position: relative;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 11px;
    height: 11px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 550px;
}

Moe备案添加

<!-- Moe备案修改开始 -->
<div class="site_life">
<i class="joe-font joe-icon-unreal"></i>
<a href="https://icp.gov.moe/?keyword=20220522" target="_blank" style="text-align: center;text-decoration: none;">
萌ICP备20220522号(●'◡'●)ﾉ♥</a>
</div>
<!-- Moe备案修改结束 -->

PIX主题美化

满屏雪花飘落特效代码(主题设置底部HTML代码添加)

<!-- 雪花飘落特效开始 -->
<script src="https://unpkg.com/magic-snowflakes@6.0.1/dist/snowflakes.min.js"></script>
<script>var sf = new Snowflakes({color: "#CCCCCC"});</script>
<!-- 雪花飘落特效结束 -->

右下角蒲公英摇动效果(主题设置底部HTML代码添加)

图片链接地址：https://minterjia.com/upload/20241002121534.png

<!-- 页脚蒲公英开始 -->
<style>
  @media screen and (max-width:600px) {
    .dandelion {
      display: none !important;
    }
  }

  .dandelion span {
    pointer-events: none;
    display: block;
    position: fixed;
    z-index: 9999999999;
    bottom: 0px;
    background-image: url('/upload/1667906264482ea2208363852e846-buzspris.png');
    background-repeat: no-repeat;
    _background: none;
    -webkit-animation: ball-x 3s linear 2s infinite;
    -moz-animation: ball-x 3s linear 2s infinite;
    animation: ball-x 3s linear 2s infinite;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    transform-origin: bottom center;
  }

  .dandelion .bigdan {
    width: 64px;
    height: 115px;
    right: 41px;
    background-position: -86px -36px;
    border: 0px solid 
#fff;
  }

  .dandelion .smalldan {
    width: 36px;
    height: 60px;
    right: 88px;
    background-position: 0 -90px;
    border: 0px solid 
#fff;
  }

  @keyframes ball-x {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(5deg);
    }

    50% {
      transform: rotate(0deg);
    }

    75% {
      transform: rotate(-5deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  @-webkit-keyframes ball-x {
    0% {
      -webkit-transform: rotate(0deg);
    }

    25% {
      -webkit-transform: rotate(5deg);
    }

    50% {
      -webkit-transform: rotate(0deg);
    }

    75% {
      -webkit-transform: rotate(-5deg);
    }

    100% {
      -webkit-transform: rotate(0deg);
    }
  }

  @-moz-keyframes ball-x {
    0% {
      -moz-transform: rotate(0deg);
    }

    25% {
      -moz-transform: rotate(5deg);
    }

    50% {
      -moz-transform: rotate(0deg);
    }

    75% {
      -moz-transform: rotate(-5deg);
    }

    100% {
      -moz-transform: rotate(0deg);
    }
  }
</style>
<div class="dandelion"><span class="smalldan"></span><span class="bigdan"></span></div>
<!-- 页脚蒲公英结束 -->

左下角看板娘图片GIF(主题设置底部HTML代码添加)

图片链接地址：https://minterjia.com/upload/20241002121535.gif

<!-- 页脚看板娘图片GIF结束 -->
<i style="background-image:url('/upload/cute.gif');
display: inline-block;width: 210px;height: 300px;
position: fixed;bottom: 0;z-index: 110;background-size: 100%;">
</i>
<!-- 页脚看板娘图片GIF结束 -->

时钟效果(侧边栏自定义)

<canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>
<script>
    (function(){var t=820;var a=250;var r=7;var n=10;var e=.65;var f;var o=[];const v=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];var h=[];var u=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]];function l(t){var a=[];f.fillStyle="#005EAC";var r=new Date;var e=70,o=30;var v=r.getHours();var u=Math.floor(v/10);var l=v%10;a.push({num:u});a.push({num:l});a.push({num:10});var c=r.getMinutes();var u=Math.floor(c/10);var l=c%10;a.push({num:u});a.push({num:l});a.push({num:10});var M=r.getSeconds();var u=Math.floor(M/10);var l=M%10;a.push({num:u});a.push({num:l});for(var p=0;p<a.length;p++){a[p].offsetX=e;e=m(e,o,a[p].num,t);if(p<a.length-1){if(a[p].num!=10&&a[p+1].num!=10){e+=n}}}if(h.length==0){h=a}else{for(var C=0;C<h.length;C++){if(h[C].num!=a[C].num){s(a[C]);h[C].num=a[C].num}}}i(t);g();return r}function s(t){var a=t.num;var n=u[a];for(var e=0;e<n.length;e++){for(var f=0;f<n[e].length;f++){if(n[e][f]==1){var h={offsetX:t.offsetX+r+r*2*f,offsetY:30+r+r*2*e,color:v[Math.floor(Math.random()*v.length)],g:1.5+Math.random(),vx:Math.pow(-1,Math.ceil(Math.random()*10))*4+Math.random(),vy:-5};o.push(h)}}}}function i(t){for(var a=0;a<o.length;a++){t.beginPath();t.fillStyle=o[a].color;t.arc(o[a].offsetX,o[a].offsetY,r,0,2*Math.PI);t.fill()}}function g(){var n=0;for(var f=0;f<o.length;f++){var v=o[f];v.offsetX+=v.vx;v.offsetY+=v.vy;v.vy+=v.g;if(v.offsetY>a-r){v.offsetY=a-r;v.vy=-v.vy*e}if(v.offsetX>r&&v.offsetX<t-r){o[n]=o[f];n++}}for(;n<o.length;n++){o.pop()}}function m(t,a,n,e){var f=u[n];for(var o=0;o<f.length;o++){for(var v=0;v<f[o].length;v++){if(f[o][v]==1){e.beginPath();e.arc(t+r+r*2*v,a+r+r*2*o,r,0,2*Math.PI);e.fill()}}}e.beginPath();t+=f[0].length*r*2;return t}var c=document.getElementById("canvas");c.width=t;c.height=a;f=c.getContext("2d");var M=new Date;setInterval(function(){f.clearRect(0,0,f.canvas.width,f.canvas.height);l(f)},50)})();
</script>

pix页脚闪烁效果

<!-- 页脚闪烁效果开始 -->
<style>
@keyframes colorChange {
  0%   { color: red; }
  50%  { color: blue; }
  100% { color: green; }
}
@-webkit-keyframes shining {
from {text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;}
to {text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;}
}
a[href="https://www.halo.run"].hover\:underline::after {
  content: " Pro";
}
a[href="https://www.halo.run"]{
  font-weight: bold;
  animation: colorChange 0.2s infinite alternate, shining 0.2s 
  alternate infinite;
}
</style>
<!-- 页脚闪烁效果结束 -->

明月浩空音乐

<!-- 米尔嘉音乐开始 -->
<!-- <script type="text/javascript" id="myhk" src="https://myhkw.cn/api/player/166159348587" key="166159348587" m="1"></script> -->
<!-- 米尔嘉音乐结束 -->

样式修改

<!-- 样式修改开始 -->
<style type="text/css">
/*滚动条显示样式*/  
::-webkit-scrollbar-thumb{
   background-color:#FF6666;  /*更改喜欢的十六进制颜色*/
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*滚动条大小*/ 
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*滚动框背景样式*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
/* 背景图 */
body {
  background-image: url('https://wuyang.top/upload/bg-w.svg');
  background-attachment: fixed;
}
</style>
<!-- 样式修改结束 -->

首页弹窗

<!-- 首页弹窗开始 -->
<!--
<style>
    /* 弹窗背景遮罩 */
    #custom-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        /* 加深遮罩透明度 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(5px);
    }

    /* 弹窗内容容器 */
    #custom-popup {
        background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
        /* 使用深色渐变背景 */
        color: #f0f0f0;
        /* 更改文字颜色为浅色 */
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        /* 加深阴影效果 */
        font-family: '荆南波波黑-Bold', sans-serif;
        max-width: 500px;
        width: 90%;
        text-align: center;
        position: relative;
        animation: fadeIn 0.6s ease-out;
        will-change: opacity, transform;
        overflow: hidden;
        /* 以防装饰元素溢出 */
    }

    /* 弹窗标题 */
    #custom-popup h2 {
        font-size: 24px;
        margin-bottom: 15px;
        font-weight: 700;
        color: #ffffff;
        /* 白色标题 */
    }

    /* 弹窗描述 */
    #custom-popup p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 25px;
        color: #dddddd;
        /* 浅灰色 */
    }

    /* 欢迎文字 */
    #custom-popup .welcome-text {
        font-size: 28px;
        font-weight: 700;
        color: #ff69b4;
        /* 使用鲜艳的颜色作为点缀色，例如粉红色 */
        margin-bottom: 20px;
    }

    /* 装饰性元素 */
    #custom-popup .decorative {
        font-size: 18px;
        margin-top: 10px;
        color: #cccccc;
        /* 浅灰色 */
    }

    /* 装饰性星星 */
    #custom-popup .decorative-stars {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 60px;
        /* 增大星星大小 */
        height: 60px;
        background: url('https://path-to-your-star-icon.png') no-repeat center center;
        background-size: contain;
        animation: twinkle 3s infinite;
        opacity: 0.8;
        /* 提高不透明度 */
    }

    /* 增加更多星星（可选） */
    #custom-popup::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: -10px;
        width: 60px;
        height: 60px;
        background: url('https://path-to-your-star-icon.png') no-repeat center center;
        background-size: contain;
        animation: twinkle 4s infinite;
        opacity: 0.6;
    }

    /* 粒子背景动画 */
    #custom-popup::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: transparent;
        pointer-events: none;
        background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
        /* 使用白色星星 */
        background-size: 20px 20px;
        animation: moveBackground 10s linear infinite;
        opacity: 0.3;
        /* 增加不透明度 */
    }

    /* 按钮容器 */
    #custom-popup .buttons {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    /* 按钮样式 */
    #custom-popup .buttons button {
        padding: 12px 30px;
        font-size: 16px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        transition: background 0.3s, transform 0.2s, box-shadow 0.3s ease, color 0.3s ease;
        font-family: '荆南波波黑-Bold', sans-serif;
        position: relative;
        overflow: hidden;
        color: #ffffff;
        /* 按钮文字颜色为白色 */
        background: #8A2BE2;
        /* 唯美的紫色 */
        box-shadow: 0 0 10px rgba(135, 206, 250, 0.5);
        /* 添加柔和的蓝色光晕 */
    }

    /* 默认脉冲效果 */
    #custom-popup .buttons button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        /* 增大脉冲半径 */
        height: 30px;
        background: rgba(135, 206, 250, 0.4);
        /* 柔和的蓝色 */
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    /* 悬停时的波纹效果 */
    #custom-popup .buttons button::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(135, 206, 250, 0.4), transparent);
        /* 渐变波纹使用柔和的蓝色 */
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    }

    #custom-popup .buttons button:hover::after {
        width: 300%;
        height: 300%;
        opacity: 1;
    }

    /* 悬停时按钮效果 */
    #custom-popup .buttons button:hover {
        box-shadow: 0 0 20px rgba(135, 206, 250, 0.8);
        /* 增强蓝色光晕 */
        transform: translateY(-2px) scale(1.05);
        /* 增加缩放效果 */
        color: #e0ffff;
        /* 文字颜色变化为柔和的天蓝色 */
    }

    /* 脉冲动画 */
    @keyframes pulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.5;
        }

        50% {
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 0;
        }

        100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.5;
        }
    }

    /* 星星闪烁动画 */
    @keyframes twinkle {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    /* 粒子背景动画 */
    @keyframes moveBackground {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* 渐入动画 */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.8) rotate(-10deg);
        }

        to {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    /* 淡出动画 */
    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        to {
            opacity: 0;
            transform: scale(0.8) rotate(10deg);
        }
    }

    /* 缩放动画 */
    @keyframes shrink {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(0.8);
        }
    }

    /* 不再提醒按钮 */
    #custom-popup .buttons .no-remind {
        background: #555555;
        /* 深灰色 */
        color: #ffffff;
        /* 白色文字 */
        box-shadow: 0 0 10px rgba(135, 206, 250, 0.5);
        /* 添加柔和的蓝色光晕 */
    }

    #custom-popup .buttons .no-remind:hover {
        background: #777777;
        /* 较浅灰色 */
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 0 20px rgba(135, 206, 250, 0.5);
        /* 添加蓝色光晕 */
    }

    /* 我已知晓按钮 */
    #custom-popup .buttons .acknowledge {
        background: #8A2BE2;
        /* 唯美的紫色 */
        color: #fff;
    }

    #custom-popup .buttons .acknowledge:hover {
        background: #6A0DAD;
        /* 深紫色 */
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 0 20px rgba(135, 206, 250, 0.8);
        /* 增强蓝色光晕 */
    }

    /* 粒子效果容器（可选） */
    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }

    /* 禁用背景滚动 */
    body.popup-open {
        overflow: hidden;
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
        #custom-popup {
            padding: 20px;
        }

        #custom-popup h2 {
            font-size: 20px;
        }

        #custom-popup p {
            font-size: 14px;
        }

        #custom-popup .welcome-text {
            font-size: 24px;
        }

        #custom-popup .decorative {
            font-size: 16px;
        }

        #custom-popup .buttons button {
            padding: 10px 20px;
            font-size: 14px;
        }
    }

    /* 按钮粒子效果（可选） */
    #custom-popup .buttons button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        height: 200%;
        background: transparent;
        pointer-events: none;
        background-image: radial-gradient(circle, rgba(135, 206, 250, 0.5) 1px, transparent 1px);
        /* 柔和的蓝色粒子 */
        background-size: 15px 15px;
        transform: translate(-50%, -50%) rotate(0deg);
        animation: rotateParticles 20s linear infinite;
        opacity: 0.3;
        border-radius: 50%;
    }

    @keyframes rotateParticles {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        const noReminder = localStorage.getItem('noReminder');

        if (!noReminder) {
            // 创建遮罩层
            const overlay = document.createElement('div');
            overlay.id = 'custom-popup-overlay';
            overlay.setAttribute('role', 'dialog');
            overlay.setAttribute('aria-modal', 'true');
            overlay.setAttribute('aria-labelledby', 'popup-title');

            // 创建弹窗容器
            const popup = document.createElement('div');
            popup.id = 'custom-popup';

            // 填充弹窗内容
            popup.innerHTML = `
            <h2 id="popup-title">欢迎来到浪漫宇宙</h2>
            <p>在这里，您将体验到美与自由的交汇点，充满爱与舒适的空间。</p>
            <div class="welcome-text">
                Welcome<span>₍ᐢ. ̮.ᐢ₎</span>
            </div>
            <div class="decorative">*:･. ♡</div>
            <div class="decorative-stars"></div>
            <div class="buttons">
                <button class="no-remind">不再提醒</button>
                <button class="acknowledge">我已知晓</button>
            </div>
        `;

            // 将弹窗添加到遮罩层
            overlay.appendChild(popup);

            // 将遮罩层添加到body
            document.body.appendChild(overlay);
            document.body.classList.add('popup-open'); // 禁用背景滚动

            // 如果使用particles.js，初始化粒子效果
            /*
            particlesJS('particles-js', {
                "particles": {
                    "number": { "value": 50 },
                    "color": { "value": "#ffffff" }, // 星星颜色改为白色
                    "shape": { "type": "circle" },
                    "opacity": { "value": 0.8 }, // 提高不透明度
                    "size": { "value": 3 },
                    "move": { "enable": true, "speed": 1 } // 减慢移动速度以匹配银河效果
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": { "onhover": { "enable": true, "mode": "repulse" } }
                }
            });
            */

            // 设置初始焦点
            const acknowledgeButton = popup.querySelector('.acknowledge');
            acknowledgeButton.focus();

            // 处理按钮点击事件
            const noRemindButton = popup.querySelector('.no-remind');
            acknowledgeButton.addEventListener('click', closePopup);
            noRemindButton.addEventListener('click', function () {
                localStorage.setItem('noReminder', 'true');
                closePopup();
            });

            // 关闭弹窗函数
            function closePopup() {
                // 应用淡出和缩放动画
                popup.style.animation = 'fadeOut 0.3s forwards, shrink 0.3s forwards';
                overlay.style.animation = 'fadeOut 0.3s forwards';

                // 移除弹窗和遮罩层
                setTimeout(() => {
                    if (overlay && overlay.parentNode) {
                        overlay.parentNode.removeChild(overlay);
                        document.body.classList.remove('popup-open'); // 恢复背景滚动
                    }
                }, 300); // 动画持续时间与 CSS 动画时间匹配

                // 移除键盘事件监听器
                document.removeEventListener('keydown', handleKeyDown);
            }

            // 允许通过按 Esc 键关闭弹窗
            function handleKeyDown(event) {
                if (event.key === 'Escape') {
                    closePopup();
                }
            }

            document.addEventListener('keydown', handleKeyDown);
        }
    });
</script>
<script> 
    // 屏幕宽度大于768执行 
    if (screen && screen.width > 1) { 
        // 点击 body 任何位置就播放音乐，并只执行一次 
        var body = document.querySelector('body'); 
        // 给 body 绑定 click 事件 
        body.addEventListener('click', bj);
        function bj(){ 
            // 执行播放代码 
            audiobox[0].play();//播放背景音乐 
            audioplay(); //播放后执行的函数
            body.removeEventListener("click",bj);// 给 body 解除 click 事件绑定 
        }
    }
        // 5s隐藏音乐播放器 
        trigger = setTimeout(function(){ 
            mu_box_hide();
        },300000); // 5s隐藏音乐播放器 
</script> -->
<!-- 首页弹窗结束 -->

头部炫彩特效

<!-- 头部炫彩特效开始 -->
<div id="percentageCounter"></div>
<!-- 头部炫彩特效结束 -->


//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");


//ios视频
window.onload = function() {
  var videos = document.querySelectorAll('video');
  videos.forEach(function(video) {
    video.setAttribute('playsinline', ''); 
  });
}

鼠标特效

<!-- 鼠标特效开始 -->
<style>
body{
cursor:url(https://wuyang.top/upload/Normal-Select.cur),auto;}
button,a:hover{cursor:url(https://wuyang.top/upload/Help-Select.cur),pointer;}
input{cursor:url(https://wuyang.top/upload/Text-Select.cur), text;}
textarea,input:focus{cursor:url(https://wuyang.top/upload/Handwriting.cur), text;}
</style>
<!-- 鼠标特效结束-->

Butterfly主题美化

<!-- Butterfly颜色修改开始 -->
<style>
/*#121212;#0d0d0d;#000;*/
html[data-theme=dark] {
--card-bg-color: #000;
--rl-blockquote-bg-color: #30343f;
#Butterfly{background-color: #0d0d0d;}
}
</style>
<!-- Butterfly颜色修改结束 -->

Earth主题美化

<!-- 默认主题修改开始 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@300;400;700&amp;display=swap" rel="stylesheet">
<style>
body,td,th {font-family: LXGW WenKai TC}
.text-5xl {
    display:none;
}
.bg-cover {
    background-size: 90% 90%;
}
.h-96 {
    height: 19rem;
}

.text-5xl + .text-sm{
  display:none;
}

/* 媒体查询，针对屏幕宽度小于768px的设备 */
@media (max-width: 767px) {
  .bg-cover {
    display: none;
  }
  .h-96 {
    display: none;
  }
}
</style>
<!-- 默认主题修改结束 -->


<!-- 文章样式开始 -->
<style>
[data-theme=dark] {
  --heo-secondbg: #30343f;
  #footer-banner{background: #30343f;}
  blockquote{background-color: #30343f;}
}    
</style>
<!-- 文章样式开始 -->


<!-- 页脚修改开始 -->
<style>
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

a[href="https://halo.run"].hover\:underline::after {
    content: " Pro";
}

a[href="https://halo.run"] {
    font-weight: bold;
    background-image: -webkit-linear-gradient(45deg, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
  -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: maskedAnimation 1s infinite linear;
  
}
</style>
<!-- 页脚修改结束 -->


<style>

</style>


<style>

</style>

页脚备案

<a href="https://beian.miit.gov.cn/" target="_blank" style="text-align: center;text-decoration: none;">
  苏ICP备2022028590号-1
</a>
<a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" style="text-align: center;text-decoration: none;">
  苏公网安备32072202010264号
</a>
<a href="https://icp.gov.moe/?keyword=20220285" target="_blank" style="text-align: center;text-decoration: none;">
  萌ICP备20220285号
</a>

<a href="https://icp.gov.moe/?keyword=xxxxxx" target="_blank" style="text-align: center;text-decoration: none;">
  萌ICP备xxxxxx号
</a>

<a href="https://icp.gov.moe/?keyword=xxxxxx" target="_blank">
  萌ICP备xxxxxx号
</a>

<a href="https://icp.gov.moe/?keyword=20220285" target="_blank">
  萌ICP备20220285号
</a>

<a href="https://icp.gov.moe/?keyword=20220522" target="_blank">
  萌ICP备20220522号
</a>

<a href="https://icp.gov.moe/?keyword=20241211" target="_blank">
  萌ICP备20241211号
</a>

<a href="https://icp.gov.moe/?keyword=20241130" target="_blank">
  萌ICP备20241130号
</a>

<a href="https://icp.gov.moe/?keyword=20241131" target="_blank">
  萌ICP备20241131号
</a>

页脚美化

页脚美化一（闪亮Halo Pro）

<style>
@keyframes colorChange {
  0%   { color: red; }
  50%  { color: blue; }
  100% { color: green; }
}
@-webkit-keyframes shining {
from {text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;}
to {text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;}
}
a[href="https://halo.run"].hover\:underline::after {
  content: " Pro";
}
a[href="https://halo.run"]{
  font-weight: bold;
  animation: colorChange 0.2s infinite alternate, shining 0.2s 
  alternate infinite;
}
</style>

页脚美化二（闪亮Halo Pro + 版本号）

<script>
document.addEventListener('DOMContentLoaded', function() {
const generatorContent = document.querySelector('meta[name="generator"]').getAttribute('content').replace("Halo ", "' Pro " )+ "'";
document.documentElement.style.setProperty('--version-information', generatorContent);
});
</script>
<style>
@keyframes colorChange {
  0%   { color: red; }
  50%  { color: blue; }
  100% { color: green; }
}
@-webkit-keyframes shining {
from {text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;}
to {text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;}
}
footer a[href="https://halo.run"].hover\:underline::after {
content: var(--version-information);
}
footer a[href="https://halo.run"] {
font-weight: bold;
  animation: colorChange 0.2s infinite alternate, shining 0.2s 
  alternate infinite;
}
</style>

页脚美化三（土豪金滚动特效Halo Pro）

<style>
@keyframes maskedAnimation {
0% {background-position: 0 0;}
100% {background-position: -100% 0;}
}
a[href="https://halo.run"].hover\:underline::after {
    content: " Pro";
}
a[href="https://halo.run"] {
font-weight: bold;
background-image: -webkit-linear-gradient(left, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 1s infinite linear;
}
</style>

页脚美化四（土豪金滚动特效Halo Pro + 版本号）

<script>
document.addEventListener('DOMContentLoaded', function() {
const generatorContent = document.querySelector('meta[name="generator"]').getAttribute('content').replace("Halo ", "' Pro " )+ "'";
document.documentElement.style.setProperty('--version-information', generatorContent);
});
</script>
<style>
@keyframes maskedAnimation {
0%{background-position: 0 0;}
100% {background-position: -100% 0;}
}
footer a[href="https://halo.run"].hover\:underline::after {
content: var(--version-information);
}
footer a[href="https://halo.run"] {
font-weight: bold;
background-image: -webkit-linear-gradient(left, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 1s infinite linear;
}
</style>

页脚美化五（土豪金滚动特效Halo 3 Ultra Pro Max 专业版 + 版本号）

<script>
document.addEventListener('DOMContentLoaded', function() {
const generatorContent = document.querySelector('meta[name="generator"]').getAttribute('content').replace("Halo ", "' 3 Ultra Pro Max 专业版 " )+ "'";
document.documentElement.style.setProperty('--version-information', generatorContent);
});
</script>
<style>
@keyframes maskedAnimation {
0%{background-position: 0 0;}
100% {background-position: -100% 0;}
}
footer a[href="https://halo.run"].hover\:underline::after {
content: var(--version-information);
}
footer a[href="https://halo.run"] {
font-weight: bold;
background-image: -webkit-linear-gradient(left, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 1s infinite linear;
}
</style>

页脚美化六(使用一)

<style>
@keyframes colorChange {
  0%   { color: red; }
  50%  { color: blue; }
  100% { color: green; }
}
@-webkit-keyframes shining {
from {text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;}
to {text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;}
}
a[href="https://halo.run"].hover\:underline::after {
  content: " Pro ";
}
a[href="https://halo.run"]{
  font-weight: bold;
  animation: colorChange 0.2s infinite alternate, shining 0.2s 
  alternate infinite;
}
</style>

页脚美化六(使用二)

<script>
document.addEventListener('DOMContentLoaded', function() {
const generatorContent = document.querySelector('meta[name="generator"]').getAttribute('content').replace("Halo ", "' Pro " )+ "'";
document.documentElement.style.setProperty('--version-information', generatorContent);
});
</script>
<style>
@keyframes colorChange {
  0%   { color: red; }
  50%  { color: blue; }
  100% { color: green; }
}
@-webkit-keyframes shining {
from {text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;}
to {text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;}
}
footer a[href="https://halo.run"].hover\:underline::after {
content: var(--version-information);
}
footer a[href="https://halo.run"] {
font-weight: bold;
  animation: colorChange 0.2s infinite alternate, shining 0.2s 
  alternate infinite;
}
</style>

页脚美化六(使用三)

<style>
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

a[href="https://halo.run"].hover\:underline::after {
    content: " Pro";
}

a[href="https://halo.run"] {
    font-weight: bold;
    background-image: -webkit-linear-gradient(45deg, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
  -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: maskedAnimation 1s infinite linear;
  
}
</style>

页脚美化六(使用四)

<script>
document.addEventListener('DOMContentLoaded', function() {
const generatorContent = document.querySelector('meta[name="generator"]').getAttribute('content').replace("Halo ", "' Pro   " )+ "'";
document.documentElement.style.setProperty('--version-information', generatorContent);
});
</script>
<style>
@keyframes maskedAnimation {
0%{background-position: 0 0;}
100% {background-position: -100% 0;}
}
footer a[href="https://halo.run"].hover\:underline::after {
content: var(--version-information);
}
footer a[href="https://halo.run"] {
font-weight: bold;
background-image: -webkit-linear-gradient(left, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 1s infinite linear;
}
</style>

页脚颜色

豪金

background-image: -webkit-linear-gradient(left, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);

绿色

background-image: -webkit-linear-gradient(left, #e0f7fa, #b2dfdb 25%, #e0f7fa 50%, #b2dfdb 75%, #e0f7fa);

粉色

background-image: -webkit-linear-gradient(left, #fb7299, #ffb6c1 25%, #fb7299 50%, #ffb6c1 75%, #fb7299);

为了兼容现代浏览器，除了 -webkit-linear-gradient（主要用于旧版Safari和Chrome）之外，

应该包括标准的 linear-gradient 属性，如下所示：

background-image: linear-gradient(to right, #ffdd00, #3e2f08 25%, #ffdd00 50%, #3e2f08 75%, #ffdd00);
background-image: linear-gradient(to right, #e0f7fa, #b2dfdb 25%, #e0f7fa 50%, #b2dfdb 75%, #e0f7fa);
background-image: linear-gradient(to right, #fb7299, #ffb6c1 25%, #fb7299 50%, #ffb6c1 75%, #fb7299);

Joe主题美化

主题菜单

主题图标iconfont

主题样式指南

侧边栏和首页文章卡片顶部添加mac操作栏

PIX主题美化

满屏雪花飘落特效代码(主题设置 底部HTML代码添加)

右下角蒲公英摇动效果(主题设置 底部HTML代码添加)

左下角看板娘图片GIF(主题设置 底部HTML代码添加)

时钟效果(侧边栏自定义)

pix页脚闪烁效果

明月浩空音乐

样式修改

首页弹窗

头部炫彩特效

鼠标特效

Butterfly主题美化

Earth主题美化

页脚备案

页脚美化

页脚美化一（闪亮Halo Pro）

页脚美化二（闪亮Halo Pro + 版本号）

页脚美化三（土豪金滚动特效Halo Pro）

页脚美化四（土豪金滚动特效Halo Pro + 版本号）

页脚美化五（土豪金滚动特效Halo 3 Ultra Pro Max 专业版 + 版本号）

页脚美化六(使用一)

页脚美化六(使用二)

页脚美化六(使用三)

页脚美化六(使用四)

页脚颜色

豪金

绿色

粉色

满屏雪花飘落特效代码(主题设置底部HTML代码添加)

右下角蒲公英摇动效果(主题设置底部HTML代码添加)

左下角看板娘图片GIF(主题设置底部HTML代码添加)