🌹 喇賽的人 Blog 🌹

🌹 喇低喇賽 🌹

0%

搬到 github.io 的第一篇文章

亂寫於 更新於 Disqus：
廢話字數： 13k 所需傷眼時間 ≈ 12 分鐘

 

由於以前搞 Blog 的空間 GG 了,想尋求一個窮人用得起的穩定空間,於是花些時間來用看看 github.io Google 半天一堆很複雜的文章看了很累

找個無腦又簡單的文章吧

參考這個賞心悅目的正妹文章

由於我是在 WSL 底下安裝 , 預設的 WSL 是黑底 , 我眼睛實在無法長時間看黑底 , 所以先跳去設定一下 WLS 讓他變成 Ubuntu 的樣式吧!

我們可以到這裡下載想要的 Windows Terminal Themes 的 json config 這邊選用 Ubuntu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "Ubuntu",
  "black": "#2e3436",
  "red": "#cc0000",
  "green": "#4e9a06",
  "yellow": "#c4a000",
  "blue": "#3465a4",
  "purple": "#75507b",
  "cyan": "#06989a",
  "white": "#d3d7cf",
  "brightBlack": "#555753",
  "brightRed": "#ef2929",
  "brightGreen": "#8ae234",
  "brightYellow": "#fce94f",
  "brightBlue": "#729fcf",
  "brightPurple": "#ad7fa8",
  "brightCyan": "#34e2e2",
  "brightWhite": "#eeeeec",
  "background": "#300a24",
  "foreground": "#eeeeec"
}

後來公司燈光加上反光的關係使用Ubuntu當底色眼睛實在太不舒服 , 我自己客製化一個豆沙色的 theme , 整體看起來還行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "Ubuntu Green",
  "black": "#000000",
  "red": "#cc0000",
  "green": "#4eff66",
  "yellow": "#c4a000",
  "blue": "#3465a4",
  "purple": "#75507b",
  "cyan": "#06989a",
  "white": "#ffffff",
  "brightBlack": "#000000",
  "brightRed": "#ef2929",
  "brightGreen": "#009900",
  "brightYellow": "#ff8c00",
  "brightBlue": "#729fcf",
  "brightPurple": "#ad7fa8",
  "brightCyan": "#34e2e2",
  "brightWhite": "#efefef",
  "background": "#efffef",
  "foreground": "#000000"

}

下載完以後只要在 WLS 上面按下 ctrl+` 即可開啟 settings.json 編輯 , 接著找到 schemes 放進去接著指定 Ubuntu Green就搞定啦!炫炮一點還可以設定透明度或是背景圖片.
字型部分則是使用Fira Code

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "colorScheme": "Ubuntu Green",
    "fontFace": "Fira Code",
    "cursorShape": "filledBox",
    "cursorColor" :  "#000000",
    "selectionBackground" :  "#ff0000",
    "useAcrylic": false,
    "acrylicOpacity": 1,
    "guid": "{c6eef9fx-32ac-5xdc-xxcf-aa6e8a4b1xx0}",
    "hidden": false,
    "name": "Ubuntu-18.04",
    "source": "Windows.Terminal.Wsl"
},

接著安裝 oh-my-posh 讓整體更加好看些 , 如果字型顯示錯誤可以安裝Fira Code 字型

1
2
3
4
5
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser
Import-Module posh-git
Import-Module oh-my-posh
Set-Theme Paradox

後來又發現還有 gsudo 這個好東西以後就可以直接在windows用sudo , 不過安裝完好像沒有加到 global 環境變數 , 只好手動添加

1
2
3
4
#檢查環境變數
Set-Location Env:
ls 
$env:Path

正式進入第一步 安裝 nodejs & npm 馬上就陣亡!不意外!
參考老外說明 原來是 PATH 沒設定好! 整個安裝完以後跟著正妹的步驟大概是沒太多問題 , 但最後面設定發佈到 github 要使用 SSH Key , 最後回到 github 貼上 id_rsa.pub 裡面的內容 , 最後在用 ssh 驗證是否通過.
其他教學

1
2
3
4
5
6
$ ssh-keygen -t rsa -C "yourmail"
$ cd ~
$ ls -al #看隱藏的.ssh目錄
$ cd .ssh
$ vim id_rsa.pub #進到vim把內容複製起來包含 xxx.mail 那句也要
$ ssh git@github.com #已經在github貼上金鑰後才輸入

接著開始用 Markdown Monster 編輯 source/_posts 裡面的文章內容吧 , 太久沒用 Markdown 語法可以參考這裡

這時候就可以使用以下指令在 Windows 上開啟 WLS 內的所在目錄 , 快速用 Markdown Monster 編輯 Blog 囉!

1
$ explorer.exe .

注意編輯完文章以後需要先清除原先檔案 , 另外 Chrome 的 Cache 也會有影響建議要看結果使用 Ctrl+Shift+n

1
2
3
$ hexo clean #清除靜態檔案
$ hexo g #產生檔案
$ hexo d #佈署

或是直接寫成一行

1
hexo clean && hexo g && hexo d

後面發先google seo會找不到可以參考這三篇文章讓seo啟動
參考1
網址錯誤
設定robots

加入客製化 css

在以下檔案 themes/next/source/css/main.styl 修改這段 code

1
2
3
4
5
6
7
// Custom Layer
// --------------------------------------------------
//for $inject_style in hexo-config('injects.style')
//  @import $inject_style;

//自訂
@import "_custom/custom.styl";

接著在以下資料夾 themes/next/source/css 底下建立 _custom 資料夾，並且建立 custom.styl 文件，加入自己幹話的 css 就可以了
不負責任寫壞掉的 css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
body{
	background-color:#000; 
}

/* 設定作者大頭貼 */
.site-author-image {
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border: 2px solid #41403e;
  position: relative;
  display: block;
  height: auto;
  max-width: 100%;
}
.snow1 {
  background: url("../images/snow1.png");
  background-repeat: repeat;
  width: 100%;
  height: 700px;
/* position: fiexed !important; */
  top: 0;
  left: 0;
  animation: snowOne 10s infinite linear;
  z-index: 999;
  pointer-events: none;
}
.cobweb {
    background: url(../images/cobweb.png) no-repeat;
    width: 282px;
    height: 302px;
    top: 0;
    right: 0;
    z-index: 999;
    pointer-events: none;
    position: fixed;
}
/*文章more按鈕*/
article:nth-of-type(even) .btn {
  border-bottom-left-radius: 205px 155px;
  border-bottom-right-radius: 225px 35px;
  border-top-left-radius: 55px 15px;
  border-top-right-radius: 155px 25px;
  border: 2px solid #41403e;
  position: relative;
/* background-color: #ff0000; */
}
article:nth-of-type(odd) .btn {
  border-bottom-left-radius: 85px 155px;
  border-bottom-right-radius: 225px 55px;
  border-top-left-radius: 55px 15px;
  border-top-right-radius: 155px 525px;
  border: 2px solid #41403e;
  position: relative;
/* background-color: #ff0000; */
}
/*緞帶設定*/
.content-wrap {
  border-bottom-left-radius: 85px 155px;
  border-bottom-right-radius: 225px 35px;
  border-top-left-radius: 55px 15px;
  border-top-right-radius: 155px 25px;
  border: 2px solid #41403e;
  position: relative;
  overflow: hidden;
}
.content-wrap:after {
/* color : #fff000; */
/* background-color : #000; */
  color: #000;
  background-color: #fff000;
  z-index: 99;
  font-size: 22px;
  text-align: center;
  content: '別人有緞帶我也要有';
  top: 50px;
  left: -40px;
  position: absolute;
/* position: fixed; */
  transform: rotate(-35deg);
  width: 280px;
  height: 40px;
  border-bottom-left-radius: 85px 155px;
  border-bottom-right-radius: 225px 35px;
  border-top-left-radius: 55px 15px;
  border-top-right-radius: 155px 25px;
  border: 2px solid #41403e;
}
/*設定幹話印章*/
article.post-block {
  position: relative;
}
article.post-block:before {
  z-index: 1;
  content: '';
  font-size: 22px;
  transform: rotate(10deg);
  white-space: pre;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  border: 5px dashed #d02818;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 1;
  padding: 10px;
}
article.post-block:after {
  z-index: 1;
  content: '幹話\a認證';
  font-family: '標楷體';
  font-size: 26px;
  font-weight: bold;
  color: #d02818;
  transform: rotate(40deg);
  white-space: pre;
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-radius: 50%;
  border: 5px dotted #d02818;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 1;
  padding: 10px;
}
/*防止被幹話擋住*/
.post-nav-item a {
  text-align: center;
}
/*標籤雲*/
.tag-cloud-tags a:nth-child(even) {
  border-bottom-left-radius: 85px 155px;
  border-bottom-right-radius: 225px 35px;
  border-top-left-radius: 55px 355px;
  border-top-right-radius: 155px 325px;
  border: 2px solid #41403e;
  padding: 10px;
}
.tag-cloud-tags a:nth-child(odd) {
  border-bottom-left-radius: 888888885px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 725px;
  border: 2px solid #41403e;
  padding: 10px;
}
@-moz-keyframes snowOne {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100px 750px;
  }
}
@-webkit-keyframes snowOne {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100px 750px;
  }
}
@-o-keyframes snowOne {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100px 750px;
  }
}
@keyframes snowOne {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100px 750px;
  }
}


img {
	border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;
	border: 2px solid #41403e;
	display: block;
	height: auto;
	max-width: 100%;
}

code {
	border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;
    background: #fbd4ff;
    color: #f7008d;
    padding: 5px;
}
code::selection{
	color : white;
	background: gold;
}

後來又研究一下把 back-to-top 修改成乖乖的樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*設定乖乖為 back to top 效果*/
.back-to-top{
	height:150px;
	width:150px;
	opacity:1;
	background-image:url(https://comet.noonspace.com/w61NoonSpace/kuai/PrdInfo/1908190000113_b.png);
	background-size:cover;
	bottom:-200px;
	font-size:0;
	background-color: transparent;
}
.back-to-top:hover{
	transform:rotate(10deg);
}

中元節到了 , 加上打殭屍玩很大 , 來搞個效果 , 本來以為很複雜 , 參考老外
反正就是把噪音的 gif 蓋在上面就搞定 , 老外只用一層 , 我多加上一層 , 效果更好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.noise{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	content: "";
	/* you can control opacity of noise  */
	opacity: .1;
	z-index: 1000;
	pointer-events: none;
	background: url(https://raw.githubusercontent.com/taimoorshahzada/Film-Grain-Noise-Effect-on-Background-in-Website-using-Pure-CSS/main/noise.gif);
}

.noise2{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	content: "";
	/* you can control opacity of noise  */
	opacity: .1;
	z-index: 1000;
	pointer-events: none;
	background: url(https://c.tenor.com/8q6gzdjYlCcAAAAC/white-noise-error.gif) ;
}

備份 md 檔

搞了一陣子發現原來 hexo 只會把 public 資料夾底下的內容推到 git 上面 , 想要備份 md 檔需要另外開分支 , 在此筆記一下

1
2
3
4
5
6
git checkout -b backup
git commit -m "backup"
#以我為例
#git remote add origin git@github.com:weber87na/weber87na.github.io.git
git remote add origin git@github.com:yourname/yourname.github.io.git
git push --set-upstream origin backup

加入喇賽字體

這個搞了滿久的 , 參考這篇強國高手
加入看起來喇賽的字體清松手寫體
不過我不是用原版 , 而是用這個人的版本

後來又發現這個俐方體11號看起來也是滿喇低賽的風格 , 很有馬賽克感

將 cdn 的字體定義在這裡 themes/next/layout/_partials/head/head.swig

1
2
3
4
5
6
7
8
<style>
    @font-face {
        font-family: "JasonHandwriting1-Regular";
        src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts@20210716/webfont/JasonHandwriting1-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts@20210716/webfont/JasonHandwriting1-Regular.woff) format("woff");
    }
</style>

{{ next_config() }}

強國高手這邊 .\themes\next\_config.yml 有設定 font enable , 不過因為它會吃 google 上面的 host , 所以我設定 false , 不然會去找 google

1
2
3
4
font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: false

剩下的部分 .\themes\next\source\css\_variables\base.styl 調整這邊的順序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$font-family-chinese      = "JasonHandwriting1-Regular", "PingFang SC", "Microsoft YaHei";

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, $font-family-base , monospace, $font-family-chinese;
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace, $font-family-chinese if get_font_family('codes');

礙於每個人環境不太一樣可以參考這篇或這篇

我撰寫一年多左右大概 100 篇左右申請一天就過關啦
申請過關後 , 我用 hexo 所以需要多設定 , 把 ads.txt 這個檔案丟到 source 目錄底下 , 不要丟錯到 public
我是直接把 google 自動廣告的 code 埋在 /themes/next/layout/_layout.swig 的 head 標籤內 , 大概過了 30 分鐘左右就有廣告出現在底部 注意 client 要換成你自己的

1
2
3
4
5
6
7
8
9
10
<head>
  {{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
  {% include '_partials/head/head-unique.swig' %}
  {{- next_inject('head') }}
  <title>{% block title %}{% endblock %}</title>
  {{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
  {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
  <!-- google ad -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxx" crossorigin="anonymous"></script>
</head>

如果想要在側邊也放廣告的話可以這樣設定 , 找到這個檔案 /themes/next/layout/_macro/sidebar.swig , 然後在 endif 加上你的 google ad , 我還有多加 skilltree 的廣告
我這裡額外設定固定寬度讓 google ad 看起來不要太大 , css 的 z-idnex 也要進行調整不然會被壓過去 , 看上去還勉強可以接受

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top motion-element">
  <i class="fa fa-arrow-up"></i>
  <span>0%</span>
</div>
{%- endif %}

<!-- skilltree 廣告 -->
<div id="myadblock" style="margin-top:25px;position:relative">
<div id="myadblock-title" style="position:absolute;left:-10px;top:-10px;width:100px;background-color:rgba(0,0,0,.75);color:white;">偷放工商</div>
<script src="https://skilltree.my/promotion/123-12345-678?w=350"></script>
</div>

<!-- 左側廣告 -->
<ins class="adsbygoogle"
style="display:inline-block;width:220px;height:120px;margin-top:50px;position:relative"
data-ad-client="ca-pub-123123"
data-ad-slot="6588270137">
<div style="z-index:999999;position:absolute;left:-10px;top:-10px;width:100px;background-color:rgba(0,0,0,.75);color:white;">偷放工商</div>
</ins>

<script>
	 (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
關閉