自定义博客的ㄧˋ点点记录 | 一片痴心俱成灰
logo

一片痴心俱成灰

自定义博客的ㄧˋ点点记录

2021-08-30 Views 砺石录4363字20 min read繁

现在还不知道是亿点点还是一点点呢！

在Gridea上手体验中提到，我选定一个主题，稍微修改了一下字体为思源宋体就结束了个性化步骤。
目前使用的主题是Bitcron-pro。
本文记录其后又心血来潮突然诈尸魔改的次数。
这是在干什么，这是重燃了八百年前装修百度空间qq空间的劲头啊！！

2021/08/30

话痨进度1

是说我们论坛时代的遗老遗少就是啊内欸，友情链接必须放下面的哈~
强调色大部分都改成了红色。因为本博客取了成灰的名字，非常容易联想到清人的诗句十分红处便成灰。故有此改。
归档页面还没想好要不要改成时间轴形式，待研究【

2021/08/31

话痨进度2

好奇怪哦我明明我直接引用的js文件为什么不会显示waifu-tool啊【 先不管了就啊内吧【
点击特效配合主题现有的粉色圆圈还蛮和谐的！
音乐播放器是APlayer, 已有插件配置到主页还是蛮简单的。添加完了测试了一下回到顶部的按钮失效了，怎会如此……加紧抢修【 调试发现是音乐插件跟这个主题的跳转到顶部设置有冲突，等我回头看看有这个音乐插件的回到顶部是怎么做的……先关掉这个插件ORZ

2021/09/01

2021/09/02

示例样式：

这里是 info 标签样式
这里是不带符号的 info 标签样式
这里是 primary 标签样式
这里是不带符号的 primary 标签样式
这里是 warning 标签样式
这里是不带符号的 warning 标签样式
这里是 danger 标签样式
这里是不带符号的 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

话痨进度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

这样星星显示就正常了。图片也完美嵌入了……已经改了很久了耶（打滚）灵光一闪原来是这个主题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

2021/10/04

2021/10/09

示例

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

示例

名字倒着写的说！
代码 
.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

2021/10/24

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/ui@4.0/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

嗯嗯标题样式参考了部分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的链接都要改一下【

啊说一下今天发现的，如果less文件里有语法错误，output/styles文件夹里css是无法编译而且没有提示的……直接就变空文件夹了【

2022/02/27

观察了一下结构主要涉及block ol/li以及footnote部分，修改样式如下。

代码部分 
.md_block ol {
//    padding-inline-start: 1rem
}

.md_block li {
   margin-bottom: .5em;
   margin-left: 3px;
   margin-right: 6px;
}

.footnotes {
//  padding: 2em 2em 2em 2em; 
//  margin:2em;
}


.footnotes ol{
 border: none;
 font-size: 0.91em;
 border-radius: 8px;
 background: #fff5f7; 
//  margin:2em;
}

.footnotes footnotes-list{
 padding-left: 2em;
}

2022/03/29

删除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

2022/07/05

2022/07/07

2022/08/27

相关链接：

参考资料

EOF