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>Hao主题美化
文章blockquote颜色修改
<!-- Hao文章blockquote颜色修改开始 -->
<style>
[data-theme=dark] {
--heo-secondbg: #30343f;
#footer-banner{background: #30343f;}
blockquote{background-color: #30343f;}
}
</style>
<!-- Hao文章blockquote颜色修改结束 -->添加微信公众号页面
打开/opt/1panel/apps/halo/Halo/data/themes/theme-hao，在theme.yaml中添加页面模版
- name: 微信公众号模版
description: 微信公众号
screenshot:
file: wechat.html在/opt/1panel/apps/halo/Halo/data/themes/theme-hao/templates目录下新建wechat.html，源码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
<th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
_permalink = ${singlePage.status.permalink},
_cover = ${singlePage.spec.cover},
_excerpt = ${singlePage.status.excerpt},
_type = 'website')}"></th:block>
</th:block>
<th:block th:fragment="content">
<div class="page" id="body-wrap">
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = ${singlePage.spec.title})}"></nav>
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<!-- <h1 class="page-title">博客运营模式及公众号说明</h1> -->
<div class="rss-plan-list"><a class="rss-plan-item rss-plan-wechat"
th:href="${theme.config.wechat.wechat_link}" title="公众号"
target="_blank">
<div class="rss-plan-description">推送精选文章<br>推送全文</div>
<div class="rss-plan-info-group">
<div class="rss-plan-title">公众号订阅</div>
<div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon entered loaded"
th:src="@{/assets/images/wechat/6401bd0b742d8.png}"
data-lazy-src="https://bu.dusays.com/2023/03/03/6401bd0b742d8.png" alt="wechat"
data-ll-status="loaded">
</div>
</a>
<a class="rss-plan-item rss-plan-mail" th:href="${theme.config.wechat.mail_link}" rel="external nofollow"
title="邮件" target="_blank">
<div class="rss-plan-description">推送全部文章<br>推送封面与简介</div>
<div class="rss-plan-info-group">
<div class="rss-plan-title">邮件订阅</div>
<div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon entered loaded"
th:src="@{/assets/images/wechat/6401bd1d3751d.png}"
data-lazy-src="https://bu.dusays.com/2023/03/03/6401bd1d3751d.png" alt="wechat"
data-ll-status="loaded">
</div>
</a>
<a class="rss-plan-item rss-plan-rss" th:href="${theme.config.wechat.rss_link}" href="/rss.xml" title="rss"
target="_blank">
<div class="rss-plan-description">推送全部文章<br>推送简介</div>
<div class="rss-plan-info-group">
<div class="rss-plan-title">RSS</div>
<div class="rss-plan-info">备用订阅方式</div><img class="rss-plan-icon entered loaded"
th:src="@{/assets/images/wechat/6401bd322fc4a.png}"
data-lazy-src="https://bu.dusays.com/2023/03/03/6401bd322fc4a.png" alt="wechat"
data-ll-status="loaded">
</div>
</a>
</div>
<!-- 获取微信公众号页面自定义的内容 -->
<div class="flink" id="article-container">
<th:block th:utext="${singlePage.content.content}"></th:block>
</div>
<th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
kind = 'SinglePage',
name = ${singlePage.metadata.name},
allowComment = ${singlePage.spec.allowComment})}" />
</div>
</main>
<!-- 底部 -->
<footer th:replace="~{modules/footer}" />
<!-- 卡片顶部气泡效果 -->
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
</div>
</th:block>
</html>在/opt/1panel/apps/halo/Halo/data/themes/theme-hao/templates/assets/images/wechat目录下，上传三张图片
打开/opt/1panel/apps/halo/Halo/data/themes/theme-hao/settings.yaml，添加配置
- group: wechat
label: 微信公众号
formSchema:
- $formkit: text
name: wechat_link
label: 公众号订阅
- $formkit: text
name: mail_link
label: 邮件订阅
- $formkit: text
name: rss_link
label: RSS订阅添加在线工具页面
<div class="author-content author-content-item essayPage single" style="background:url(/upload/v178.png) left 28% / cover no-repeat !important;">
<div class="card-content">
<div class="author-content-item-tips">效率</div>
<span class="author-content-item-title">在线工具推荐</span>
<div class="content-bottom">
<div class="tips">跟 米尔嘉 一起高效的数字生活</div>
</div>
</div>
<canvas id="header_canvas" width="920" height="1014" style="position: absolute; bottom: 0px;"></canvas>
</div>
<hao-flink name="AI工具" desc="让人工智能帮助你完成枯燥的工作" style="default">
<div class="_tpl">
{chatGPT,https://chat.openai.com/,https://bu.yyds.pink/blog/img/64f0ab6c1e0c0.png,文字AI巅峰} {Midjourney,https://www.midjourney.com/home/,https://bu.yyds.pink/blog/img/64f0ab6c54f06.jpg,超级方便的AI绘画工具}
</div>
</hao-flink>添加书籍电影页面
<link rel="stylesheet" href="https://cdn.minterjia.com/css/hao.css"><script async="" data-pjax="" src="https://npm.onmicrosoft.cn/hao-theme-static@1.3.9/templates/assets/libs/canvas/bubble.js"></script><div class="author-content author-content-item toolPage single" style="background:url(/upload/v626.png) left 28% / cover no-repeat !important;">
<div class="card-content">
<div class="author-content-item-tips">收藏</div>
<span class="author-content-item-title">电影分享</span>
<div class="content-bottom">
<div class="tips">跟随米尔嘉一起探索电影</div>
</div>
</div><canvas id="header_canvas" width="1138" height="2124" style="position: absolute; bottom: 0px;"></canvas></div><h2 style="margin-bottom:12px">电影分享 (7)</h2><div class="hao-douban-show" id="hexo-douban-item3">
<div class="hao-douban-item">
<div class="hao-douban-picture" title="人生大事">
<a target="_blank" href="https://movie.douban.com/subject/35460157/" rel="external nofollow"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp" data-lazy-src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp" data-src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp" referrerpolicy="no-referrer" data-ll-status="loaded" class="entered loaded"></a>
</div>
<div class="hao-douban-info">
<div class="hao-douban-title" title="人生大事">
<a target="_blank" href="https://movie.douban.com/subject/35460157/" rel="external nofollow">人生大事</a>
</div>
<div class="hao-douban-meta">2022-07-05 / ★★★★★ 力荐</div>
<div class="hao-douban-comments">非常的感人，是一部非常值得看的电影</div>
</div>
</div>
</div>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&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=xxxx" target="_blank" style="text-align: center;text-decoration: none;">萌ICP备xxxx号</a>页脚美化
页脚美化一
<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>页脚美化二
<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>页脚美化三
<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>页脚美化四
<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 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);
评论