在Gridea上手体验中提到，我选定一个主题，稍微修改了一下字体为思源宋体就结束了个性化步骤。
目前使用的主题是Bitcron-pro。
本文记录其后又心血来潮突然诈尸魔改的次数。
这是在干什么，这是重燃了八百年前装修百度空间qq空间的劲头啊！！
2021/08/30
- 添加了友情链接联系本人及其对应icon.
- 修改鼠标悬浮显示、超链接的强调色。
- 归档页面，时间靠左，换强调色，缩小字号，加粗。调整标题行间距，加入下行虚线。
话痨进度1
是说我们论坛时代的遗老遗少就是啊内欸，友情链接必须放下面的哈~ 强调色大部分都改成了红色。因为本博客取了成灰的名字，非常容易联想到清人的诗句十分红处便成灰。故有此改。 归档页面还没想好要不要改成时间轴形式，待研究【
2021/08/31
- 添加live2d.
- 添加点击特效。
- 添加音乐播放器。
话痨进度2
好奇怪哦我明明我直接引用的js文件为什么不会显示waifu-tool啊【 先不管了就啊内吧【
点击特效配合主题现有的粉色圆圈还蛮和谐的！
音乐播放器是APlayer, 已有插件配置到主页还是蛮简单的。添加完了测试了一下回到顶部的按钮失效了，怎会如此……加紧抢修【 调试发现是音乐插件跟这个主题的跳转到顶部设置有冲突，等我回头看看有这个音乐插件的回到顶部是怎么做的……先关掉这个插件ORZ
2021/09/01
- 添加运行天数，及其对应emoji.
- 贫弱的我没找到全站字数统计现成的字段QQQQQ
- 修改友情链接页面。
- 修改联系博主页面。
- 添加转载协议。
- 更换了新的live2d模型。
2021/09/02
- 添加美化标签。
- 给文章增加内容过期提示。
- 侧边滚动条样式优化。
示例样式：
这里是 info 标签样式
这里是 primary 标签样式
这里是 warning 标签样式
这里是 danger 标签样式
代码部分
<div class="note info">这里是 info 标签样式</div>
<div class="note info no-icon">这里是不带符号的 info 标签样式</div>
<div class="note primary">这里是 primary 标签样式</div>
<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>
<div class="note warning">这里是 warning 标签样式</div>
<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>
<div class="note danger">这里是 danger 标签样式</div>
<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>
/* note语法示例 */
绿色
红色
黄色
灰色
蓝色
代码
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */ 红色小标签 绿色小标签 蓝色小标签 黄色小标签 灰色小标签
代码
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
代码块高亮显示示例样式。
p { color: red; }function getName() { return 'abc'; }function getName() {
return '123';
}代码
<pre><code class="language-css">p { color: red; }</code></pre>
<pre><code class="language-js">function getName() { return 'abc'; }</code></pre>
<pre><code class="language-js">function getName() {
return '123';
}</code></pre>
2021/09/03
- 代码块行数字体字号调整。
- 绑定域名，设置HTTPS + CLOUDFLARE分发节点加速。
- 设置github+jsDelivr+PicGo图床。
- 顶部阅读进度条统一成红色强调色。
话痨进度3
配置过程：为什么还不生效，为什么提示不安全！ 为什么配置CDN加速后css失效了！查了一下因为是静态文件http没法自动升https...懂了，这就把css用https引用上！ 后来发现porkbun域名商自带in beta版本开启CLOUDFLARE服务，试试！域名这个是昨天一时兴起我随便想了个按回车，跳转到域名商网站说已经被购买但未启用，您可以看看别的。我就逛了逛这个porkbun站，搜了搜风评，感觉还可以。主要是它的icon很可爱！粉红猪猪，俺心生好感！
用了アカイト（没错我就是很喜欢离原三部曲）的名字，后缀选了xyz（因为便宜）. xyz是英文26字母的最末，记得酒语是最后一杯，今晚到此为止。但是联系离原三部曲的设定就很好嗑……不错！立即购入！
顺便这个网站它支持支付宝，八月好像是在打折促销，我买了一年的域名（还不知道多久会生厌呢）只花了六块多！
图床资料很多啦就不来写了。传了一张叶叶测试，比拜比拜～
差不多就先装修到这里吧www
2021/09/04
发现在部分网络下会提示SSL问题导致无法连接，挂了梯就没事，奇怪……
2021/09/10
- 添加网页内显示豆瓣条目。
代码 <https://book.douban.com/subject/26637688/>
示例
https://book.douban.com/subject/26637688/ https://movie.douban.com/subject/26592040/
话痨进度4
因为是调用JQ的，一开始报JQ未定义的错，查了一下是要把引用句放最开始。 后来控制台又报获取不到接口数据。我就找啊，找啊，原来是给出的代码里的books跟movies都要去掉s才能正确获取到如今豆瓣的信息……瀑布汗……
2021/09/22
- 添加文本高亮效果。
效果 需要做效果的文字 需要做效果的文字
代码
CSS部分
.half_background {
font-weight: bold;
background-image: linear-gradient(to top, var(--bot) 50%, var(--top) 50%);
}
HTML调用
<span class="half_background" style="--top: transparent; --bot: yellow;">需要做效果的文字</span>
<span class="half_background" style="--top: orange; --bot: transparent;">需要做效果的文字</span>
2021/09/27
- 豆瓣条目样式修复。
- 修改站点icon.
- 修改代码块显示。
这样星星显示就正常了。图片也完美嵌入了……已经改了很久了耶（打滚）灵光一闪原来是这个主题post里的所有img都有padding属性，嗯嗯马上改掉～！
icon改成了红色的comet～!
代码块改成了 Mac Panel风格代码块。还有一点点小bug, 代码语言跟行号没有正常显示，但这样也可以所以算了（你）
2021/09/28
- 修改超链接悬停效果，加入下划虚线。
- 加入文本毛玻璃效果，悬停恢复正常。
- 修改特殊强调样式。
- 加入黑幕效果，悬停显示。
- 修改反选颜色，修改分割线颜色。样式待改。
需要做效果的文字
需要做效果的文字
你知道的太多了
代码
CSS部分
text-decoration:none;
border-bottom:1px dashed #ccc;/*下边框线，1px，虚线，颜色ccc*/
.blur {
color: transparent;
text-shadow:0px 0px 8px rgba(0,0,0,0.5)
}
.blur:hover {
color: transparent;
text-shadow:0px 0px 0px rgba(0,0,0,1)
}
.sphl {
color: #000; font-weight: bold;
box-shadow: 0px -7px 0px rgba(228,43,43,0.3) inset;
transition: all 0.3s ease;
}
.sphl:hover{
color: #000;
font-weight: bold;
box-shadow: 0px -20px 0px rgba(228,43,43,0.3) inset;
}
.shady {
color:#000;
font-weight: bold;
box-shadow: 0px -20px 0px rgba(0,0,0,1) inset;
transition: all 0.3s ease;
}
.shady:hover{
font-weight: bold;
color:#FFF;
box-shadow: 0px -20px 0px rgba(0,0,0,1) inset;
}
HTML调用
<span class="blur">需要做效果的文字</span>
<span class="sphl">需要做效果的文字</span>
<span class="shady">需要做效果的文字</span>
2021/10/03
- 修正移动端字体显示。
- 底部添加RSS订阅。
2021/10/04
- 二级域名博客+1.
2021/10/09
- 添加shake效果。
示例
Foo
Bar
Baz
Qux
Egg
Ham
Snake
Apple
Orange
Hola
Halo
我CP的饭呢！！！！在哪里！！！！
我CP的饭呢！！！！在哪里！！！！
我CP的饭呢！！！！在哪里！！！！
代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css />
<div class="shake"></div>
<div class="shake-hard"></div>
<div class="shake-slow"></div>
<div class="shake-little"></div>
<div class="shake-horizontal"></div>
<div class="shake-vertical"></div>
<div class="shake-rotate"></div>
<div class="shake-opacity"></div>
<div class="shake-crazy"></div>
<div class="shake-chunk"></div>
<ul class="shake-trigger">
<li class="shake-slow"></li>
<li></li>
<li></li>
<li class="shake-hard"></li>
<li></li>
<li class="shake"></li>
</ul>
<!-- Freeze animation at that point when :hover -->
<div class="shake-crazy shake-freeze">Hello</div>
<!-- To shake constant -->
<div class="shake-slow shake-constant"></div>
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover"></div>
2021/10/12
- 二级域名博客+1.
- 添加垂直反转效果。
示例
名字倒着写的说！
代码
.mirrorRotateVertical { /* 垂直镜像翻转 */
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*兼容IE*/
filter:FlipV;
}
<span class="mirrorRotateVertical">垂直镜像翻转</span>
2021/10/23
- 二级域名博客+1.
2021/10/24
- live2d完全本地化。
2021/10/29
- 添加表情包。
本人，纵横刀界啊不是，沉迷论坛多年，非常喜欢讲话配上表情。于是也想在博客插入常用的表情——但是捏但是捏，想要实现输入界面有表情预览，点击即可使用表情，这样类似论坛回复输入框的体验感好像依目前的状况是不可能的【 那我还搞什么七了八了的，直接把表情包往仓库一扔。路径已经固定，用的时候小一点的套一个类，大一点的套一个类，固定一下最大长宽，结束。 反正也不可能记住那么多对应代码，到时候本地文件夹看一下表情名字然后改地址就可以。暂时放了三种表情～～
示例
blob 
ac 
咪子鱼 
代码
.emoji {
max-width: 75px;
display: inline-block;
}
.blob {
max-width: 1pc;
display: inline-block;
}
/*blob*/
<span class="blob"><img src="https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/blob/ablobcheer.gif"></span>
/*ac*/
<span class="emoji"><img src="https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/acfun_emoji/ac_01.png"></span>
/*咪子鱼*/
<span class="emoji"><img src="https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/%E5%92%AA%E5%AD%90%E9%B1%BC/%E5%92%AA%E5%AD%90%E9%B1%BC_rwkk.gif"></span>
2021/11/04
- 添加灯箱效果。
想了一下暂时没有改成全局设置……因为表情包这种图片放进灯箱里很怪耶！
示例
代码
post.ejs里写进引用文件。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
in one priview
<a data-fancybox="gallery-a" href="原图1的地址">
<img class="rounded" src="缩略图1的地址" width="85%"/>
</a>
<div style="display:none"> //这样缩略图只有图1啦
<a data-fancybox="gallery-a" href="原图2的地址">
<img class="rounded" src="原图2的地址" />
</a>
</div>
2021/11/14
- 修改标题样式。
- 估狗统计排除本地预览。
- 修改客户端配置。
- 修改about页。
嗯嗯标题样式参考了部分wordpress主题！ 示例见博客内使用了多级标题的TOC目录。
代码
.md_block h1::before {
content: "▌";
margin-right: 3px;
color: #e42b2b;
}
.md_block h2 {
margin: 15px -25px;
padding: 0 25px;
line-height: 35px
}
.md_block h2::before {
content: "#";
margin-right: 5px;
color: #e42b2b;
}
.md_block h3 {
margin: 15px -25px;
padding: 0 25px;
line-height: 30px
}
.md_block h3::before {
content: ">";
margin-right: 5px;
color: rgba(228,43,43,0.7);
}
2021/11/15
- 修改表格样式
示例
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
| 单元格 | 单元格 |
代码
.md_block table {
box-sizing: border-box;
margin: 0 auto;
width: 100%;
max-width: 100%;
border-style: solid;
border-width: 1px;
background-color: transparent;
line-height: 1.7;
padding: 0;
word-break: initial;
border-collapse: collapse;
}
.md_block tbody {
border: 0
}
.md_block table th {
border-bottom: 2px solid #e42b2b;
padding: 0.5em;
}
.md_block table td {
border-top: 1px dashed #e42b2b;
padding: 0.5em;
}
2022/01/04
- 修改圣诞效果。
Gridea自带圣诞跟春节特效但是春节的很丑就是了 从塔塔那里抄来了新的下雪js! Hugo | 第三篇 Stack 主题装修记录，堂堂再临！
2022/02/20
因为仓库改私有了，以前用cdn的链接都要改一下【
- 修正js加载问题。
- 404页面统一风格。
- 修改代码高亮语言识别。
啊说一下今天发现的，如果less文件里有语法错误，output/styles文件夹里css是无法编译而且没有提示的……直接就变空文件夹了【
2022/02/27
- 修改脚注部分css样式
观察了一下结构主要涉及block ol/li以及footnote部分，修改样式如下。
代码部分
.md_block ol {
// padding-inline-start: 1rem
}
margin-bottom: .5em;
margin-left: 3px;
margin-right: 6px;
}
// padding: 2em 2em 2em 2em;
// margin:2em;
}
.footnotes ol{
border: none;
font-size: 0.91em;
border-radius: 8px;
background: #fff5f7;
// margin:2em;
}
padding-left: 2em;
}
2022/03/29
- 删除点击图片全屏的js代码
删除post.ejs中代码部分
var wxScale=new WxScale({fullPage:document.querySelector("#fullPage"),canvas:document.querySelector("#canvas")});var imgBox=document.querySelectorAll("#md_block img");for(var i=0;i<imgBox.length;i++){imgBox[i].onclick=function(e){wxScale.start(this)}};
2022/04/25
- 添加新的强调代码
示例文字 示例文字1 示例文字2 示例文字3 示例文字4
话说也从这里学到了把固定样式的颜色命名，要用的时候直接引用这个新名字就好了……这样就不用反复查找复制色号，因为自己命名比较好记。
强调代码
<span class="mark_green">示例文字1</span>
<span class="mark_yellow">示例文字2</span>
<span class="mark_orange">示例文字3</span>
<span class="mark_blue">示例文字4</span>
.mark_green {
background: repeating-linear-gradient(-45deg,var(--color_mark_green),var(--color_mark_green) 2px,transparent 2px,transparent 4px) no-repeat 0 0.95em;
display: inline;
padding: 2px;
font-weight: bold;
}
.mark_yellow {
background: repeating-linear-gradient(-45deg,var(--color_mark_yellow),var(--color_mark_yellow) 2px,transparent 2px,transparent 4px) no-repeat 0 0.95em;
display: inline;
padding: 2px;
font-weight: bold;
}
.mark_blue {
background: repeating-linear-gradient(-45deg,var(--color_mark_blue),var(--color_mark_blue) 2px,transparent 2px,transparent 4px) no-repeat 0 0.95em;
display: inline;
padding: 2px;
font-weight: bold;
}
.mark_orange {
background: repeating-linear-gradient(-45deg,var(--color_mark_orange),var(--color_mark_orange) 2px,transparent 2px,transparent 4px) no-repeat 0 0.95em;
display: inline;
padding: 2px;
font-weight: bold;
}
:root {
--color_mark_blue: #b7e3ff;
--color_mark_green: #bdf9c3;
--color_mark_yellow: #fcf69f;
--color_mark_orange: #ffddbc;
}
2022/04/29
- 添加Waline评论系统以及贰刺猿表情包咪子鱼ac娘
2022/07/05
- 添加umami数据分析统计
2022/07/07
- 添加Waline评论 贰刺猿表情包鹦鹉鸡小企鹅小豆泥
2022/08/27
- 修改友链页面移动端适配单栏
相关链接：
- Gridea上手体验
- Gridea+Github+Cloudflare, 启用二级域名增设新网页/博客
- 改用Gridea+github私有仓库+Cloudflare Pages
- 实装博客评论区的二三事
- 使用Railway服务搭建umami网页数据统计分析系统
参考资料
- icons8
- Gridea 主题常用代码片段
- Gridea博客添加live2d
- 鼠标点击特效
- Gridea博客主题添加APlayer
- 博客运行时间统计
- emoji转码工具
- Gridea博客友链页面魔改
- 在哔站右下角添加嘉然小姐的live2d模型
- Live2D 看板娘
- halo博客深度定制与美化教程
- Hugo 总文章数和总字数
- css scrollbar样式设置
- WordPress主题Sakura
- WordPress主题Argon
- WordPress主题Sakurairo
- 主题部分自定义 CSS 分享
- 文章内显示豆瓣条目
- 为 hugo 站点插入豆瓣条目的 shortcode
- GitHub + jsDelivr+PicX工具介绍
- 使用CSS或JS高亮显示一半的文本
- CSS linear-gradient() 函数
- hexo博客代码块美化
- Hugo | 看中 Stack 主题的归档功能，搬家并做修改
- hr标签样式修改及美化（css的hr标签实现精美线条）
- Get Started with the Google Fonts API
- 为Gridea主题添加思源宋体字体支持
- css如何引入外部字体
- 为Gridea主题添加Twikoo评论支持
- 为你的Gridea博客加上Valine评论系统
- Gridea 安装utterances评论系统
- 在Gridea中配置Gitalk评论系统
- 使用Gridea+Github Pages搭建自己的导航站
- CSShake
- Google Analytics排除localhost访问
- 解决Gridea客户端打不开/打开很慢以及同步不了的问题