-
Notifications
You must be signed in to change notification settings - Fork 0
/
feed.json
243 lines (243 loc) · 99.3 KB
/
feed.json
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
{
"version": "https://jsonfeed.org/version/1",
"title": "貓謎工坊",
"description": "Code · Thinking · ACG",
"home_page_url": "https://smilin.net",
"items": [
{
"id": "https://smilin.net/2024/08/12/algoliaOnVitepress/",
"url": "https://smilin.net/2024/08/12/algoliaOnVitepress/",
"title": "關於 algolia 在 vitepress 集成,踩雷過程",
"date_published": "2024-08-12T09:00:00.000Z",
"content_html": "<p><img src=\"/img/post/algoliaOnVitepress/01.jpg\"></p>\n<p>因為想增強網站的搜尋力度,希望連文章的內文都可以搜索到<br>剛好 <code>vitepress</code> 是支援 <code>algolia</code> 的,試著配置<br>不料遇到的問題比想像的多,網路上的教學像是缺了幾塊拼圖似的<br>索性趁著剛完成腦袋還熱呼的現在,記錄一下遇到的問題。</p>\n<span id=\"more\"></span>\n\n<hr>\n<h2 id=\"官方文檔\"><a href=\"#官方文檔\" class=\"headerlink\" title=\"官方文檔\"></a>官方文檔</h2><p>首先我們看到 <a href=\"https://vitepress.dev/zh/reference/default-theme-search#algolia-search\">vitepress 的文檔</a></p>\n<p><img src=\"/img/post/algoliaOnVitepress/02.jpg\"></p>\n<p>去 <code>Algolia</code> 申請 <code>api</code>,然後填入,完成<br>恩,看起來挺簡單的,再看看 <a href=\"https://docsearch.algolia.com/apply\">Algolia 怎麼說</a></p>\n<p><img src=\"/img/post/algoliaOnVitepress/03.jpg\"></p>\n<p>註冊完後,我們審核完畢就會寄信到你的信箱,裡面可以拿到 <code>apikey</code><br>恩…這邊也很方便阿,註冊完等大概五分鐘就收到信了</p>\n<pre><code class=\"Markdown\">Hi there 👋\n\nThanks for your interest and trust in Algolia DocSearch.\n We've received your request for https://smilin.net/LoM-wiki/, and will get back to you soon.\n\nDocSearch is built in two parts:\n- A crawler which we run in our own infrastructure every week (configurable). It follows every link in your website and extracts content from every page it traverses. It then pushes this content to an Algolia index. (Read more: https://www.algolia.com/doc/tools/crawler/getting-started/overview/ )\n- A JavaScript snippet to be inserted in your website that will bind this Algolia index to your search input and display its results in a modal UI. (Read more: https://github.com/algolia/docsearch )\n\nIf you want to find more details on how DocSearch works, take a look at the docs: https://docsearch.algolia.com/\n\nMeanwhile, let us know if you have any other questions.\n\nHave a great day,\nThe DocSearch team.\n\nDocSearch is powered by Algolia. See more at https://www.algolia.com/\n</code></pre>\n<p>大意是說 <code>algolia</code> 分成兩個部分</p>\n<ul>\n<li>他們會配置爬蟲,每周瀏覽網站</li>\n<li>為了使用 <code>algolia</code>,必須在網站配置他們的 <code>js</code></li>\n</ul>\n<p>第一部份 <code>algolia</code> 會協助,第二部份也有 <code>vitepress</code> 集成,一切看起來都很美好</p>\n<p>但是去 <code>algolia</code> 後台要拿 <code>api</code> 的時候,問題來了。</p>\n<hr>\n<h2 id=\"問題?\"><a href=\"#問題?\" class=\"headerlink\" title=\"問題?\"></a>問題?</h2><p><img src=\"/img/post/algoliaOnVitepress/04.jpg\"></p>\n<p>(註:由於筆者已經踩完雷了,圖中是已解決的樣子)</p>\n<p>只要進入後台,他就會彈出 <code>Get Start</code><br>大意是要求我們自己寫爬蟲讀取自己網站的資料,然後透過他們的工具上傳給 <code>algolia</code></p>\n<p>不對呀?爬蟲的部份<code>algolia</code>不是幫我們做好了嗎?<br>上網找了下,其他人似乎沒有遇到這個狀況,甚至可以在後台要求 <code>algolia</code> 主動重爬</p>\n<p>恩…回頭去看信中的第一點,點進他提供的網址,看看爬蟲相關的問題</p>\n<p><img src=\"/img/post/algoliaOnVitepress/05.jpg\"></p>\n<p>痾,不知道為什麼,我的帳戶不能使用他們家的爬蟲服務<br>難怪進後台就要求我主動提供資料,那沒辦法,只好自己來</p>\n<br>\n\n<h3 id=\"隔天-8-13-更新:\"><a href=\"#隔天-8-13-更新:\" class=\"headerlink\" title=\"隔天(8/13)更新:\"></a>隔天(8/13)更新:</h3><p>今天收到審核通過的信件,可以使用他們家的爬蟲了,<br>應該是筆者當天查看時,還在審核網站是否符合他們的免費支援對象</p>\n<p>往下就是自行串接爬蟲的部份了,如果還能利用他們家的爬蟲的話,以下的方案就不是必要的</p>\n<hr>\n<h2 id=\"github-action\"><a href=\"#github-action\" class=\"headerlink\" title=\"github action\"></a>github action</h2><p>由於筆者的網站放在 <code>github</code> 上<br>想到要寫 for 網站的爬蟲後,第一時間想到的就是 <code>action</code> 啦</p>\n<pre><code class=\"yml\">name: Algolia DocSearch Scraper\non:\n push:\n branches: [release-algolia]\n\njobs:\n scrape:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n\n - name: Prepare Algolia DocSearch config\n run: |\n echo '${{ secrets.ALGOLIA_CONFIG }}' > config.json\n cat config.json\n\n - name: Run DocSearch Scraper\n env:\n APPLICATION_ID: ${{ secrets.ALGOLIA_ID }}\n API_KEY: ${{ secrets.ALGOLIA_KEY }}\n run: |\n docker run \\\n -e APPLICATION_ID=$APPLICATION_ID \\\n -e API_KEY=$API_KEY \\\n -e CONFIG="$(cat config.json | jq -c .)" \\\n algolia/docsearch-scraper\n</code></pre>\n<p>透過 <code>action</code> 執行 <code>algolia/docsearch-scraper</code><br><code>id</code>跟<code>key</code>可以在前面的<code>algolia後台</code>獲得<br><code>ALGOLIA_CONFIG</code> 則是爬蟲的相關 <code>config</code>,設置方式可以<a href=\"https://docsearch.algolia.com/docs/legacy/config-file/\">參考這裡</a></p>\n<p>全都必須放在 <code>Repository secrets</code>,根據使用的環境不同,載入環境變量的方式略有差異</p>\n<p>以上做完,<code>action</code>成功執行後,<code>algolia</code>上就會有資料囉</p>\n<hr>\n<h2 id=\"後續步驟\"><a href=\"#後續步驟\" class=\"headerlink\" title=\"後續步驟\"></a>後續步驟</h2><p><img src=\"/img/post/algoliaOnVitepress/06.jpg\"></p>\n<p>前面爬完資料,第一步會自動打勾<br>由於我們的前端都由 <code>vitepress</code> 自動配置好了,剩下三步驟並不需要設定,一直送出讓他打勾就好</p>\n<p><img src=\"/img/post/algoliaOnVitepress/07.jpg\"></p>\n<p>終於來到後台,依序點選 Search -> CONFIGURE -> Index<br>找到 <code>Create Index</code> ,輸入 <code>IndexName</code><br>這裡設定的,就是最前面<code>vitepress</code>要求輸入的第三個參數</p>\n<p><img src=\"/img/post/algoliaOnVitepress/01.jpg\"></p>\n<p>都設定完畢,網頁的搜尋功能連內文都可以搜到,更加強大囉~</p>\n<hr>\n<h2 id=\"閒談\"><a href=\"#閒談\" class=\"headerlink\" title=\"閒談\"></a>閒談</h2><p>文中提到使用 <code>vitepress</code> 的網站是 <a href=\"https://smilin.net/LoM-wiki/\">活俠傳 wiki</a>,<br>也是最近筆者在休息時間把玩的小專案</p>\n<p>網站在 <code>2024-07-01</code> 建立,<br>當時是打算在這寫點文章的,<br>恰巧近期工作也忙,<br>沒甚麼時間更新這邊</p>\n<p>其實連這篇文都更新的很吃力,<br>不過想了想,<br>過幾天恐怕連這篇文怎麼動筆都不知道,<br>還是寫吧 xD</p>\n<p>建立這個網站,<br>一方面是我自己對<code>vue + vite</code>體系全家桶不太熟悉,<br>趁機學習</p>\n<p>另一方面是活俠傳真的很好玩,<br>這邊推薦大家都可以去玩。</p>\n<p>關於<code>wiki</code>的建立心路歷程甚麼的,<br>之後會再另外寫一篇的</p>\n<p>很感謝同樣喜歡活俠傳的朋友,<br>願意一同維護這個 <code>wiki</code>,<br>也歡迎志同道合的新夥伴加入。</p>\n<br>\n",
"tags": [
"node.js",
"vitepress",
"algolia",
"活俠傳"
]
},
{
"id": "https://smilin.net/2024/05/03/useTheme1/",
"url": "https://smilin.net/2024/05/03/useTheme1/",
"title": "前幾天有人詢問我用的啥主題",
"date_published": "2024-05-03T07:00:00.000Z",
"content_html": "<p><img src=\"/img/ai/letter_circle.png\"></p>\n<p>前幾天收到信,信中詢問使用的主題<br>想了下的確從沒寫過,索性紀錄一下。</p>\n<span id=\"more\"></span>\n\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"Hexo\"><a href=\"#Hexo\" class=\"headerlink\" title=\"Hexo\"></a>Hexo</h1><img width=\"128\" src=\"/img/post/useTheme1/hexo.png\">\n\n<p>首先本站使用模板為 <a href=\"https://hexo.io/zh-tw/\">Hexo</a></p>\n<p>該模板提供靜態網頁生成,<br>搭配 Github Page,或是其他免費架設平台,<br>可以輕易實現無開銷環境的長期 blog 支持</p>\n<p><code>Hexo</code> 從 2013 年開發至今,<br>筆者發文的 2 周前推出 v7.2.0 版本的 <code>Hexo</code>,<br>有著優秀的基底與長期穩定的維護。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"Icarus\"><a href=\"#Icarus\" class=\"headerlink\" title=\"Icarus\"></a>Icarus</h1><p><img src=\"/img/post/useTheme1/Icarus.png\"></p>\n<p>除了默認的設置以外,<br><code>Hexo</code> 提供自行開發主題(THEME)的接口</p>\n<p>本站使用主題為 <a href=\"https://github.com/ppoffice/hexo-theme-icarus\">Icarus</a></p>\n<p>該主題默認提供 default(白色) 跟 cyberpunk(黃色) 主題可供選用</p>\n<p>由於 Icarus 後來經過多次更迭,<br>加上筆者自己對 blog 有諸多修改,<br>如今已與原本的 Icarus 有很多差異,<br>不過仍看得出排版等元素皆承襲自 Icarus。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"星空\"><a href=\"#星空\" class=\"headerlink\" title=\"星空\"></a>星空</h1><p><img src=\"/img/post/useTheme1/01.jpg\"></p>\n<p>黑暗主題的星空背景,參考<a href=\"https://github.com/imaegoo/hexo-theme-icarus\">imaegoo</a>大大的開源代碼</p>\n<p><code>imaegoo</code> 的開源代碼同樣是從 <code>Icarus</code> 改進而來<br>如果喜歡星空背景,該開源代碼可以直接套來用</p>\n<p>不過由於筆者在此之前,已經對 blog 做過諸多修改<br>最終是自行研究該代碼後,另外自己寫 css,<br>想辦法移植過來的。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"PJAX\"><a href=\"#PJAX\" class=\"headerlink\" title=\"PJAX\"></a>PJAX</h1><p>本站的局部加載使用 PJAX,<br>同樣是另外加寫的</p>\n<p>原本網站是使用 <a href=\"https://github.com/fluid-dev/hexo-theme-fluid\">Fluid</a> 這套 <code>Hexo</code> 主題</p>\n<p>但因為 <code>Fluid</code> 並不支援局部加載,<br>自己想辦法實作後發現基底的確不適合,<br>無奈之下只好棄用。</p>\n<p>當時為了魔改 <code>Fluid</code> 還寫了篇<a href=\"https://smilin.net/2021/11/16/fluidThemeShare/\">紀錄</a>,<br>有興趣可以看看。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"Live-2D\"><a href=\"#Live-2D\" class=\"headerlink\" title=\"Live 2D\"></a>Live 2D</h1><p><img src=\"/img/post/useTheme1/03.jpg\"></p>\n<p>本站的 Live 2D 小人,<br>使用 <a href=\"https://github.com/fghrsh/live2d_demo\">fghrsh</a> 大大撰寫的開源工具</p>\n<p>該專案主要負責 live 2d 的加載,<br>與針對網頁元素互動的邏輯撰寫</p>\n<p>得益於開源專案的優勢,該工具有著許多變種,<br>同時支持多項設定自定義</p>\n<p>像本站是使用了原本的前端工具 + 後端 API 本地靜態化<br>以此來避免 憑證過期 & 後端額外開銷 等等問題。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"Gittalk-熱門評論-最新評論\"><a href=\"#Gittalk-熱門評論-最新評論\" class=\"headerlink\" title=\"Gittalk & 熱門評論 & 最新評論\"></a>Gittalk & 熱門評論 & 最新評論</h1><p><img src=\"/img/post/useTheme1/04.jpg\"></p>\n<p>Gittalk 一直都是本站的評論系統<br>他主要依賴於 Github Issue 與其 API<br>讓原本靜態的網站,彷彿支援動態的評論系統一般</p>\n<p>如果 blog 原本是使用 Github Page 架設,<br>懶一點的話可以架在同一個 Repository,<br>如此便不需花費額外的維護成本。</p>\n<br>\n\n<p>除了 Gittalk 原本的功能,<br>熱門&最新評論的 API 串接則是參考<a href=\"https://removeif.github.io/theme/%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB.html\">辣椒的醬</a>大大</p>\n<p>由於過於方便,並沒有多加修改,</p>\n<p>就是那個評論數統計,<br>當時看代碼會偷偷灌水,所以改回了原始數值。</p>\n<p>另外由於辣椒的醬大大的 blog 已經多年未有更新,<br>考慮到 <code>hexo</code>&<code>Icarus</code> 在之後有多次版本更迭<br>以剛起步來說,會更加推薦直接使用官方模板來做修改。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"明亮主題的粒子特效\"><a href=\"#明亮主題的粒子特效\" class=\"headerlink\" title=\"明亮主題的粒子特效\"></a>明亮主題的粒子特效</h1><p><img src=\"/img/post/useTheme1/02.jpg\"></p>\n<p>這部份使用 <a href=\"https://github.com/hustcc/canvas-nest.js/\">canvas-nest</a></p>\n<p>使用非常簡單,在網頁引入 js 即可<br>網路教學不少</p>\n<p>由於跟夜晚主題適配性差,<br>根據個人需求不同,要稍微調整 css。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"音樂箱\"><a href=\"#音樂箱\" class=\"headerlink\" title=\"音樂箱\"></a>音樂箱</h1><p><img src=\"/img/post/useTheme1/05.jpg\"></p>\n<p>音樂箱功能使用 <a href=\"https://github.com/DIYgod/APlayer\">Aplayer</a> 播放器</p>\n<p>非常低調地摺疊收納在網站角落,<br>按照預想,就算是多次瀏覽本站的旅客也不一定能發現</p>\n<p>畢竟音樂箱只需要服務需要聽音樂的人即可,<br>大多人瀏覽網站時也有自己在背景播放的歌曲,<br>這時候若太過強調網站自帶的音樂,顯得不識趣了些。</p>\n<p>值得一提的是,<br>本站的音樂箱,在手機可以當作歌曲列表自動播放。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"RSS\"><a href=\"#RSS\" class=\"headerlink\" title=\"RSS\"></a>RSS</h1><p><img src=\"/img/post/useTheme1/06.jpg\"></p>\n<p>本站 RSS 提供三種格式<br>分別是預設的 RSS、ATOM 與 Json Feed</p>\n<p><img src=\"/img/post/useTheme1/07.jpg\"></p>\n<p>使用 RSS 訂閱,便可即時知道網站更新了文章</p>\n<p>對筆者來說,就像是提醒自己一直都沒在更新文章</p>\n<p>看到一排去年的文章,<br>彷彿說著「再不更新就要死了!」這樣。</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"寫在後面\"><a href=\"#寫在後面\" class=\"headerlink\" title=\"寫在後面\"></a>寫在後面</h1><p>列一列大概是這些,如果有甚麼缺漏,<br>或是未來更新沒寫在這,想問的</p>\n<p>歡迎提出來,有時間便會回覆。</p>\n",
"tags": [
"日記",
"hexo"
]
},
{
"id": "https://smilin.net/2024/04/30/githubAction1/",
"url": "https://smilin.net/2024/04/30/githubAction1/",
"title": "Github Action 學習紀錄",
"date_published": "2024-04-30T07:00:00.000Z",
"content_html": "<h1 id=\"Auto-Pixai\"><a href=\"#Auto-Pixai\" class=\"headerlink\" title=\"Auto-Pixai\"></a>Auto-Pixai</h1><p><img src=\"https://raw.githubusercontent.com/Mr-Smilin/Auto-Pixai/main/public/pic/logo.png\" alt=\"auto-pixai\"></p>\n<p>之前撰寫的 <a href=\"https://github.com/Mr-Smilin/auto-pixai\">auto-pixai</a><br>經過多次調整,基本修復了大部分的 bug</p>\n<p>該專案透過爬蟲,<br>提供自動在 <a href=\"https://pixai.art/\">pixai</a> 簽到的功能</p>\n<p>考量到便利性,<br>將專案打包成 docker image,<br>實現無狀態的部屬環境,<br>最後透過 github tag 控制版本歷程。</p>\n<br>\n\n<h2 id=\"整合部屬需求\"><a href=\"#整合部屬需求\" class=\"headerlink\" title=\"整合部屬需求\"></a>整合部屬需求</h2><p>雖然 User 用起來是方便了,<br>但每次開發部版都需要進行複雜的手續..</p>\n<p>CI/CD …好..好想要 CI/CD 阿..<br>就在這麼想著的時候,想起了..</p>\n<p><strong>Github Action!</strong></p>\n<span id=\"more\"></span>\n\n<br>\n\n<h1 id=\"Github-Action\"><a href=\"#Github-Action\" class=\"headerlink\" title=\"Github Action\"></a>Github Action</h1><p><img src=\"/img/post/githubAction1/01.png\" alt=\"Github Action!\"></p>\n<p>Github Action 是 Github 提供的 CI/CD 方案</p>\n<p>由 Github 提供整合環境,<br>在統一的無狀態環境下進行整合</p>\n<p>最重要的是,它對於 public repository 完全免費!</p>\n<p><a href=\"https://docs.github.com/zh/actions/quickstart\">Github Action 官方簡中文檔</a><br>在學習 github action 的過程,<br>官方文檔幫助了我許多</p>\n<p>因為有官方翻譯,在專有名詞的學習上也不容易被混淆。</p>\n<br>\n\n<h2 id=\"需求\"><a href=\"#需求\" class=\"headerlink\" title=\"需求?\"></a>需求?</h2><p><img src=\"/img/post/githubAction1/02.jpg\"></p>\n<p>做為 CI/CD (自動整合/自動部屬) 的角色,<br>我希望他可以在我推送 release 的時候,去做幾件事——</p>\n<ul>\n<li>根據 package.json 檢查版本</li>\n<li>自動創建新版本代號</li>\n<li>根據 Dockerfile 產出 Docker image</li>\n<li>將 image 標上版號,推至 Docker Hub</li>\n</ul>\n<p>並且由於 Github Action 還提供緩存功能,<br>如果將 <code>npm install</code> 拉到 Github Action,<br>搭配緩存可以有效縮短 Dockerfile 的產出時間與大小!</p>\n<p>配上 Github Action 的一些格式後,我們還需要——</p>\n<ul>\n<li>指定 <code>node</code> 版本</li>\n<li>緩存儲存 <code>node_modules</code></li>\n<li>緩存加載 <code>node_modules</code></li>\n</ul>\n<p>根據<a href=\"https://docs.github.com/zh/actions/using-workflows/caching-dependencies-to-speed-up-workflows\">官方文檔</a>所述,<br>7 天沒使用的 cache 會自動回收,<br>並且一個 repository 的所有 cache 加總不可超出 10GB </p>\n<pre><code>- name: Cache node modules\n id: cache-node-modules\n uses: actions/cache@v3\n with:\n path: node_modules\n key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.os }}-node-\n</code></pre>\n<p>根據 package-lock.json 的變動來決定是否新建緩存,<br>否則就取出原本的 node_modules,<br>以此加速 CD 流程。</p>\n<br>\n\n<h2 id=\"過程\"><a href=\"#過程\" class=\"headerlink\" title=\"過程\"></a>過程</h2><p><img src=\"/img/post/githubAction1/03.jpg\"></p>\n<p>搭啷,經過整理後,<br>這是目前的 CI/CD 流程</p>\n<p>由於沒有實作測試,<br>僅有 release 被推送時需要 CI/CD</p>\n<p>執行首先檢查 tag ,<br>若 package 版號有變動則創建新版本</p>\n<p>同時進行 cache 的載入,<br>若是找不到 cache 則重新 <code>npm install</code></p>\n<p>兩邊都做完後,<br>進行 Dockerfile 的 building 與 pushing。</p>\n<br>\n\n<h2 id=\"結果\"><a href=\"#結果\" class=\"headerlink\" title=\"結果\"></a>結果</h2><p>大功告成!原本繁瑣的整合部屬流程</p>\n<ul>\n<li>Push New Version</li>\n<li>Dockerfile build</li>\n<li>Docker image tag</li>\n<li>Docker push tag</li>\n<li>Docker push latest</li>\n<li>…</li>\n</ul>\n<p>上面列的事情 <strong>通通不用</strong></p>\n<p>只要在 main 寫完代碼,<br>要推送版本的時候合併到 release,<br>最後再用自動產生的 tag 生成 Release 說明即可。</p>\n<br>\n\n<h1 id=\"結語\"><a href=\"#結語\" class=\"headerlink\" title=\"結語\"></a>結語</h1><p>怎麼說呢…好爽</p>\n<p>不過所謂爬蟲簽到甚麼的,<br>說白了只是個小工具</p>\n<p>藉著這次 project,<br>心血來潮地想把 repository 弄得有模有樣</p>\n<p>結果就是,<br>花在打扮(?)外觀的時間遠遠超出了爬蟲本身的開發時間</p>\n<p>感覺對 CICD 有了更深刻的了解;<br>美中不足的大概是爬蟲的測試並不好寫,<br>沒能在這次 action 中寫入自動測試,是比較可惜的。</p>\n",
"tags": [
"github",
"CI/CD"
]
},
{
"id": "https://smilin.net/2024/04/23/shareButton1/",
"url": "https://smilin.net/2024/04/23/shareButton1/",
"title": "使用 AddToAny 分享箱,踩雷過程",
"date_published": "2024-04-23T10:00:00.000Z",
"content_html": "<p><img src=\"/img/post/shareButton1/01.jpg\"></p>\n<p>網站之前有配置分享箱的系統,使用 <a href=\"https://github.com/overtrue/share.js\">sharejs</a> 依賴<br>該依賴只要套上預設即可,十分方便</p>\n<p>不過 sharejs 最新的 release 已經是 2016 年的事了…</p>\n<p>實際上有些按鈕已經過時,無法使用</p>\n<span id=\"more\"></span>\n\n<p><a href=\"https://ppoffice.github.io/hexo-theme-icarus/Plugins/Share/icarus%E7%94%A8%E6%88%B7%E6%8C%87%E5%8D%97-%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE\">關於本主題的分享箱適配</a></p>\n<p>icarus 本身是支援多種分享功能的<br>由於 sharejs 停止維護,官方建議採用別的分享功能</p>\n<br>\n\n<hr>\n<h1 id=\"AddToAny\"><a href=\"#AddToAny\" class=\"headerlink\" title=\"AddToAny\"></a>AddToAny</h1><p><img src=\"/img/post/shareButton1/addtoany_logo.svg\" alt=\"addtoany\"></p>\n<p>看了一圈,決定改用 <a href=\"https://www.addtoany.com/\">AddToAny</a></p>\n<p>其一是因為該插件支援的社群足夠多,有持續在維護</p>\n<p>與 blog 代碼沒甚麼交集,自定義客製方便</p>\n<br>\n\n<hr>\n<h1 id=\"踩雷過程\"><a href=\"#踩雷過程\" class=\"headerlink\" title=\"踩雷過程\"></a>踩雷過程</h1><p>簡單選一下想要的按鈕,產出代碼後,扔進 jsx 內</p>\n<p>到此就搞定了(超快~),build 看下輸出</p>\n<p><img src=\"/img/post/shareButton1/02.jpg\"></p>\n<p>hmmm…為什麼會是一片空白呢?</p>\n<br>\n\n<hr>\n<h2 id=\"沒有-CSS\"><a href=\"#沒有-CSS\" class=\"headerlink\" title=\"沒有 CSS ?\"></a>沒有 CSS ?</h2><p>看了一下,似乎是 css 沒有載入</p>\n<p>不過 css 這些內容應該會隨著 js 一併輸出才對</p>\n<p>花了些時間尋找問題,之後發現</p>\n<p><img src=\"/img/post/shareButton1/03.jpg\"></p>\n<p>原來是被瀏覽器擋住了,會被瀏覽器攔截主要有幾個可能性</p>\n<ul>\n<li>混和內容(Mixed Content):<br>如果網站是透過 HTTPS 協定提供服務的,而嘗試載入的資源(如 page.js)使用的是 HTTP 鏈接,那麼這種「混合內容」可能會被現代瀏覽器封鎖。 確保所有外部載入的資源都使用 HTTPS 來避免這種問題。</li>\n<li>安全策略(CSP):<br>瀏覽器可能會因為安全策略(Content Security Policy)而阻止某些腳本的載入。</li>\n<li>跨域問題(CORS):<br>服務商有可能因為沒有提供適當的跨域策略(Cross-Origin Resource Sharing),導致資源無法載入</li>\n<li>廣告攔截器:<br>一些廣告攔截器或安全相關的瀏覽器擴充功能可能會阻止諸如 AddToAny 這樣的第三方服務。</li>\n</ul>\n<p>由於我們網站跟 AddToAny 都是 https,第一點可以排除<br>本站並沒有設置 CSP (目前沒有)<br>AddToAny 這類插件沒處理好 CORS 的機率是很低的</p>\n<p>簡單排除後,比較有可能的是被廣告攔截器擋住了</p>\n<br>\n\n<p><img src=\"/img/post/shareButton1/04.jpg\"></p>\n<p>喔喔喔!總算出來了!</p>\n<br>\n\n<hr>\n<h2 id=\"廣告攔截器\"><a href=\"#廣告攔截器\" class=\"headerlink\" title=\"廣告攔截器\"></a>廣告攔截器</h2><p>試了分享功能正常,就是按鈕有點多<br>可能減少一些..之後客製 style…</p>\n<p>恩..不過這樣好像沒有解決問題阿?</p>\n<p>根據統計,全世界有至少<strong>四成</strong>的人口,常駐廣告攔截器在上網</p>\n<p>只是我看的到而已,如果其他人看不到的話就沒意義了 qq</p>\n<p>不過攔截的問題還算好解決,只要讓他不會被攔截就好了!(廢話)</p>\n<p>方法很多,最簡單的是將原本被攔截的檔案納入網域下<br>載入原本就是同域名下的資源,通常就能繞過限制了。</p>\n<pre><code><script async src="https://static.addtoany.com/menu/page.js" defer={true}></script>\n</code></pre>\n<p>根據產出的代碼來看,主要是這個檔案需要拉進來</p>\n<p><img src=\"/img/post/shareButton1/05.jpg\"></p>\n<p>整理格式,創建一個 addtoany.js 放進去<br>以 hexo 來說就是將 js 檔案放在 <code>themes/{theme_name}/source/js</code> 底下</p>\n<p>之後回到 addtoany.jsx 修改來源</p>\n<pre><code><script async src="/js/addtoany.js" defer={true}></script>\n</code></pre>\n<p>RUN!</p>\n<p><img src=\"/img/post/shareButton1/02.jpg\"></p>\n<p>失敗了!</p>\n<p><img src=\"/img/post/shareButton1/06.jpg\"></p>\n<p>載入失敗的檔案反而變多了!</p>\n<br>\n\n<hr>\n<h2 id=\"更多的廣告\"><a href=\"#更多的廣告\" class=\"headerlink\" title=\"更多的廣告\"></a>更多的廣告</h2><p>看了下失敗的內容,來源都是出自 addtoany.js,也就是剛剛新增的檔案</p>\n<p>回頭翻代碼…</p>\n<p><img src=\"/img/post/shareButton1/07.jpg\"></p>\n<p><img src=\"/img/post/shareButton1/08.jpg\"></p>\n<p>看來是原本的 page.js 引入了其他檔案<br>然後其他檔案又被攔截了…</p>\n<p>雖然有點亂,但還是好解決的</p>\n<p>首先在 <code>source</code> 目錄新增 <code>addtoany</code> 資料夾<br>將 <code>addtoany.js</code> 改名回 <code>page.js</code> ,放進 <code>addtoany</code> 資料夾<br>原本 <code>addtoany.jsx</code> 的 script 也要修改</p>\n<pre><code><script async src="/addtoany/page.js" defer={true}></script>\n</code></pre>\n<p>之後將三個攔截的檔案拷貝整理後,在 <code>source/addtoany</code> 創建同名檔案</p>\n<p>然後..然後…<br>然後在 <code>core.js</code> 引用了更多會被攔截的 url…</p>\n<p>估計是進行一些第三方 icon 的載入等等…</p>\n<br>\n\n<hr>\n<br>\n\n<h1 id=\"結語\"><a href=\"#結語\" class=\"headerlink\" title=\"結語\"></a>結語</h1><p><img src=\"/img/post/shareButton1/09.jpg\"></p>\n<p>重新修改 <code>core.js</code> 的代碼,最終是成功了</p>\n<p>但是<br>修改已經壓縮過的代碼,過程是麻煩且沒營養的<br>處理方法相當於暴力破解,也不排除往後產生其他 ERROR 的可能,故這邊不多贅述———</p>\n<br>\n\n<hr>\n<p>如果有幸你也在想辦法處理 AddToAny 的問題,又懶得架 cdn 等方式</p>\n<p>這邊提供整理後的檔案,歡迎參考。</p>\n<p><a href=\"/share_file/shareButton1/addtoany.7z\">addtoany.7z</a></p>\n<p>MD5: <code>e4c6ac982c223e6449d1d962be077bfb</code><br>SHA1: <code>a9cc39cc5e9a7d0854d63b15a4801829c1718efb</code></p>\n",
"tags": [
"hexo",
"addtoany"
]
},
{
"id": "https://smilin.net/2024/04/23/twikoo1/",
"url": "https://smilin.net/2024/04/23/twikoo1/",
"title": "最近想更換評論系統",
"date_published": "2024-04-23T03:00:00.000Z",
"content_html": "<p><img src=\"/img/post/twikoo1/twikoo-logo-home.png\" alt=\"logo\"></p>\n<p>最近想把 blog 的評論系統換了</p>\n<p>原本的 gittalk 免費,開源<br>巧妙利用 github 的 issue,在靜態網站上也能加入評論系統</p>\n<p>存在些許不方便,仍瑕不掩瑜。</p>\n<p>不過既然存在限制,總有人會想開發更好的工具<br>twikoo 就挺符合 blog 需求的</p>\n<span id=\"more\"></span>\n\n<hr>\n<h1 id=\"gittalk\"><a href=\"#gittalk\" class=\"headerlink\" title=\"gittalk\"></a>gittalk</h1><p>既然原本是用 gittalk,先說說 gittalk 的優點</p>\n<ul>\n<li>與 github page 的高度適配</li>\n<li>基於 issue 特性,綁定 github 帳戶,防止小白</li>\n</ul>\n<p>兩邊都有的優點不提,大概是這些<br>至於缺點</p>\n<ul>\n<li>因為綁在 issue,評論必須先註冊 github</li>\n<li>對中國使用者的支援較差(疑似)</li>\n</ul>\n<p><img src=\"/img/post/twikoo1/01.jpg\" alt=\"01\"></p>\n<p>而且本站基於 gittalk ,魔改了許多功能</p>\n<ul>\n<li>撈取最新留言</li>\n<li>撈取熱門留言</li>\n<li>從外部撈取文章留言數</li>\n</ul>\n<p>替換評論系統,不只是舊有的評論會消失<br>也代表著這些功能都需要重新適配,或是棄用。</p>\n<hr>\n<h1 id=\"twikoo\"><a href=\"#twikoo\" class=\"headerlink\" title=\"twikoo\"></a>twikoo</h1><p><a href=\"https://twikoo.js.org/\">官方文檔</a></p>\n<p>twikoo 與 gittalk 不同,資料存放於 MongoDB<br>意味著我們需要自行架設 DB 跟 API Server</p>\n<p>不過兩者在網路上都有許多免費資源可用,用來支持一個 blog 的運作綽綽有餘</p>\n<p>說說這個評論系統的優點</p>\n<ul>\n<li>無須登入即可留言</li>\n<li>避免騷擾留言,分別配有多種自動偵測垃圾留言的接口,也能開啟人工審核</li>\n<li>暱稱&信箱&網址 的填寫方式,很有幾十年前,傳統 blog 那味,我超愛</li>\n</ul>\n<p>至於缺點</p>\n<ul>\n<li>比起 gittalk,由於個人資料是自由填寫,相對難以得知發文者的背景</li>\n<li>與依附著 github issue 的 gittalk 相比,twikoo 於第三方架設 DB 跟 API Server 環境,長遠來看需要消耗更多的維護成本</li>\n<li>以前的評論會全部消失,嗚嗚嗚</li>\n</ul>\n<hr>\n<p><img src=\"/img/post/twikoo1/02.jpg\" alt=\"02\"></p>\n<p>基本的配置已經做好了,只是還在猶豫是否該使用</p>\n<p>個人 blog 要提高評論數還是比較難的,至少沒辦法跟社群平台競爭<br>在這個前提下,評論門檻相對高的 gittalk,這份缺點也會被不斷放大</p>\n<p>但 gittalk 同樣有著他本身天然的優勢在——</p>\n",
"tags": [
"日記",
"hexo"
]
},
{
"id": "https://smilin.net/2024/04/13/autoPixai/",
"url": "https://smilin.net/2024/04/13/autoPixai/",
"title": "自動領取 Pixai 每日獎勵",
"date_published": "2024-04-13T11:00:00.000Z",
"content_html": "<p><img src=\"/img/post/autoPixai/01.jpg\" alt=\"title\"></p>\n<p>工程網址<br><a href=\"https://github.com/Mr-Smilin/auto-pixai\">Github</a><br><a href=\"https://hub.docker.com/r/smile0301/auto-pixai\">Docker Hub</a></p>\n<p>近幾年 AI 工具日新月異<br>我也有幸接觸了 AI 繪圖的一鱗半爪</p>\n<p>其中 <a href=\"https://pixai.art/\">pixai</a> 是少有的雲端免費算圖網站</p>\n<p>在 pixai 如果對產出來的圖感到滿意的話<br>可以透過 AI 進一步運算,產出會動的圖</p>\n<span id=\"more\"></span>\n\n<hr>\n<br>\n\n<p>說是免費,其實還是有些限制的</p>\n<p>在網站上的運算行為都需要消耗點數,無論是靜態或動態</p>\n<p>而點數除了透過付費與活動取得以外<br>pixai 每日都有一萬點數可供會員領取,也就是每日獎勵</p>\n<p><img src=\"/img/post/autoPixai/02.jpg\" alt=\"每日獎勵\"></p>\n<p>只要每天領取就可以免費算圖了,整個佛心來著對吧</p>\n<p>不過筆者最喜歡花費幾個小時來搞定原本一分鐘可以做到的事情(x</p>\n<hr>\n<br>\n\n<p><a href=\"https://github.com/Mr-Smilin/auto-pixai\">auto-pixai</a></p>\n<p>輸入帳號跟密碼,該腳本執行一次就會自動進網站領取每日獎勵</p>\n<p>使用 node.js 撰寫,另有 Docker 容器化,開箱即用</p>\n<pre><code>docker pull smile0301/auto-pixai\ndocker run -e LOGINNAME=<你的帳號> -e PASSWORD=<你的密碼> --name <container-name> smile0301/auto-pixai\n</code></pre>\n",
"tags": [
"node.js",
"教學",
"docker"
]
},
{
"id": "https://smilin.net/2024/04/11/giveUp/",
"url": "https://smilin.net/2024/04/11/giveUp/",
"title": "我的人生不需要英文",
"date_published": "2024-04-11T04:00:00.000Z",
"content_html": "<p><img src=\"https://i.imgur.com/gwL59EQ.jpg\" alt=\"title\"></p>\n<p>學不會,沒動力學,沒必要學</p>\n<span id=\"more\"></span>\n\n<p>最近,大概半年,持續沒甚麼動力學習<br>只是乏味的原地踏步,工作著</p>\n<p>以前明明每天都會抽空看一點知識的</p>\n<p>原本覺得為了找到更好的工作,我應該開始加強英文,補回我以前怠惰學習的債務</p>\n<p>事實是我對這東西真的完全沒有興趣</p>\n<p>這幾天放棄學習英文後,逐漸找回了那個可以繼續對學習程式有熱忱的自己</p>\n<p>感覺有點悲哀,但又很歡喜</p>\n<p>也許這個人就是如此,既然沒辦法揠苗助長,那就順其自然吧。</p>\n",
"tags": [
"日記"
]
},
{
"id": "https://smilin.net/2023/10/27/rust_learning_02/",
"url": "https://smilin.net/2023/10/27/rust_learning_02/",
"title": "Rust 學習紀錄[2] = Rust 的 NPM",
"date_published": "2023-10-27T13:00:00.000Z",
"content_html": "<p>讓我們接著原本的進度繼續</p>\n<span id=\"more\"></span>\n\n<br>\n\n<h1 id=\"Cargo\"><a href=\"#Cargo\" class=\"headerlink\" title=\"Cargo\"></a>Cargo</h1><br>\n\n<p><code>Cargo</code> 是 <code>Rust</code> 的專案建置工具以及套件管理器<br>恩..聽起來是個 <code>npm</code></p>\n<p>我們在安裝 <code>rustup</code> 時已經一併安裝了 <code>Cargo</code><br>使用 <code>cargo --version</code> 來確認是否正確安裝</p>\n<pre><code>cargo --version // cargo 1.73.0 (9c4383fb5 2023-08-26)\n</code></pre>\n<p>沒問題的話,接著使用 <code>Cargo</code> 創建跟昨天相似的專案。</p>\n<br>\n\n<h1 id=\"創建專案\"><a href=\"#創建專案\" class=\"headerlink\" title=\"創建專案\"></a>創建專案</h1><br>\n\n<p>在專案目錄(rust_project)下輸入創建專案的指令</p>\n<p><code>cargo new _02_hello_cargo</code></p>\n<p>現在我們有名為 <code>_02_hello_cargo</code> 的資料夾,裡面結構如下</p>\n<pre><code>src\n main.rs\n.gitignore\nCargo.toml\n</code></pre>\n<p><code>src</code> - 常見程式開發檔案目錄,看就知道</p>\n<p><code>src\\main.rs</code> - 主程式</p>\n<p><code>.gitignore</code> - git 的描述文件,主要功能是防止裡面提到的檔案在 git 傳輸時被包進去(Ex:log/target)</p>\n<p><code>Cargo.toml</code> - 打開來看了下,應該是專案描述文件,對應 node 的 <code>package.json</code></p>\n<br>\n\n<h2 id=\"編譯-build\"><a href=\"#編譯-build\" class=\"headerlink\" title=\"編譯(build)\"></a>編譯(build)</h2><br>\n\n<p>試著 build 起這個專案看看<br><code>cargo build</code></p>\n<p>執行後,專案內多出了幾個檔案</p>\n<pre><code>target\n debug\n _02_hello_cargo.exe\n more debug files...\n .rustc_info.json\n CACHEDIR.TAG\nCargo.lock\n</code></pre>\n<p><code>Cargo.lock</code> - 對應 node 的 <code>package-lock.json</code></p>\n<p><code>target\\debug\\_02_hello_cargo.exe</code> - 我們產出的執行檔,debug 大概是 building 的默認方式,之後應該會有相對嚴謹的方法</p>\n<pre><code>.\\target\\debug\\_02_hello_cargo // Hello, world!\n</code></pre>\n<br>\n\n<h2 id=\"編譯並運行-run\"><a href=\"#編譯並運行-run\" class=\"headerlink\" title=\"編譯並運行(run)\"></a>編譯並運行(run)</h2><br>\n\n<p>Cargo 有提供一種命令,可以將編譯與運行合併成一個指令</p>\n<pre><code>cargo run // Hello, world!\n</code></pre>\n<p>如果開發檔案沒有修改,<code>cargo run</code> 不會重建 target<br>加上合併兩個步驟,比 <code>cargo build</code> 方便許多。</p>\n<br>\n\n<h2 id=\"檢查-check\"><a href=\"#檢查-check\" class=\"headerlink\" title=\"檢查(check)\"></a>檢查(check)</h2><br>\n\n<p>除了編譯與運行,Cargo 當然也提供了檢查命令</p>\n<pre><code>cargo check\n /**\n Checking _02_hello_cargo v0.1.0(C:\\my\\01\\git\\rust\\_02_hello_cargo)\n Finished dev [unoptimized + debuginfo] target(s) in 0.07s\n **/\n</code></pre>\n<p>單純的 <code>check</code> 比 <code>build</code> 快上許多<br>在自動化部屬等一類場景中廣泛運用。</p>\n<br>\n\n<h2 id=\"正式編譯-release\"><a href=\"#正式編譯-release\" class=\"headerlink\" title=\"正式編譯(release)\"></a>正式編譯(release)</h2><br>\n\n<pre><code>cargo build --release\n /**\n Compiling _02_hello_cargo v0.1.0 (C:\\my\\01\\git\\rust\\_02_hello_cargo)\n Finished release [optimized] target(s) in 0.36s\n **/\n</code></pre>\n<p>使用 <code>--release</code> building 的檔案會放在 <code>target\\release</code><br>與 debug 版本不同,release 的編譯過程比較久,但會最佳化產出的結果</p>\n<p>因此,使用 debug 開發可以有效降低等待編譯的時間<br>需要發佈檔案時,再使用 release。</p>\n<br>\n\n<h1 id=\"今日小結\"><a href=\"#今日小結\" class=\"headerlink\" title=\"今日小結\"></a>今日小結</h1><br>\n\n<p><code>cargo --version</code> 驗證版本</p>\n<p><code>cargo new {project_name}</code> 創建專案</p>\n<p><code>cargo build</code> 編譯專案</p>\n<p><code>cargo run</code> 編譯&運行專案</p>\n<p><code>cargo check</code> 驗證專案</p>\n<p><code>cargo build --release</code> 正式版本的編譯</p>\n",
"tags": [
"Rust"
]
},
{
"id": "https://smilin.net/2023/10/27/rust_learning_01/",
"url": "https://smilin.net/2023/10/27/rust_learning_01/",
"title": "Rust 學習紀錄[1] = 日誌中的教學",
"date_published": "2023-10-27T10:00:00.000Z",
"content_html": "<p>工欲善其事,必先利其器<br>想學一門語言,要從一篇教學文檔找起</p>\n<p><a href=\"https://doc.rust-lang.org/book/\">官方文檔</a></p>\n<p>恩,官方文檔看起來挺不錯的,就這個吧</p>\n<p>這篇文撰寫當下,文檔對應 Rust 版本為 <code>Rust 1.67.1 (released 2023-02-09) or later</code><br>如果因為版本不同造成閱讀的困擾的話,可以在學會安裝 Rust 後自行降版學習。</p>\n<span id=\"more\"></span>\n\n<br>\n\n<h1 id=\"安裝\"><a href=\"#安裝\" class=\"headerlink\" title=\"安裝\"></a>安裝</h1><br>\n\n<p>說是 Rust,其實第一個遇到的是 <code>rustup</code></p>\n<p><a href=\"https://www.rust-lang.org/tools/install\">Window 安裝 rustup</a></p>\n<p>安裝過程一直 Enter 就好,之後在 cmd 下 <code>rustc --version</code></p>\n<p>得到版本號 <code>rustc 1.73.0 (cc66ad468 2023-10-03)</code>,表示安裝成功</p>\n<p>其他比較常用的指令還有</p>\n<p>更新 Rust 版本 - <code>rustup update</code></p>\n<p>卸載 Rust 跟 rustup - <code>rustup self uninstall</code></p>\n<p>查看 Rust Doc 本機離線版 - <code>rustup doc</code></p>\n<br>\n\n<p>根據 Rust 自己的說明,約莫每兩周會有一次小版更新<br>也因此,除非目標是維護專案,理論上更新版本 & 追蹤文檔改動會很頻繁。</p>\n<br>\n\n<h1 id=\"HELLO-RUST!\"><a href=\"#HELLO-RUST!\" class=\"headerlink\" title=\"HELLO RUST!\"></a>HELLO RUST!</h1><br>\n\n<p>首先讓我們創建一個資料夾</p>\n<p><code>rust_project</code></p>\n<p>往後任何的 Rust 程式都會放在這個資料夾下<br>現在在專案資料夾下新增我們要製作的第一個 Rust 程式</p>\n<p><code>rust_project\\_01_hello_rust\\main.rs</code></p>\n<pre><code>fn main() {\n println!("Hello, Rust!");\n}\n</code></pre>\n<p>之後打開 cmd ,輸入以下</p>\n<pre><code>rustc main.rs\n.\\main.exe // 印出 Hello, Rust!\n</code></pre>\n<p>如此,我們完成了第一隻 Rust 程式。<br><del>超快!!</del><br><del>嘛、畢竟是 Hello World 嘛</del></p>\n<br>\n\n<h1 id=\"感想\"><a href=\"#感想\" class=\"headerlink\" title=\"感想\"></a>感想</h1><br>\n\n<p>首先注意到的,是執行的指令拆成了兩個<br>分別是 <strong>編譯</strong> 的行為與 <strong>執行</strong> 的行為</p>\n<p>編譯出來的檔案是 <code>.exe</code>,意味著寫好的程式不需要借助 Rust 就能運行<br>這在筆者之前的經驗中是比較少見的</p>\n<p>同樣被編譯出來的還有一個 <code>main.pdb</code><br>暫時不知道是做甚麼用的,之後學到再回來更新</p>\n<br>\n\n<p><code>println!();</code><br>在這段酷似 JAVASCRIPT 風格的 JAVA 式命名輸出語法上,突兀的出現了個 <code>!</code></p>\n<p>這是 Rust 的 <code>macro</code><br>比起 Rust 的 <code>function</code>,<code>macro</code> 更接近 JAVASCRIPT 的 <code>function</code></p>\n<p>Rust 中,存在 <code>fn(function)</code> 跟 <code>macro_rules(macro)</code><br>他們的差別主要在於 <code>function(函式)</code> 的參數數量是固定的<br>而 <code>macro(巨集)</code> 則可以動態傳入參數</p>\n<p><code>println</code> 預期要能夠傳入多個參數,當他要做格式化傳輸時</p>\n<pre><code>println!("Hello, Macro! My name is {}!", "Smilin")\n</code></pre>\n<p>比起 <code>fn</code>,<code>macro_rules</code> 顯然更符合需求。</p>\n<br>\n\n<h1 id=\"今日小結\"><a href=\"#今日小結\" class=\"headerlink\" title=\"今日小結\"></a>今日小結</h1><br>\n\n<p><code>rustc --version</code> 驗證版本</p>\n<p><code>rustup update</code> 更新 Rust</p>\n<p><code>rustup self uninstall</code> 反安裝 Rust</p>\n<p><code>rustup doc</code> 運行 Rust Local Doc</p>\n<p><code>rustc main.rs</code> 編譯 rs 檔</p>\n<p><code>.pdb</code> ???</p>\n<p><code>macro</code> 巨集 / 宏,可以傳入動態參數</p>\n<p><code>function</code> 函式 / 方法,宣告時就要規範好參數數量與型別</p>\n<br>\n\n<h1 id=\"資料參考\"><a href=\"#資料參考\" class=\"headerlink\" title=\"資料參考\"></a>資料參考</h1><br>\n\n<p><a href=\"https://doc.rust-lang.org/book/\">Rust 官方文檔</a></p>\n<p><a href=\"https://www.rust-lang.org/tools/install\">Window 安裝 rustup</a></p>\n",
"tags": [
"Rust"
]
},
{
"id": "https://smilin.net/2023/10/27/rust_learning_00/",
"url": "https://smilin.net/2023/10/27/rust_learning_00/",
"title": "Rust 學習紀錄[0] = 前言",
"date_published": "2023-10-27T04:00:00.000Z",
"content_html": "<p><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Rust_programming_language_black_logo.svg/216px-Rust_programming_language_black_logo.svg.png\" alt=\"Rust\"></p>\n<br>\n\n<p>2021 年 2 月,Rust 基金會成立</p>\n<p>以 AWS、GOOGLE 等多家資訊巨頭為首<br>因為看好 Rust 兼顧了高效能 & 安全性而投資<br>使得 Rust 這兩年有了巨大的成長。</p>\n<p>這也是為什麼,近幾年工程師無論如何不願意<br>多少也會聽過 Rust 的名號,隱隱有與 C++ 並駕齊驅的勢頭。</p>\n<span id=\"more\"></span>\n\n<p>筆者平常習慣 node.js or java 的開發,接觸 Rust 算是偶然<br>剛好想嘗試所謂能真正實現高效能程式碼(沒碰過 C++)</p>\n<p>做為學習動力,一方面會將自己的學習過程發布在 blog<br>另一方面打算在學到一個階段後,試著用 Rust 構建一個微型社群平台,當作目標。</p>\n<p>本次系列與其說是教學,更像是日記一類的東西,如果能激起看這篇文的你的興趣的話,我會很高興的。</p>\n",
"tags": [
"Rust"
]
},
{
"id": "https://smilin.net/2023/09/15/deepCopyAndShallowCopy/",
"url": "https://smilin.net/2023/09/15/deepCopyAndShallowCopy/",
"title": "淺談 js 深拷貝與淺拷貝的差異",
"date_published": "2023-09-15T04:00:00.000Z",
"content_html": "<h1 id=\"Deep-copy-和-Shallow-copy\"><a href=\"#Deep-copy-和-Shallow-copy\" class=\"headerlink\" title=\"Deep copy 和 Shallow copy\"></a>Deep copy 和 Shallow copy</h1><br>\n\n<p>先來個考題:</p>\n<pre><code>a = { foo: "bar" };\nb = a;\nb.foo = "baz";\n\nconsole.log(a.foo); // 印出?\n</code></pre>\n<span id=\"more\"></span>\n\n<details>\n<summary>答案</summary>\n<br>\nbaz\n</details>\n\n<p><br><br></p>\n<p>下一題:</p>\n<pre><code>a = { foo: "bar" };\nb = structuredClone(a); // 深拷貝\nb.foo = "baz";\n\nconsole.log(a.foo); // 印出?\n</code></pre>\n<details>\n<summary>答案</summary>\n<br>\nbar \n<br><br>\n深拷貝(Deep Copy) 可以將內層對象一併拷貝 \n</details>\n\n<p><br><br></p>\n<hr>\n<br>\n\n<h2 id=\"Shallow-copy\"><a href=\"#Shallow-copy\" class=\"headerlink\" title=\"Shallow copy\"></a>Shallow copy</h2><br>\n\n<p>淺拷貝(Shallow Copy) 與深拷貝同樣是用來拷貝物件層級,避免指向同一記憶體位置</p>\n<p>與深拷貝不同的是,淺拷貝只會複製第一層的對象,如果是 <code>Object.Object</code> 的結構就沒轍。</p>\n<br>\n\n<h3 id=\"Object-assign\"><a href=\"#Object-assign\" class=\"headerlink\" title=\"Object.assign\"></a>Object.assign</h3><br>\n\n<p><code>Object.assign</code> 屬於淺拷貝(Shallow Copy)<br>在上述案例中,可以得到跟深拷貝一樣的結果</p>\n<pre><code>a = { foo: { fpp: "bar" } };\nb = Object.assign({}, a);\nb.foo.fpp = "baz";\n\nconsole.log(a.foo.fpp); // 印出baz\n</code></pre>\n<br>\n\n<h3 id=\"解構賦值\"><a href=\"#解構賦值\" class=\"headerlink\" title=\"解構賦值\"></a>解構賦值</h3><br>\n\n<p>解構賦值是 <code>ES6</code> 以後的語法糖,同樣屬於淺拷貝</p>\n<pre><code>const a = { b: 1 };\nconst c = { ...a }; // 解構賦值\nc.b = 2;\nconsole.log(a); // { b: 1 }\n</code></pre>\n<p>得益於其精簡的代碼,實務上很常使用。</p>\n<p><br><br></p>\n<hr>\n<br>\n\n<h2 id=\"Deep-copy\"><a href=\"#Deep-copy\" class=\"headerlink\" title=\"Deep copy\"></a>Deep copy</h2><br>\n\n<p>與前面提到的淺拷貝不同,深拷貝對於深層結構也能一併複製</p>\n<br>\n\n<h3 id=\"早期的深拷貝\"><a href=\"#早期的深拷貝\" class=\"headerlink\" title=\"早期的深拷貝\"></a>早期的深拷貝</h3><pre><code>JSON.parse(JSON.stringify());\n</code></pre>\n<p>這個寫法大致上有以下缺點:</p>\n<ul>\n<li>忽略 <code>function</code></li>\n<li>忽略原形鏈</li>\n<li>忽略 <code>undefined</code></li>\n<li>子層太多會導致 <code>stack overflow</code></li>\n</ul>\n<p>儘管如此,由於已經可以處理大多狀況<br>如果不是為了性能或是特殊邏輯,此寫法已經夠用,是常見的深拷貝實現。</p>\n<br>\n\n<h3 id=\"structuredClone\"><a href=\"#structuredClone\" class=\"headerlink\" title=\"structuredClone\"></a>structuredClone</h3><p><code>structuredClone</code> 是 <code>node.js</code> 17 版以後支援的官方深拷貝實現</p>\n<p>目前各大瀏覽器默認支援此語法</p>\n<p><img src=\"https://i.imgur.com/tPXjO1o.png\" alt=\"1\"></p>\n<br>\n\n<p><code>structuredClone</code> 存在一些限制</p>\n<p>不允許結構中存在 <code>Error</code> 、 <code>Function</code> 以及 <code>DOM</code> 對象</p>\n<p>不保留 <code>RegExp</code> 對象的 <code>lastIndex</code></p>\n<p>不保留 <code>read-only</code> 等描述符,即無法限制 <code>setters</code> <code>getters</code></p>\n<p>不保留原形鏈</p>\n",
"tags": [
"javascript"
]
},
{
"id": "https://smilin.net/2023/09/11/alist-file-error/",
"url": "https://smilin.net/2023/09/11/alist-file-error/",
"title": "Alist 單檔太大上傳失敗,思路整理",
"date_published": "2023-09-11T10:00:00.000Z",
"content_html": "<p><strong>註:本文並沒有完全解決遇到的上傳問題</strong><br><strong>筆者只想到替代方案,曲線救國</strong></p>\n<br>\n\n<p>筆者是自建雲端的愛用者,目前使用 Alist</p>\n<p>前一陣子因為自身需求,添加了 Cloudflare 反向代理</p>\n<p>原本一切看起來都很美好,但某天上傳檔案時才發現不對,只要檔案大於 100 MB 就有機會遇到 413 問題。</p>\n<p><img src=\"https://i.imgur.com/rNNhTq5.png\" alt=\"1\"></p>\n<p><a href=\"https://alist.nn.ci/zh/guide/install/reverse-proxy.html\">官方的反向代理配置</a></p>\n<p>可以看到,文檔下大多也是哀鴻遍野,看來只要配置了反代很容易就會碰到這個問題</p>\n<p>尤其文檔不支援 Cloudflare,實在頭痛..</p>\n<span id=\"more\"></span>\n\n<h1 id=\"問題排查\"><a href=\"#問題排查\" class=\"headerlink\" title=\"問題排查\"></a>問題排查</h1><h2 id=\"NGINX-設定-client-max-body-size\"><a href=\"#NGINX-設定-client-max-body-size\" class=\"headerlink\" title=\"NGINX 設定 client_max_body_size\"></a>NGINX 設定 client_max_body_size</h2><p>參考資料時,大多資料都指向是 NGINX 設定的問題<br>只要將 <code>client_max_body_size</code> 上限拉高即可解決</p>\n<pre><code>server {\n .........\n location / {\n ....\n client_max_body_size 10G;\n ....\n }\n .........\n}\n</code></pre>\n<p>不過筆者並沒有使用到 NGINX,此解顯然並非這次遇到的問題</p>\n<br>\n\n<h2 id=\"Cloudflare-緩存問題\"><a href=\"#Cloudflare-緩存問題\" class=\"headerlink\" title=\"Cloudflare 緩存問題\"></a>Cloudflare 緩存問題</h2><p>爬文發現有人提到可能是 Cloudflare 緩存的問題</p>\n<p>在 Rule -> Page Rules -> Create Page Rule</p>\n<p><img src=\"https://i.imgur.com/N8gi01N.png\" alt=\"2\"></p>\n<p>之後再到 Caching -> Cache Rules -> Create rule</p>\n<p><img src=\"https://i.imgur.com/TAkvVl3.png\" alt=\"3\"></p>\n<p>設定完後再上傳,成功迴避掉 413 問題!</p>\n<br>\n\n<h1 id=\"新的問題\"><a href=\"#新的問題\" class=\"headerlink\" title=\"新的問題\"></a>新的問題</h1><p>甜美的日子沒過多久<br>雖然照著上述配置後,不會再出現 413 了,但..</p>\n<p><img src=\"https://i.imgur.com/hHjLAns.png\" alt=\"4\"></p>\n<p>馬上就遇到新的錯誤了 QQ…</p>\n<p>這個問題問 google 大神也沒甚麼好辦法<br>沒辦法囉,只好再次自己動手檢查</p>\n<h2 id=\"測試過程\"><a href=\"#測試過程\" class=\"headerlink\" title=\"測試過程\"></a>測試過程</h2><p>Error Log 只寫了網路問題,偶而會提示</p>\n<pre><code>{"message":"A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received"}\n</code></pre>\n<p>猜測是 Cloudflare 提早關閉了連線</p>\n<p>有趣的是只要同時下載檔案,上傳不會失敗</p>\n<p>開啟 Cloudflare Development Mode ,上傳失敗</p>\n<h2 id=\"Cloudflare-免費版限制\"><a href=\"#Cloudflare-免費版限制\" class=\"headerlink\" title=\"Cloudflare 免費版限制\"></a>Cloudflare 免費版限制</h2><p><img src=\"https://i.imgur.com/lm8M9jc.png\" alt=\"5\"></p>\n<p>Cloudflare 免費版用戶上傳檔案時,有著 100MB 的上限</p>\n<p>Alist 僅支援單檔上傳<br><a href=\"https://github.com/alist-org/alist/issues/5176\">github issue</a></p>\n<p>想來或許就是在這關上卡住了</p>\n<p>如開發者所說, Alist 的上傳存在一定的缺陷</p>\n<p>就算不使用 Cloudflare,直連上傳過大的檔案也有機會失敗</p>\n<p>好在除此之外功能正常,頂多不透過網頁,自行額外實現上傳方法即可(Ex:webdav/ftp/nasGui/local..)</p>\n<br>\n\n<hr>\n<p>文章參考:<br><a href=\"https://lanwp.org/12-cloudreve-nextcloud-alist-and-cloudflare_cdn/\">https://lanwp.org/12-cloudreve-nextcloud-alist-and-cloudflare_cdn/</a></p>\n",
"tags": [
"Alist",
"Cloudflare"
]
},
{
"id": "https://smilin.net/2023/09/06/alist-started/",
"url": "https://smilin.net/2023/09/06/alist-started/",
"title": "Alist 好用的自建雲端分享",
"date_published": "2023-09-06T02:00:00.000Z",
"content_html": "<p>隨著 GOOGLE / ONEDRIVE 等空間限制增多</p>\n<p>筆者轉為使用自架雲端方案一段時間,其中特別中意 Alist 的畫面</p>\n<p><img src=\"https://i.imgur.com/cwZF7fX.png\" alt=\"1\"></p>\n<p>高自定義的 UI,強大的用戶管理<br>最重要的是在目錄下默認讀取 readme.md 做介紹!</p>\n<p>整理雲端檔案,最常遇到的難題<br>就是多年後很難輕易在一堆檔案中找到自己需要的資料</p>\n<p>除此以外還支援</p>\n<ul>\n<li>元數據(載入特定目錄會跳出的訊息)</li>\n<li>文件搜索</li>\n<li>雲端掛載(GD/OD/MEGA/還有一堆..)</li>\n</ul>\n<p>使用 Alist 不僅能讓雲端變得美觀,還能很輕鬆的管理文件</p>\n<span id=\"more\"></span>\n\n<h2 id=\"Alist-官方文檔\"><a href=\"#Alist-官方文檔\" class=\"headerlink\" title=\"Alist 官方文檔\"></a><a href=\"https://alist.nn.ci/zh/\">Alist 官方文檔</a></h2><p><img src=\"https://i.imgur.com/pbxhpkZ.png\" alt=\"2\"></p>\n<p>從文檔首頁可以感受到,Alist 有著強大的功能</p>\n<p>因為支援中文,在閱讀文檔時不會遇到障礙</p>\n<h2 id=\"環境建置\"><a href=\"#環境建置\" class=\"headerlink\" title=\"環境建置\"></a>環境建置</h2><p>筆者使用 Docker 運行 Alist</p>\n<pre><code>docker pull xhofe/alist:v3.13.2\n\ndocker run -d --restart=always -v {你的本機目錄}:/opt/alist/data -p 5244:5244 -e PUID=0 -e PGID=0 -e UMASK=022 --name="alist" xhofe/alist:v3.13.2\n</code></pre>\n<p>記得將上方的 {你的本機目錄} 替換成你的環境</p>\n<p>Container run 起後使用這段指令查看預設帳號密碼</p>\n<pre><code>docker exec -it alist ./alist admin\n</code></pre>\n<p><img src=\"https://i.imgur.com/sKMQUPf.png\" alt=\"3\"></p>\n<p><img src=\"https://i.imgur.com/wvAH9Od.png\" alt=\"4\"></p>\n<p>登入成功後我們會回到首頁,這裡目前甚麼都沒有</p>\n<p>在網址後方加入 @manage 進入控制台</p>\n<p><img src=\"https://i.imgur.com/8ziYJ8B.png\" alt=\"5\"></p>\n<p>這邊先將管理員帳密改成你好記的樣子</p>\n<p>在存儲可以添加需要加入到 Alist 的空間<br>從基本的本地環境到雲端都可以放在 Alist 管理</p>\n<p>設置雲端掛載時記得根據 Alist 版本,查看對應的文檔,留意任何留言,記得備份~</p>\n<p>筆者這邊以本地環境做示範</p>\n<br>\n\n<hr>\n<br>\n\n<p>首先到設定 {你的本機目錄} 的地方,創建一個資料夾</p>\n<p>這會做為未來我們掛載本地檔案的路徑</p>\n<p><img src=\"https://i.imgur.com/FKzeLks.png\" alt=\"6\"></p>\n<ul>\n<li>驅動選擇 本地存儲</li>\n<li>掛載路徑 /{資料夾名稱}</li>\n<li>根資料夾路徑 /opt/alist/data/{資料夾名稱}</li>\n</ul>\n<p><img src=\"https://i.imgur.com/oCqbTCR.png\" alt=\"7\"><br><img src=\"https://i.imgur.com/mOr53lK.png\" alt=\"8\"></p>\n<p>設定完大致如上</p>\n<br>\n\n<p><img src=\"https://i.imgur.com/ZimHdEW.png\" alt=\"9\"></p>\n<p>回首頁看就會有空間了!</p>\n<br>\n\n<h2 id=\"實用-CSS\"><a href=\"#實用-CSS\" class=\"headerlink\" title=\"實用 CSS\"></a>實用 CSS</h2><p>Alist 後台的 “設置” ,可以調整絕大多數的 UI 畫面<br>不過如果想自定義一些細節,推薦使用 CSS 達成</p>\n<p>設置 -> 全域設定 -> 自定義頭部</p>\n<p>可以在這做自定義 CSS 的添加<br>以下提供一些不錯的樣式</p>\n<br>\n\n<h3 id=\"去除網站圖標與搜索\"><a href=\"#去除網站圖標與搜索\" class=\"headerlink\" title=\"去除網站圖標與搜索\"></a>去除網站圖標與搜索</h3><pre><code><style>.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {display: none!important;}</style>\n</code></pre>\n<h3 id=\"站點公告去除-X-關閉按鈕\"><a href=\"#站點公告去除-X-關閉按鈕\" class=\"headerlink\" title=\"站點公告去除 X 關閉按鈕\"></a>站點公告去除 X 關閉按鈕</h3><pre><code><style>.notify-render .hope-close-button{display: none;}</style>\n</code></pre>\n<h3 id=\"使用背景圖-亮色背景-GIF-可用\"><a href=\"#使用背景圖-亮色背景-GIF-可用\" class=\"headerlink\" title=\"使用背景圖(亮色背景)(GIF 可用)\"></a>使用背景圖(亮色背景)(GIF 可用)</h3><pre><code><style>.hope-ui-light{background-image: url("")!important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}</style>\n</code></pre>\n<h3 id=\"使用背景圖-暗色背景-GIF-可用\"><a href=\"#使用背景圖-暗色背景-GIF-可用\" class=\"headerlink\" title=\"使用背景圖(暗色背景)(GIF 可用)\"></a>使用背景圖(暗色背景)(GIF 可用)</h3><pre><code><style>.hope-ui-dark {background-image: url("") !important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}</style>\n</code></pre>\n<h3 id=\"列表改透明-亮色背景\"><a href=\"#列表改透明-亮色背景\" class=\"headerlink\" title=\"列表改透明(亮色背景)\"></a>列表改透明(亮色背景)</h3><pre><code><style>.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css{background-color: rgba(255, 255, 255, 0.5) !important;}</style>\n</code></pre>\n<h3 id=\"列表改透明-暗色背景\"><a href=\"#列表改透明-暗色背景\" class=\"headerlink\" title=\"列表改透明(暗色背景)\"></a>列表改透明(暗色背景)</h3><pre><code><style>.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{background-color:rgb(0 0 0 / 50%) !important;}</style>\n</code></pre>\n<h3 id=\"元信息改透明-亮色背景\"><a href=\"#元信息改透明-亮色背景\" class=\"headerlink\" title=\"元信息改透明(亮色背景)\"></a>元信息改透明(亮色背景)</h3><pre><code><style>.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{background-color: rgba(255, 255, 255, 0.5)!important;}</style>\n</code></pre>\n<h3 id=\"元信息改透明-暗色背景\"><a href=\"#元信息改透明-暗色背景\" class=\"headerlink\" title=\"元信息改透明(暗色背景)\"></a>元信息改透明(暗色背景)</h3><pre><code><style>.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{background-color:rgb(0 0 0 / 50%)!important;}</style>\n</code></pre>\n<h3 id=\"去除尾頁\"><a href=\"#去除尾頁\" class=\"headerlink\" title=\"去除尾頁\"></a>去除尾頁</h3><pre><code><style>.footer {display: none !important;}]</style>\n</code></pre>\n<h3 id=\"移除下載選項\"><a href=\"#移除下載選項\" class=\"headerlink\" title=\"移除下載選項\"></a>移除下載選項</h3><pre><code><style>.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ.hope-c-kvTTWD-hYRNAb-variant-filled.hope-c-kvTTWD-gfwxhr-size-md.hope-c-huZphZ-cIGthf-cv.hope-c-PJLV.hope-c-PJLV-ijSQbqe-css{display: none !important;}</style>\n</code></pre>\n<br>\n\n<p>推薦一些網站:<br><a href=\"https://anwen-anyi.github.io/\">Alist 魔改代碼分享</a><br><a href=\"https://telegra.ph/AList-UI-01-11\">CSS 參考</a></p>\n",
"tags": [
"Alist"
]
},
{
"id": "https://smilin.net/2023/06/01/discordJs14-1/",
"url": "https://smilin.net/2023/06/01/discordJs14-1/",
"title": "discord.js 升上 14 版,架構說明",
"date_published": "2023-06-01T12:00:00.000Z",
"content_html": "<p><a href=\"https://github.com/Mr-Smilin/AliceZero/tree/v14\">github 連結</a></p>\n<p>從 2021 年,discord.js 升上 13 版<br>heroku 改成收費<br>youtube 不喜歡 discord 蹭他們的服務<br>音樂機器人相繼關閉 yt 服務<br>12 版許多功能時常報錯<br>discord.js 升上 14 版..</p>\n<br>\n\n<p>期間不管是工作又或是休假時,都很希望能升級以前寫的機器人<br>不斷想重構出更好維護的程式架構,也一再推翻之前的程式</p>\n<br>\n\n<p>終於..!在最近 Alice 也正式升上了 discord.js 14.11.0 版本<br>不會總是因為舊版本不支援而爆炸啦!(誤)</p>\n<p><img src=\"https://i.imgur.com/M6hj8wU.jpg\" alt=\"levelUp!\"></p>\n<span id=\"more\"></span>\n\n<br>\n\n<hr>\n<br>\n\n<h2 id=\"安裝套件\"><a href=\"#安裝套件\" class=\"headerlink\" title=\"安裝套件\"></a>安裝套件</h2><p>必備</p>\n<ul>\n<li>Node.js v16.9.0 或以上</li>\n<li>Discord.js v14.11.0<br>discord.js 核心套件<pre><code>npm install discord.js@14.11.0\n</code></pre>\n</li>\n<li>dotenv v16.0.3<br>讀取 .env ,即 token 的套件<pre><code>npm install dotenv@16.0.3\n</code></pre>\n</li>\n</ul>\n<details>\n<summary>點我展開BDB(baseDiscordBot.js)所需套件</summary>\n\n<br>\n\n<ul>\n<li>@discordjs/builders v1.3.0<br>discord.js 提供的類別產生器類型<pre><code>npm install @discordjs/builders@1.3.0\n</code></pre>\n</li>\n</ul>\n</details>\n\n<br>\n\n<details>\n<summary>點我展開音樂系統所需套件</summary>\n\n<br>\n\n<ul>\n<li>@discordjs/voice v0.16.0<br>控制 discord 語音的核心套件<br>p.s.使用舊版本極度容易出現問題,如果播放過程發生 bug 可以先檢查 voice 是不是最新版<pre><code>npm install @discordjs/voice@0.16.0\n</code></pre>\n</li>\n<li>@discordjs/opus v0.9.0<br>Opus 編碼器<pre><code>npm install @discordjs/opus@0.9.0\n</code></pre>\n</li>\n<li>ffmpeg-static v5.1.0<br>ffmpeg 轉碼器<pre><code>npm install ffmpeg-static@5.1.0\n</code></pre>\n</li>\n<li>libsodium-wrappers v0.7.11<br>串流加密工具<pre><code>npm install libsodium-wrappers@0.7.11\n</code></pre>\n</li>\n<li>play-dl v1.9.6<br> 串流套件,取代 ytdl-core<pre><code>npm install play-dl@1.9.6\n</code></pre>\n</li>\n</ul>\n</details>\n\n<br>\n\n<details>\n<summary>點我展開Render託管推薦套件</summary>\n\n<br>\n\n<ul>\n<li>axios v1.4.0<br>打 http 使用的套件<pre><code>npm install axios@1.4.0\n</code></pre>\n</li>\n<li>node-schedule v2.1.0<br>定時任務套件<pre><code>npm node-schedule@2.1.0\n</code></pre>\n</li>\n</ul>\n</details>\n\n<br>\n\n<hr>\n<br>\n\n<h2 id=\"前置動作\"><a href=\"#前置動作\" class=\"headerlink\" title=\"前置動作\"></a>前置動作</h2><p>如果是舊版 discord bot ,要先去 <a href=\"https://discord.com/developers/applications\">discordDeveloper</a><br>選中自己的 bot 後,選擇左邊 Bot 選項,然後將這邊的開關都打開</p>\n<p><img src=\"https://i.imgur.com/GoIc5Ld.png\" alt=\"2\"></p>\n<p>這是一些限制機器人存取特定資訊的開關,默認是關閉的,如果沒有打開,就算在程式中要求存取權,也是拿不到這些資訊的喔!</p>\n<p>之後在專案根目錄創建一個 <code>.env</code> 檔案,性質類似於以前教學中的 <code>auth.json</code><br>差別在於,放在 <code>Environment</code> 的參數意味著參數不該被公開,不會在任何的公開場合獲得此類 value (例如 github),僅在執行專案時會被注入</p>\n<h3 id=\"env-預覽\"><a href=\"#env-預覽\" class=\"headerlink\" title=\".env 預覽\"></a>.env 預覽</h3><pre><code>TOKEN="your bot token"\nMASTER_ID="your client ID"\n</code></pre>\n<h2 id=\"專案結構\"><a href=\"#專案結構\" class=\"headerlink\" title=\"專案結構\"></a>專案結構</h2><br>\n\n<details>\n<summary>點我展開專案結構</summary>\n\n<p>AliceZero/<br>├─ baseJS/<br>│ ├ BaseDiscordBot.js<br>│ ├ CatchF.js<br>│ ├ CronTask.js<br>│ ├ HealthCheck.js<br>├─ manager/<br>│ ├ buttonManager/<br>│ ├ ├ commands/<br>│ ├ ├ ├ helpNowQueue.js<br>│ ├ ├ ├ helpPause.js<br>│ ├ ├ ├ helpPlay.js<br>│ ├ ├ ├ helpPlayFirst.js<br>│ ├ ├ ├ helpResume.js<br>│ ├ ├ ├ helpSkip.js<br>│ ├ ├ ├ helpSleep.js<br>│ ├ ├ ├ helpTrpgDice.js<br>│ ├ ├ ├ helpTrpgSort.js<br>│ ├ ├ ├ myKiritoSkillNicename.js<br>│ ├ ├ ├ myKiritoSkillSkill.js<br>│ ├ ├ ├ myKiritoSkillStatus.js<br>│ ├ ├ buttonC.js<br>│ ├ ├ buttonM.js<br>│ ├ ├ buttonType.json<br>│ ├ componentManager/<br>│ ├ ├ componentM.js<br>│ ├ embedManager/<br>│ ├ ├ embedC.js<br>│ ├ messageManager/<br>│ ├ ├ messageC.js<br>│ ├ ├ messageM.js<br>│ ├ ├ messagePrefix.json<br>│ ├ ├ messageUpdateM.js<br>│ ├ ├ nineData.js<br>│ ├ musicManager/<br>│ ├ ├ musicC.js<br>│ ├ ├ musicM.js<br>│ ├ mykiritoManager/<br>│ ├ ├ requests/<br>│ ├ ├ ├ boss.js<br>│ ├ ├ ├ level.js<br>│ ├ ├ ├ skill.js<br>│ ├ ├ myKiritoC.js<br>│ ├ ├ myKiritoM.js<br>│ ├ selectMenuManager/<br>│ ├ ├ commands/<br>│ ├ ├ ├ help.js<br>│ ├ ├ selectMenuC.js<br>│ ├ ├ selectMenuM.js<br>│ ├ slashManager/<br>│ ├ ├ commands/<br>│ ├ ├ ├ help.js<br>│ ├ ├ ├ m.js<br>│ ├ ├ slashM.js<br>│ ├ trpgManager/<br>│ ├ ├ trpgC.js<br>│ ├ ├ trpgM.js<br>├─ .env<br>├─ alice.js<br>├─ package.json<br>├─ package-lock.json</p>\n</details>\n\n<br>\n\n<p>因為這篇不是教學,不會一個個講解,大概說明一下各 Manager 的作用</p>\n<ul>\n<li>BaseDiscordBot.js<br>從登入 token 到訊息傳送<br>與 discord.js 的任何交互都在這,唯一引用 discord.js 的地方<br>好處是當 discord.js 改版時只要更改 BDB 即可<br>壞處是其他地方的邏輯可能會比較難以理解,都需要點進 BDB 查看</li>\n<li>CatchF.js<br>自定義的 log 工具,改這裡就可以一次更改所有的 log style</li>\n<li>CronTask.js<br>託管平台用到的工具</li>\n<li>HealthCheck.js<br>同上</li>\n<li>alice.js<br><code>npm start</code> 的執行檔,敘述了啟動時會執行的內容</li>\n<li>slashManager<br>discord.js 13 版以後新增的斜線指令,包含其註冊與監聽的方法都寫在這<br>commands 可以看出這個 bot 目前有多少指令(本次範例來說有 <code>help</code> 跟 <code>m</code> 指令)</li>\n<li>messageManager<br>傳統 bot 對文字訊息回應的主要行為,<code>messageUpdate</code> 訊息更新觸發的行為也放在這</li>\n<li>selectMenuManager<br>菜單組件,commands 可以看出這個 bot 目前有多少菜單組件</li>\n<li>buttonManager<br>按鈕組件,commands 可以看出這個 bot 目前有多少按鈕組件</li>\n<li>embedManager<br>嵌入式訊息組件,<code>@discordjs/builders</code> 有著 <code>EmbedBuilder</code> 這個 embed 產生器<br>避免往後的更新要改一堆地方,在 BDB 中被繼承完才給 embedManager 使用</li>\n<li>componentManager<br>組件管理器,當訊息非單純的文字訊息,有使用到 菜單 / 按鈕 / 嵌入訊息 任一組件時,會從這裡拿</li>\n<li>musicManager<br>音樂相關邏輯,musicM 負責定義邏輯,musicC 實例實際內容,與 <code>play-dl</code> 等套件互動</li>\n<li>trpgManager<br>派對系統,目前只會骰骰子,而且 code 還是從舊版直接搬過來的..</li>\n<li>mykiritoManager<br>攻略組系統,提供 mykirito 大群的資訊查詢,雖然很久沒更新,但仍然還有人在使用,所以也更新過來了。</li>\n</ul>\n<p><a href=\"https://github.com/Mr-Smilin/AliceZero/tree/v14\">github 連結</a></p>\n<br>\n\n<p>現在的架構算是終於確定下來,以後會在這個架構上繼續更新<br>不過畢竟是 side project ,架構中有些地方整理的比較草率<br>如果之後寫教學,會重新寫一個 bot 的</p>\n<p>看到這裡的朋友,如果在寫 bot ,但苦於不知該如何下手的話<br>這裡推薦可以看看 <a href=\"https://b-l-u-e-b-e-r-r-y.github.io/post/DiscordBot03/\">藍莓大大</a> 的文章<br>淺顯以懂,最後甚至是給了乾貨,可以直接載了拿去用~</p>\n<p>或是使用 <a href=\"https://github.com/Mr-Smilin/BaseDiscordBot\">我的 BDB</a><br>除了像是 mykirito 這種比較偏門的功能,其他 alice 會的指令都會慢慢更新在 BDB 專案上,可以自由取用~</p>\n<p>感謝看到這裡的你^^!</p>\n",
"tags": [
"node.js",
"bot",
"discord",
"discord.js"
]
},
{
"id": "https://smilin.net/2023/03/17/goodbyeNalocal/",
"url": "https://smilin.net/2023/03/17/goodbyeNalocal/",
"title": "blog 網址搬遷 & github改名",
"date_published": "2023-03-17T06:30:00.000Z",
"content_html": "<p><img src=\"https://i.imgur.com/1EqvZfv.png\" alt=\"title\"></p>\n<h2 id=\"再見-Nalocal\"><a href=\"#再見-Nalocal\" class=\"headerlink\" title=\"再見 Nalocal\"></a>再見 Nalocal</h2><p>最初使用 Nalocal,做為 Github 上使用的名字</p>\n<p>想著這個名字的發音還挺順口的,近似於貓咪的喵叫聲</p>\n<p>拆開來看的話有非本地,支持雲端概念存在的好名字..</p>\n<span id=\"more\"></span>\n\n<p><strong>不過我的名字實在太多啦!</strong></p>\n<p>在 FB 上叫做漣漪,網名叫微笑,換個論壇又會有別的名字</p>\n<p>而且對於名字是否順口好記,也是近期挺在意的事情</p>\n<p>經營 blog,似乎逐漸從原本單純的樣貌,變成必需慎重考慮該如何營造的一個個人品牌了</p>\n<br>\n\n<p>所以,趁此機會一併更改了網域,github page 提供的免費網域終究存在侷限</p>\n<p>雖然替換初期會有點痛苦,往後也算是重新經營了</p>\n<p>但我想這會是必要的,也希望以後我能堅持多寫些文章,添加柴火。</p>\n",
"tags": [
"日記"
]
},
{
"id": "https://smilin.net/2022/11/01/bdb3/",
"url": "https://smilin.net/2022/11/01/bdb3/",
"title": "BDB更新日誌#3",
"date_published": "2022-11-01T10:00:00.000Z",
"content_html": "<h2 id=\"主要更新\"><a href=\"#主要更新\" class=\"headerlink\" title=\"主要更新\"></a>主要更新</h2><ul>\n<li>DiscordJSmySelf 更名為 BaseDiscordBot</li>\n<li>discord.js 的所有參考都塞進 BaseDiscordBot</li>\n<li>斜線 / 選項 / 按鈕 / 菜單 框架完成</li>\n</ul>\n<h3 id=\"次要更新\"><a href=\"#次要更新\" class=\"headerlink\" title=\"次要更新\"></a>次要更新</h3><ul>\n<li>env 更新</li>\n<li>readMe 更新</li>\n</ul>\n<h3 id=\"github\"><a href=\"#github\" class=\"headerlink\" title=\"github\"></a>github</h3><p><a href=\"https://github.com/Mr-Smilin/BaseDiscordBot/tree/v14.6.0\">github 頁面</a></p>\n<span id=\"more\"></span>\n\n<hr>\n<h2 id=\"一些話\"><a href=\"#一些話\" class=\"headerlink\" title=\"一些話\"></a>一些話</h2><br>\n嗨,昨天才見面呢 \n最近比較閒,忽然就可以比較常更新日誌了\n\n<p>其實原本有點懶得寫,但 BDB 目前的狀態,跟之前相比算是有了非常大的改變<br>所以就稍微紀錄一下,雖然、大概、沒人看就是了 xD ~~</p>\n<br>\n\n<hr>\n<h3 id=\"主要更新說明\"><a href=\"#主要更新說明\" class=\"headerlink\" title=\"主要更新說明\"></a>主要更新說明</h3> <br>\n首先,最重要的就是,DBD 的核心文件做了一次更名啦 ~~ <br> \n筆者實在是對命名很不在行,原本的想法很單純,想寫一套屬於我的翻譯文件 <br>\n用來翻譯 discord.js 的 API ,這樣以後 discord.js 改版的時候,就不用再把原有的邏輯拆掉重組了 \n <br><br>\n新的名字與專案相同,也算是重新確立了本專案的方向 (啪嘰啪嘰~) \n \n <br>\n \n<p>雖然認真的朋友應該早就看出來了,其實筆者的程式水平並不怎樣呢,也難怪會當受薪階級了 (x)<br>不過筆者也沒有因此放棄,目標一直都是在程式的道路上磨練,所以相較於以往,對程式的理解還是有提高的喔</p>\n<p>這次花了些時間整理,正式將所有與 discord.js 有關的 import 都塞入 BDB 內了<br>也就是以後使用 BDB,就真正可以做到換一個檔案 -> 升級完畢,的這種事情了 ~~<br>雖然只是初衷一般的事情,也是最近稍微閒下來才終於可以整理好啊..感覺審視了一次自己的作業效率阿 (汗)</p>\n <br>\n\n<p>以及相比前兩個比較小咖,但也算是主要更新的<br>discord.js 13 版引入,14 版改過一次實例方式的各種功能都做出框架了<br>雖然沒能在 13 版時就做出來有點遺憾,但筆者對目前的框架很有自信,相信等 15 版出來的時候,這些 code 也會很容易維護吧!</p>\n<br>\n\n<hr>\n<h3 id=\"次要更新說明\"><a href=\"#次要更新說明\" class=\"headerlink\" title=\"次要更新說明\"></a>次要更新說明</h3> <br>\n在env的部分加上了 `MASTER_ID`,並沒有實際功能<br> \n更多是用於 DEBUG,或是往後要開一些只有自己能用的開發人員指令時可以使用 \n \n <br>\n \n<p>因為更新內容眾多, readMe 也做了一次更新,改了不少,但還是缺很多東西,只交代了最基本的內容<br>畢竟使用 BDB 相當於重新認識一種 API ,未來想開一份專屬於 BDB 的文檔<br>不知道還要多久就是了,請大家等等我囉 xD ~</p>\n<br>\n",
"tags": [
"node.js",
"bot",
"discord",
"discord.js",
"教學"
]
},
{
"id": "https://smilin.net/2022/10/31/bdb2/",
"url": "https://smilin.net/2022/10/31/bdb2/",
"title": "BDB更新日誌#2 - discord.js v14.6.0",
"date_published": "2022-10-31T10:00:00.000Z",
"content_html": "<h2 id=\"主要更新\"><a href=\"#主要更新\" class=\"headerlink\" title=\"主要更新\"></a>主要更新</h2><ul>\n<li>將專案適配到 <code>discord.js</code> v14.6.0 版本</li>\n<li>全版本專案棄用 <code>auth.json</code> ,改成 <code>.env</code></li>\n</ul>\n<h3 id=\"次要更新\"><a href=\"#次要更新\" class=\"headerlink\" title=\"次要更新\"></a>次要更新</h3><ul>\n<li>message 邏輯整合</li>\n<li>修改部分註解</li>\n</ul>\n<h3 id=\"github\"><a href=\"#github\" class=\"headerlink\" title=\"github\"></a>github</h3><p><a href=\"https://github.com/Mr-Smilin/BaseDiscordBot/tree/v14.6.0\">github 頁面</a></p>\n<span id=\"more\"></span>\n\n<hr>\n<h2 id=\"一些話\"><a href=\"#一些話\" class=\"headerlink\" title=\"一些話\"></a>一些話</h2><p>大家好,我是微笑</p>\n<p>這次版本更新,在基本架構上跟 13 並沒有差太多<br>主要是修改了之前 code 的一些架構設計,讓主體更加精簡了一些,以及使用更加正規的方式儲存私密數值</p>\n<p>之後如果時間允許,希望可以將自己的 bot 提升到 14.6.0 的版本(12 遇到的 bug 越來越多了<del>)<br>屆時或許會再將功能拆分,更新到這邊吧,不過因為已經真鹿太多次了,已經有點不好意思給承諾了,各位看看就好吧,哈哈哈</del></p>\n<br>\n\n<hr>\n<h3 id=\"主要更新說明\"><a href=\"#主要更新說明\" class=\"headerlink\" title=\"主要更新說明\"></a>主要更新說明</h3><p>原本專案使用 json 做參數管理<br>最近筆者因為換了上雲平台,重新研究了一次相關資料,這次索性將 <code>auth.json</code> 棄用,統一改成 <code>.env</code><br>利用 <code>dotenv</code> 的效果,就可以用 <code>process.env.</code> 的方式載入各種環境參數了</p>\n<p><img src=\"https://i.imgur.com/yCrkWDD.png\" alt=\"引入dotenv,改用process.env.xxx來取值\"></p>\n<br>\n\n<hr>\n<h3 id=\"次要更新說明\"><a href=\"#次要更新說明\" class=\"headerlink\" title=\"次要更新說明\"></a>次要更新說明</h3><p>另外比較重要的修改,就是原本將 message 入口放在主程序,看起來挺奇怪的,就跟 <code>prefix.json</code> 一起重新統合到獨立的分類了<br>以及在註解上,也重新做了一輪調整,讓文件間的註解存在統一性,相對不會太過雜亂</p>\n<p><img src=\"https://i.imgur.com/0m0R3m4.png\" alt=\"prefix.json更名,並且放入messageManager模組內\"></p>\n<p><img src=\"https://i.imgur.com/c7brWXz.png\" alt=\"把message邏輯搬到獨立文件內,以及部分註解統一\"></p>\n<br>\n",
"tags": [
"node.js",
"bot",
"discord",
"discord.js",
"教學"
]
},
{
"id": "https://smilin.net/2022/10/25/herokuToRender/",
"url": "https://smilin.net/2022/10/25/herokuToRender/",
"title": "將專案從heroku轉到render過程思路",
"date_published": "2022-10-25T10:00:00.000Z",
"content_html": "<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>大家好,我是微笑</p>\n<p>繼上次發文過了九個月了</p>\n<p>很可怕啊,感覺自己好混,哈哈哈</p>\n<p>疫情期間,遇到了不少事情,最近才終於有一點調整回正軌的感覺</p>\n<p>剛好 Heroku 發生了一些問題,需要搬移程序到其他託管平台,這邊順便 <del>水一點文章</del></p>\n<br>\n\n<span id=\"more\"></span>\n\n<hr>\n<h3 id=\"關於發生在-Heroku-上的一些問題\"><a href=\"#關於發生在-Heroku-上的一些問題\" class=\"headerlink\" title=\"關於發生在 Heroku 上的一些問題\"></a>關於發生在 Heroku 上的一些問題</h3><p>Heroku 在10月初時,寄送給了開發者一封信</p>\n<p>裡面提到,Heroku 將於2022年11月28號以後,全面關閉免費方案的主機</p>\n<p>如果繼續使用 Heroku 的話,根據目前定價方案,一台託管主機需要負擔一個月 7 美元的成本</p>\n<p>對於單純在學習的學生,又或是我這種程序用愛發電沒有利益的行為,顯然是十足的噩耗</p>\n<p>也因此,原本在 Heroku 上使用免費方案的使用者,開始到處尋找可以繼續使用的平台。</p>\n<p><img src=\"https://i.imgur.com/K3Pngg8.png\" alt=\"heroku將於2022年11月28號以後,全面關閉免費方案的主機\"></p>\n<br>\n\n<hr>\n<h3 id=\"多樣化的選擇\"><a href=\"#多樣化的選擇\" class=\"headerlink\" title=\"多樣化的選擇\"></a>多樣化的選擇</h3><p>因應 Heroku 收費化的開始,有許多平台陸續浮現到開發者的眼前,其中甚至有網站的標題是「Migrate from Heroku to Railway」</p>\n<p>可以看到,除了 Heroku 以外仍有許多平台等待著開發者發掘(Fly.io/Railway.app/GoogleCloudPlatform - CloudRun等..)</p>\n<p>雖然根據專案不同,沒有所謂最好的選擇,不過筆者在多次嘗試後,最後決定將程式搬遷到 Render 上</p>\n<br>\n\n<hr>\n<h3 id=\"render-com\"><a href=\"#render-com\" class=\"headerlink\" title=\"render.com\"></a>render.com</h3><p><img src=\"https://i.imgur.com/JqcraLM.png\" alt=\"render.com\"></p>\n<br>\n\n<p>當初搬遷主機時,最看中的點就是希望能盡量不用改動原本的架構,免費額度足夠</p>\n<p>Render 目前有著每月 750 小時的免費額度,只開一台機器的話等同免費</p>\n<p>並且他支援從 GitHub / GitLab 等開源平台專案部署的方式,功能單一讓流程簡化</p>\n<p>除了支援許多語言直接部署,也支援 Docker 映像檔部署,這幾乎是現在主流平台都有的功能了。</p>\n<p>那因為筆者的專案使用 Node.js,剛好在 Render 支援的語言列表內,所以設定好之後,將專案推到 Github,他就會自動做部署行為了</p>\n<br>\n\n<hr>\n<h3 id=\"部署流程\"><a href=\"#部署流程\" class=\"headerlink\" title=\"部署流程\"></a>部署流程</h3><br>\n\n<p>第一次部署肯定會比較麻煩的</p>\n<p>首先我們要先用 Github 帳號登入 Render 註冊帳號,進來後他會先告訴你,免費方案如以下</p>\n<p><img src=\"https://i.imgur.com/TFqJqEB.png\" alt=\"免費方案\"></p>\n<br>\n\n<p>Render 提供許多方案,這邊我們要找到 web services 才能使用免費主機</p>\n<br>\n\n<p><img src=\"https://i.imgur.com/JgEO1dE.png\" alt=\"Overview\"></p>\n<br>\n\n<p>之後取得 Github 授權 repository,就可以載入專案,選擇主機地區,語言等設置</p>\n<p>比較需要注意的是,因為 Render 的 web 每個半小時無人訪問,會進入休眠(記得 Heroku 也有這類設定)</p>\n<p>需要再次訪問網站才能讓他喚醒</p>\n<p>以 Node 來說,我們可以使用 request 跟 node-schedule ,呼叫自己防止進入睡眠的方式,來讓真正需要的程序能不間斷運行</p>\n<br>\n\n<hr>\n<h3 id=\"env\"><a href=\"#env\" class=\"headerlink\" title=\"env\"></a>env</h3><br>\n\n<p>以前在 Heroku ,如果不透過 Github 自動部署,而是用 Heroku Git 的話,是可以直接將較為私密的 key 等資料,直接明碼上傳上去的</p>\n<p>雖然不是很好的做法,但是對於私人專案來說,這的確是個很方便的做法,只上傳在 Heroku 也有效的保障了程序的安全性</p>\n<p>但是 Render 只接受 Github 鏡像部署,私密的 key 是無論如何都不會放在 Github 上的</p>\n<p>Render 在 env 的設定上也是十分方便,<a href=\"https://render.com/docs/configure-environment-variables\">官方流程可參考這篇文檔</a></p>\n<p><img src=\"https://i.imgur.com/dvzYkqs.png\" alt=\"env\"></p>\n<br>\n\n<p>單一的 key 要放在 Environment Variables</p>\n<p>如果原本就習慣使用 .env 管理所有參數的話,可以將檔案的內容複製進 Secret Files</p>\n<p>Render 在 env 有個好處是,一般平台設置 env 後,基於安全性,平台都不會讓使用者在前台存取 env 的真實資料</p>\n<p>但是 Render 可以,而且還可以直接修改內容,雖然必須犧牲一些安全性,但這樣也方便了開發者對值的管理,對筆者來說是利大於弊</p>\n<br>\n\n<hr>\n<h3 id=\"結語\"><a href=\"#結語\" class=\"headerlink\" title=\"結語\"></a>結語</h3><br>\n\n<p>筆者當初使用 Heroku,是因為接觸了 discord bot,為此還寫了鐵人賽</p>\n<p>說長不長說短不短的兩年,Heroku 宣告收費化,對於筆者這樣的使用者來說,就像是一個平台的關閉一般</p>\n<p>這兩年從後端摸到前端,再從前端學回後端,因為疫情也遇到了不少事情,原本覺得搬遷主機,對於筆者這點能力來說一定是一件艱鉅的工程</p>\n<p>不過在搬遷的過程中,重新拾起 Node,摸索對筆者最好的平台時,感受到許多愉快,有一種 原來我還是能快樂寫 code 阿,的感想</p>\n<p>我想 sideProject 就像是開發者們心靈的綠洲吧,能因為這次機會,重新澆灌他,我也收穫頗豐。</p>\n<p><a href=\"https://ithelp.ithome.com.tw/articles/10255630\">文末附上去年內部員工自己寫的推薦文</a></p>\n",
"tags": [
"node.js",
"bot",
"discord",
"discord.js",
"教學",
"heroku",
"render",
"render.com"
]
},
{
"id": "https://smilin.net/2022/01/17/bdb1/",
"url": "https://smilin.net/2022/01/17/bdb1/",
"title": "BDB更新日誌#1",
"date_published": "2022-01-17T10:00:00.000Z",
"content_html": "<h2 id=\"主要更新\"><a href=\"#主要更新\" class=\"headerlink\" title=\"主要更新\"></a>主要更新</h2><ul>\n<li>bot 啟動時自動註冊斜線命令</li>\n</ul>\n<h3 id=\"次要更新\"><a href=\"#次要更新\" class=\"headerlink\" title=\"次要更新\"></a>次要更新</h3><ul>\n<li>斜線命令相關邏輯調整</li>\n<li>修改 js 檔名</li>\n<li>修改部分註解</li>\n</ul>\n<h3 id=\"github\"><a href=\"#github\" class=\"headerlink\" title=\"github\"></a>github</h3><p><a href=\"https://github.com/Mr-Smilin/BaseDiscordBot/tree/2e168a31c74994c18e276f8f4bf1ff67d74803c9\">github 頁面</a></p>\n<span id=\"more\"></span>\n\n<br>\n\n<hr>\n<h2 id=\"一些話\"><a href=\"#一些話\" class=\"headerlink\" title=\"一些話\"></a>一些話</h2><p>大家好,我是微笑</p>\n<p>總覺得很久沒發文,自上次簡單介紹 discord.js 升版後有四個月了…</p>\n<p>與以往渾渾噩噩不同,<br>架設了 blog、有了實際的紀錄後更可以感覺到自己必需努力(雖然平常更多時間都在放電 haha)</p>\n<p>原本新年後第一篇文章,希望可以寫點想說的話;<br>可之前沒有相關經驗,一到真的要動筆時總是不知道該寫些甚麼。<br>結果就拖到現在了,實在是有點慚愧(抹臉</p>\n<p>雖然不是 2022 第一篇,相關的雜談就留待日後吧~<br>這邊做為更新日誌,會盡量以介紹更新為主的,恩恩。</p>\n<br>\n\n<hr>\n<h3 id=\"主要更新說明\"><a href=\"#主要更新說明\" class=\"headerlink\" title=\"主要更新說明\"></a>主要更新說明</h3><p>敘述上挺好懂的,BDB(BaseDiscordBot)原本並不會在註冊時自動跑<a href=\"https://discord.js.org/#/docs/discord.js/v13/class/GuildApplicationCommandManager\">斜線指令</a>。<br>原本的 code 有點問題,這次改了寫法,並且拉進了<a href=\"https://discord.js.org/#/docs/discord.js/v13/class/Client?scrollTo=e-ready\">Client#ready</a>事件內。<br>以後執行時,就會將 bot 所在的所有群組都註冊一次斜線指令</p>\n<p><img src=\"https://i.imgur.com/wFQPoia.png\" alt=\"移除註解,修改傳入的參數\"></p>\n<p><img src=\"https://i.imgur.com/J8d01FY.png\" alt=\"實際在ready呼叫了InsertSlash\"></p>\n<br>\n\n<hr>\n<h3 id=\"次要更新說明\"><a href=\"#次要更新說明\" class=\"headerlink\" title=\"次要更新說明\"></a>次要更新說明</h3><p>原本 BDB 在升級到 discord.js 13 時,目標著重在保全 <strong>功能模組化</strong> 此一優點上,<br>斜線指令的兼容,並沒有花費過多的時間去研究。</p>\n<p>此次除了主要更新中提到的內容,還修改了斜線指令被觸發時的邏輯,<br>將 reply 一同寫在 json 內,以利於往後擴充。</p>\n<p>改動簡易,優點也是顯而易見的,<br>有效避免日後斜線指令過多,註冊與回傳列表不同步的風險。</p>\n<p>基於 <strong>功能模組化</strong> 訴求,針對這一塊的下一步優化,<br>預計會是在程式碼上做出子母 json 檔案;<br>可以根據要使用的功能別,來直接套用各個功能對應的 json。</p>\n<br>\n\n<hr>\n<br>\n\n<p>原本 BDB 的啟動檔取名做 bot.js,因筆者自身寫的 bot,檔名都是 alice(女兒)。<br>BDB 畢竟也是我的專案,怎麼可以有差別待遇呢(不是<br>乾脆就一併統一成愛稱了。</p>\n<p>另外調整了一點點註解上的形容。</p>\n<p><img src=\"https://i.imgur.com/l93RXrB.png\" alt=\"修改了斜線指令,以回傳類型決定邏輯\"></p>\n<p><img src=\"https://i.imgur.com/QOybZGB.png\" alt=\"調整後的slashJson\"></p>\n<p><img src=\"https://i.imgur.com/bvwPWkT.png\" alt=\"調整了註解與執行的jsName\"></p>\n",
"tags": [
"node.js",
"bot",
"discord",
"discord.js",
"教學"
]
},
{
"id": "https://smilin.net/2021/12/14/racingScript-worldFlipper/",
"url": "https://smilin.net/2021/12/14/racingScript-worldFlipper/",
"title": "競速疊屍腳本 - 台版彈射世界",
"date_published": "2021-12-14T04:00:00.000Z",
"content_html": "<h2 id=\"腳本運作環境\"><a href=\"#腳本運作環境\" class=\"headerlink\" title=\"腳本運作環境\"></a>腳本運作環境</h2><p>型號<br>redmi note 8 pro</p>\n<p>解析度<br>1080x2340</p>\n<p>如果你跟筆者用的是同解析度甚至同一台手機<br>欸、恭喜、<del>我們貼貼</del> 大部份體驗會很良好</p>\n<span id=\"more\"></span>\n\n<h2 id=\"適配機型-缺乏資料,歡迎各位踴躍提供\"><a href=\"#適配機型-缺乏資料,歡迎各位踴躍提供\" class=\"headerlink\" title=\"適配機型(缺乏資料,歡迎各位踴躍提供)\"></a>適配機型(缺乏資料,歡迎各位踴躍提供)</h2><p>缺乏資料,歡迎各位踴躍提供</p>\n<hr>\n<h2 id=\"載點\"><a href=\"#載點\" class=\"headerlink\" title=\"載點\"></a>載點</h2><p><a href=\"https://www.zdjl.org/\">腳本精靈 apk</a></p>\n<p><a href=\"https://drive.google.com/file/d/15BtIQWg8qRVFHv9yN2u3V20YBUY0hlgq/view?usp=sharing\">雲水小號腳本三件套</a></p>\n<h2 id=\"安裝教學\"><a href=\"#安裝教學\" class=\"headerlink\" title=\"安裝教學\"></a>安裝教學</h2><p>下載上方兩個檔案後,安裝腳本精靈</p>\n<p>開啟腳本精靈,給予權限後,點選畫面中下方的 <strong>製作</strong><br>直到彈回主畫面後,即可關閉腳本精靈</p>\n<p>這時候,手機根目錄會出現一個叫做 <strong>自动精灵</strong> 的資料夾<br>將雲水小號三件套解壓,將檔案放入該資料夾</p>\n<p>回到腳本精靈就會看到此腳本</p>\n<h2 id=\"使用教學\"><a href=\"#使用教學\" class=\"headerlink\" title=\"使用教學\"></a>使用教學</h2><p>請使用新角色開始遊戲,並且手動玩到 1-4-2,打完貓頭鷹並解鎖 auto 系統<br>之後運行腳本即可(不用再手動玩到貓頭鷹)</p>\n<p>會這樣設計是因為大家解析度不同,很有可能我寫完的腳本你不能用<br>而開啟 auto 後的腳本邏輯相對簡單,理論上相對不會有 bug,所以將腳本啟動點放在這</p>\n<h2 id=\"無論如何都希望可以從創角開始就全自動\"><a href=\"#無論如何都希望可以從創角開始就全自動\" class=\"headerlink\" title=\"無論如何都希望可以從創角開始就全自動\"></a>無論如何都希望可以從創角開始就全自動</h2><p>開啟腳本,請點選 <strong>雲水小號全自動</strong>,之後點右下角的編輯</p>\n<div align=\"center\">\n<img src=\"https://i.imgur.com/x11mtLv.jpg\" width = \"30%\" height = \"30%\" alt=\"\" align=center />\n</div>\n\n<p>腳本出現後,開啟遊戲,到主畫面</p>\n<div align=\"center\">\n<img src=\"https://i.imgur.com/pMP0WVz.jpg\" width = \"30%\" height = \"30%\" alt=\"\" align=center />\n</div>\n請確認當前是處於新角色且從未登入狀態,如果不是,請從右上角設定中 **刪除資料** \n之後將腳本拉到第六點 **創角流程** (圖中第四點是舊的,錯誤的),長按後會出現 **從這裡開始運行** \n點選後就會從創角開始自動循環了。\n\n<h2 id=\"如果我在運行過程因為-BUG-充電-手不小心按到等原因,導致中斷執行了,可以再繼續運行腳本嗎,還是只能重刷\"><a href=\"#如果我在運行過程因為-BUG-充電-手不小心按到等原因,導致中斷執行了,可以再繼續運行腳本嗎,還是只能重刷\" class=\"headerlink\" title=\"如果我在運行過程因為 BUG/充電/手不小心按到等原因,導致中斷執行了,可以再繼續運行腳本嗎,還是只能重刷\"></a>如果我在運行過程因為 BUG/充電/手不小心按到等原因,導致中斷執行了,可以再繼續運行腳本嗎,還是只能重刷</h2><p>可以繼續運行腳本,不用重刷,這邊介紹一下腳本的大概流程<br>腳本大概可以拆成幾個區塊,由上到下依序是</p>\n<p>1.開啟 auto&跳過&下一步 2.打雲水囉 3.重開小號 4.關閉&開啟彈射世界 5.創角流程 6.手操&跳過&下一步 7.腳本手操<br>(以上名稱皆對應腳本描述)</p>\n<h3 id=\"開啟-auto-跳過-下一步\"><a href=\"#開啟-auto-跳過-下一步\" class=\"headerlink\" title=\"開啟 auto&跳過&下一步\"></a>開啟 auto&跳過&下一步</h3><p>指通關貓頭鷹(1-4-2)以後,到第 1 章全通關,這期間的所有關卡都會在這個分類內循環<br>如果在這期間中斷了腳本,<font color=#FF6600>回到有 new 關卡的地方啟動腳本即可</font></p>\n<h3 id=\"打雲水囉\"><a href=\"#打雲水囉\" class=\"headerlink\" title=\"打雲水囉\"></a>打雲水囉</h3><p>指打通第一章最終 boss 並通過最後兩個故事,獲得第一章武器寶珠 精靈的微笑 後,會切換到此流程<br>此分類涵蓋從第一章退出,進入活動頁,進雲水,被送出來結算後<br>因此,如果打完第一章後忽然中斷,想從這裡繼續執行是可以的<br>但因為打完雲水就要換帳號了,個人是建議<font color=#FF6600>各位直接手動進雲水送死,重新刷號比較快。</font></p>\n<h3 id=\"重開小號\"><a href=\"#重開小號\" class=\"headerlink\" title=\"重開小號\"></a>重開小號</h3><p>指被雲水送出來後,回到標題畫面刪除帳號資料<br>這一段區間是不會無限執行的,跟上一個分類一樣,<font color=#FF6600>卡在這建議直接手動</font></p>\n<h3 id=\"關閉-開啟彈射世界\"><a href=\"#關閉-開啟彈射世界\" class=\"headerlink\" title=\"關閉&開啟彈射世界\"></a>關閉&開啟彈射世界</h3><p>指刪除完角色資料後,重新啟動彈射世界,以釋放部分記憶體<br>跟上一個分類一樣,<font color=#FF6600>卡在這建議自己重啟,並且改用 記憶體負載 版本</font></p>\n<h3 id=\"創角流程\"><a href=\"#創角流程\" class=\"headerlink\" title=\"創角流程\"></a>創角流程</h3><p>指從主畫面進入,直到領完登入獎勵&夏日登入獎勵這段時間<br>如果創角期間有任何原因中斷腳本,可以長按這個分類並且選擇 <font color=#FF6600>從這裡開始運行</font></p>\n<h3 id=\"手操-跳過-下一步\"><a href=\"#手操-跳過-下一步\" class=\"headerlink\" title=\"手操&跳過&下一步\"></a>手操&跳過&下一步</h3><p>指領完登入獎勵,1-1-1 到 1-4-2 期間的所有流程<br>如果是在打完貓頭鷹前就發生意外,導致腳本中斷的話<br>請回到有 new 關卡的地方,長按這個分類並且選擇 <font color=#FF6600>從這裡開始運行</font></p>\n<h3 id=\"腳本手操\"><a href=\"#腳本手操\" class=\"headerlink\" title=\"腳本手操\"></a>腳本手操</h3><p>此分類與上一個分類連動,當運行手操流程,進關卡時,會進入此分類<br><font color=#FF6600>無論任何情況都不會從這個分類中繼續執行</font></p>\n<h2 id=\"若是因為解析度問題,導致這個腳本在你的環境中有一堆問題\"><a href=\"#若是因為解析度問題,導致這個腳本在你的環境中有一堆問題\" class=\"headerlink\" title=\"若是因為解析度問題,導致這個腳本在你的環境中有一堆問題\"></a>若是因為解析度問題,導致這個腳本在你的環境中有一堆問題</h2><p>請改為使用 <strong>雲水小號半自動</strong><br>此版本只會協助自動通關貓頭鷹後的關卡&進雲水送頭<br>這一段的邏輯相對簡易,如果遇到問題各位也可以試著修改。</p>\n<h2 id=\"一些話\"><a href=\"#一些話\" class=\"headerlink\" title=\"一些話\"></a>一些話</h2><details>\n <summary>一些廢話</summary>\n <p>\n 想寫這個腳本的想法,從修車大開始寫的雲水行前手冊時就有了;\n 時常一起玩的朋友沒有完美雷拳盤,希望可以繼續一起玩這款遊戲,大概是像這樣的想法。\n 雖然現實似乎是連完美盤也只能哭,能不能幫到他已經是未知數了\n </p>\n <p>\n 官方在競速開始前一刻,加強了模擬器的驗證機制,\n 這對於腳本的普及是毀滅性的;\n 模擬器可以提供的是統一的硬體規格與解析度,\n 關閉模擬器並不能遏阻使用外掛的使用者。\n 對於腳本的分享,會因為要考慮到機種規格不同,遇到極大的考驗,\n 這是十分打擊熱情的。\n </p>\t\n <p>\n 儘管如此,活動開始幾天後,知道版上需要腳本的人仍佔大多數,死馬當活馬醫,姑且還是嘗試著寫了一下,雖然已經預想的到腳本會有多難推廣了(扶額);\n 希望各位願意點進這篇文章、願意幫助他人的你,哪怕只是想搶救下自己的排名,也別忘記保持善心,\n 不用理會其他人說腳本是外掛這類反智言論,純粹的理念會是你堅持使用腳本的秘訣。\n </p>\n</details>\n\n<hr>\n<h2 id=\"常見問題\"><a href=\"#常見問題\" class=\"headerlink\" title=\"常見問題\"></a>常見問題</h2><p>Q: 腳本精靈自行停止運作<br>A: 通常是因為記憶體回收機制,自動將腳本精靈關閉導致,這時再次開啟腳本精靈也會有問題,請重開機,並且將腳本精靈設定成不可自動回收的應用程式(每家手機廠設定方式不同)<br>Ex:</p>\n<div align=\"center\">\n<img src=\"https://i.imgur.com/yoVC16o.jpg\" width = \"30%\" height = \"30%\" alt=\"\" align=center />\n</div>\n\n<p>Q: 我的角色打關卡死掉,腳本就不會動了<br>A: 欸….我測試期間至少刷了 20 隻帳號,發文當下也在刷,目前沒有死過<br>亞里沙打 1 章跟鬼一樣,1 章的難度應該….是不會死的<br>萬一真刷出死掉的狀況…我..我再想想辦法。</p>\n<p>Q: 我的腳本擅自將遊戲關閉後,不會重新啟動<br>A: 部分機種不會讓腳本可以開關遊戲程式,筆者自己也是這一類機型,請使用 <strong>雲水小號全自動(記憶體負載)</strong><br>使用此版本不會自動重啟遊戲,大約 1 小時(刷 1~2 隻角色後),需手動重啟遊戲,否則整隻手機會因為記憶體塞滿卡住。<br>p.s.就算是使用 <strong>雲水小號全自動</strong> 的使用者,也推薦每隔一小時查看一次手機,尤其是一開始幾分鐘,最好一直看著,腳本終究只是腳本,只要出現突發狀況就會炸掉 <del>當然也有筆者寫得不好的原因</del></p>\n<p>Q: 動作運行失敗,已暫停<br>A: 通常是運行期間閃退,導致部分權限拿不到,重開機解決</p>\n<p>Q: 截屏為空,請確定是否開啟了其他截屏軟件<br>A: 關閉其他允許顯示在應用上層的軟件後再嘗試</p>\n<p>Q: 運行失敗&卡在奇怪的地方不繼續動了<br>A: 請依照上方教學,從一般運行改為編輯模式,可以試著調整抓取圖片解析度,或是抓圖範圍,使腳本適配於自身機種<br>並且提供機型&解析度&卡住的地方,在下方留言給我,又或是透過巴哈站內信給我,以利資料蒐集&幫助更多的人</p>\n<p>不知道該怎麼留言時,可以試著使用的留言格式</p>\n<pre><code>機種(必填):\n解析度:\n卡住的地方(必填):\n狀況的補充說明:\n想說的話:\n截圖:\n</code></pre>\n",
"tags": [
"教學",
"彈射世界",
"遊戲",
"腳本"
]
}
]
}