laxiflora的小天地

前進軟體工程師的練功之路

0%

機器學習任務攻略


 - 當有一個模型的表現不佳,有時候不一定是overfitting的問題
 - 問題來源可能有數種
- Model Bias:模型本身的彈性不足,值域過小導致找不到最佳解
- Optimization Issue:模型的彈性是夠的,也就是$f^*(x)$存在,只是因為optimizer不給力,始終無法把$\theta$帶到loss更小的地方

如何分辨是model bias issue or Optimization issue?

 - 以下圖為例

  • 通常我們會認為這是模型overfitting了,才會導致層數增加反倒命中率下降
  • overfitting固然有可能,但它不是唯一的可能性,我們應該要從訓練資料的loss下手
  • 可以發現就算是訓練資料,56層的loss也是大於20層的,故排除overfitting的可能
  • 至於模型彈性這個可能也可以排除,因為56層的複雜度>20層,故56層的loss只可能比20層還小,若是顛倒的話表示應該不是模型彈性問題,而是optimizer的鍋

  • 若是發現類似優化器的問題,可以試試看先跑一些比較淺層的model或是簡易的model(如linear regression),先觀察得出來的結果
  • 再跑深度的model,比較他們的結果,若深度的結果沒比較好,可以考慮換optimizer
    原因樹狀圖(?

Overfitting的成因

  1. 若訓練資料不足,模型彈性過高也可能導致overfitting(增加training data最有效)
    • data augmentation也是一種方法(ex.圖片翻轉作為新資料)
  2. 降低模型的彈性也可以降低這個可能
  3. 採用一些技巧
    • Early stopping
    • Regularization
    • Dropout
    • Less features

衡量模型

  • 或許某個model在所有model裡面test成績最突出,但它未必會真的是最好的模型(運氣問題)
  • 極端範例,一個模型剛好隨機出了最好的結果
  • 所以testing set有分public跟private,避免一直上傳模型賭出最好成績

N-fold Cross Validation

  • 把train set切成3份,2份是training data,1份是val data
  • 交叉身分去訓練n次

upload successful

data mismatch

  • training data 跟 testing data有不同分布
  • ex. 機器學習2020年觀看人數預測2021年觀看人數,很高可能會mismatch

正課內容介紹

Supervised Learning

Self-supervised Learning

  • 在訓練之前先做基本功(Pre-Train)
  • 訓練集就不需要label了
  • 比如在網路上先爬相關資料
  • 以分類圖片為例,實際分類圖片的過程稱為(Downstream)
  • Pre-trained model(又稱Foundation Model)就好像OS,Downstream就像APP
    • 最出名的模型就是BERT

Lec6 : GAN

  • 一般函數需要大量成對的X與Y來讓他們配對
  • 現今只需要大量的X,就可自行產生Y

Lac12 : Reinforcement Learning

  • 當資料很難以標註時使用 (ex.學會下圍棋)

進階課題

Lac8 : Anomaly Detection

  • 過擬合等問題

Lac9 : Explainable AI (可解釋性AI)

  • 不只是知道答案,還要讓機器知道為甚麼
  • EX.PNG與JPG輸入的問題ww

Lac10 : Model Attack

  • 在圖片加入一點點雜訊,讓圖片難以識別
  • 介紹攻擊技術與防禦可能性

Lac11 : Domain Adaptation

  • 當訓練資料與測試資料的分布不相似
  • EX. 手寫數字辨識,黑白與彩色的差別

Lac13 : Network Compression(模型壓縮)

  • 在嵌入式、小硬體跑ML

Lac14 : Life-long Learning

  • 機器能像人一樣一直學習所有技術
  • 挑戰有哪些

Lac15 : Meta Learning(學習如何學習)

  • 以往都是人設計學習演算法給機器
  • 讓機器從大量學習任務裡面發明更好的演算法
  • Few-shot Learning通常與他相關

前言:什麼是機器學習

機器學習,就是用機器的力量幫忙找出一個合適的函數

  • 函數的輸入可以是vector、matrix、sequence
  • 輸出可以是數值(regression)、類別(classification)、文章、圖片
    深度學習,就是用神經網路的方法來製造函數

預測頻道觀看人數

基本原理

  • loss function的輸入是weight跟bias,輸出是這組參數有多好」
  • Optimization : 找出最好的一組參數(w*,b*)使loss function最小
    • 常用gradient descent
      • 隨機決定w_0
      • 把L對w做偏微分,若斜率>0則提高w,反之降低w(變動量=η,屬於hyperparameters)
step1: 製作一個學習函數

純粹Linear Model

  1. 先隨便設一個函數
    $$f = w_0 x_1$$
    其中$x_1$是昨天的觀看人數

  2. 根據loss function的結果嘗試把$w$、$b$優化,使得$f = w_0 x_1 + b$有最小損失函數(這裡優化方法採梯度下降)

  3. 跑測試結果發現$w$很接近1 (看似很合理,因為昨天的頻道觀看人數與今天的頻道觀看人數差距應該不多),其實預測都是前一天的結果平移而已,命中率有限 -> 試試看一次看多幾天,變成以周為單位

  4. 修改函數
    $$f_1 \leftarrow y = b+ \sum_{j=1}^7 w_j x_j$$
    表示預測一天的觀看人數,需要前面七天觀看人數作為參考

  5. 命中率有效提高了(這是linear model)

Piecewise Linear Curve

  • linear model過於簡單,x與y之間的關係是直線(w改動斜率,b改動原點)
  • 利用一系列的線性函數相加,使加總後的函數有彎折
  • Piecewise Linear Curve = constant + sum of a set of 藍線 (下圖紅線就是我們想求的「預測模型」函數f )
  • 假設有無窮多個藍色function,就可以塑造出任意形狀的紅色function,如上圖所示

當特徵=1

  • 如何寫出藍線式子?
    • 藍線函數令為 $f_{blue1} \leftarrow y = c_i sigmoid(b_i+w_ix_1)$
    • 使用sigmoid,把藍線變成曲型來逼近原型
    • 原型稱為hard sigmoid
    • 讓藍線凸在對的地方->修改w,b,c
  • 綜合前面的內容,我們就可以求得單一feature下的紅色function(而這樣理論上可以逼近任何連續函數):
    $$f_{red1} \leftarrow y = b + \sum_{i}c_i sigmoid(b_i + w_ix_1)$$
  • 其中b也可以根據不同藍色function有所不同,把b丟入$\sum$即可

當特徵>1

  • 當然,我們也可以進一步推廣,增加feature的量(目前只有一個,$x_1$的某特徵乘上各藍線的$w_i$)

  • 解法就是修改藍線函數變成$f_{blue2} \leftarrow y = c_i sigmoid(b_i + \sum_{j} w_{ij}x_j)$
    upload successful

  • 同理把藍色函數相加再補上常數,紅線函數則可令為
    $$f_{red2} \leftarrow y = b + \sum_{i}c_i sigmoid(b_i + \sum_jw_{ij}x_j) $$

  • $w_{ij}$表示第i個sigmoid函數(aka第i條藍線)中,對於第$x_j$個特徵的權重

    用線性代數的方式來理解
    • 繼續剛剛特徵>1的討論
    • 令$r_i = b_i + \sum_{j}w_{ij}x_j$ (換句話說r就是sigmoid函數內的運算結果),則可以把這個等式簡化為一個矩陣相乘
      函數的示意圖如下:
      upload successful
    • 而$r_i$做sigmoid()以後就會得到$a_i$
    • 又稱$a = \sigma(r)$
    • 最後把$a_i$乘上各自的$c_i$後,加總得到剛剛的$f_{red2}$ (c在相乘時是$c^T$矩陣)
    • $b、c^T、b_i、W、x$五個向量append起來以後統稱為$\theta$

    upload successful

step2: 定義訓練資料的損失函數
  • Loss is a function of parameters $L(\theta)$ ($\theta$就是step1中的那個)
  • 就是x丟進去,測量y-hat跟y的差別多大
step3: 最佳化模型
  • 假設最佳化的參數向量是$\theta^*$
  • 則$\theta^* = arg$ $min_{\theta}L$
  • 首先,隨機選一個$\theta^0$作為初始值
  • Gradient descent作法
    $$
    g^T =
    \begin{bmatrix}
    \frac{\partial L}{\partial \theta_1}\
    \frac{\partial L}{\partial \theta_2}\
    \frac{\partial L}{\partial \theta_3}\
    \ldots
    \end{bmatrix} |_{\theta = \theta_0}
    $$
    • 註:打不出1xn向量= =
  • 則稱 g = $\nabla L(\theta^0)$

 求出g向量以後,就可以把它拿來更新參數列:
 

  • 亦即 $ \theta_1 \leftarrow \theta_0 - \eta g $

Note

  1. 實務上通常做gradient不是所有資料都加入去更新,而是先把資料切成batch分別計算出$L^i$

upload successful

  • 一次的更新$\theta$是一次update,一次看完所有batch算一次epoch
    • 所以一個epoch會有好幾次update
  1. Hard sigmoid也可以用兩個ReLU做出來

upload successful

  • 當然因為是要用兩個ReLU做出來,所以相應的紅線函數就要改
    $$
    f_{red_{ReLU}} \leftarrow y = \sum_{i}c_i max(0,b_i + \sum_j w_{ij}x_j)
    $$
  • 這種做法比sigmoid好(下周講解)
  • ReLU跟sigmoid同為activation function

 

step4: 繼續修改模型 

 - 同樣的求a過程,我們可以做好幾次

upload successful
   注意,圖中的W’、W、b’、b互不相同

 - 要做幾層同屬hyper parameter
 


 名詞解釋
 
upload successful

機器學習總編首頁

台大李弘毅老師的課

2021年預習筆記

Ch 1:Introduction of Deep Learning

[1-1]監督式學習概論

  • 介紹甚麼是機器學習,以及機器學習的任務
  • 以預測李宏毅老師的頻道觀看人數為例,介紹監督式學習的運作流程

    關鍵字:
    Linear model、Piecewise Linear Curve、sigmoid介紹、ReLU介紹、theta、Batch、Epoch


Ch 2:What to do if my network fails to train

[2-1]機器學習任務攻略

  • 機器學習上可能碰到的疑難雜症介紹,以及如何改善
  • 區分命中率問題到底是overfitting、model bias issue還是Optimization issue,甚至是data mismatch
  • 當一個模型單次測試test data成績很好,就保證是模型很好嗎? 如何更確保模型真的很好呢?

    關鍵字:
    Overfitting , model bias issue , Optimization issue之分辨、N-fold Cross Validation、data mismatch


[2-2]類神經網路訓練不起來怎麼辦(一)

  • 續2-1的大綱,專注在討論optimizer失靈的解決方法與成因分辨
  • 提供一個應用線性代數的例子:如何讓一個卡在鞍點的$\theta$逃離鞍點 (但計算曠日廢時)
    • loss function = MSE , optimizer = 梯度下降法
  • 絕大多數的模型其實若卡在critical point,都是卡在鞍點而非局部最小值

    關鍵字:
    Optimization issue、critical point、saddle point、local minima、三體III:死神永生


[2-3]類神經網路訓練不起來怎麼辦(二)

  • 續2021版1-1的內容,我們這次探討batch size對於training與testing有甚麼影響
  • big batch size好還是small batch size好? 要看hyper para怎麼調以及對於訓練速度的需求
  • 額外介紹另一個對抗saddle point或local minima的技術 : momentum(慣性)

    關鍵字:
    batch size、momentum


[2-4]類神經網路訓練不起來怎麼辦(三)

  • 這次討論Optimizer中,關於Learning rate的問題
  • 一個模型的跑動,常常碰到單一learning rate所會碰到的困境,所以我們需要可以隨著單次訓練中各種情況變動的learning rate
  • 提供兩種改變learning rate的作法以及相關參數計算
  • 簡單介紹這些手法被現今哪些熱門優化器使用

    關鍵字:
    Learning rate($\eta$)、Adaptive learning rate、Adam-learning rate、RMSProp、Warm up(learning rate)、learning rate decay


[2-5]類神經網路訓練不起來怎麼辦(四)

  • 簡短介紹當碰到分類問題的時候,最後一層激發函數該選哪個函數
  • 介紹了one-hot vector作為新的輸出型態,以及基本原因
  • 介紹分類模型的常用loss function,以及用optimizer的角度看兩種loss function的差距
  • 因為是簡短版,內附有冗長版 完整版連結

    關鍵字:
    one-hot vector、Softmax、cross entropy


[2-6]類神經網路訓練不起來怎麼辦(五)

  • 簡短介紹Batch Normalization的技術
  • 這是另一種直接改變error surface的技術(相對於動態lr)
  • 關於batch normalization為何能夠讓模型訓練更好仍是個謎

    關鍵字:
    Feature Normalization、Batch Normalization


Ch3 : image as input

[3-1]卷積神經網路

  • 介紹CNN neurol network 以及他的相關常用術語
  • 旨在讓我們了解CNN,一個入門指引
  • 以CNN:apply in image為例,用於文字辨識或是語音辨識需要更多參考相關文獻,用於影像的CNN不一定適用其他輸入

    關鍵字:
    Receptive Field(Kernel size)、Filter、Parameter sharing、Pattern、Stride、Convolusion、Feature Map、Subsample (pooling)、padding(pads)、channel、(Rescale、data augmentation)


Ch4:Sequence as input

[4-1]自注意力機制(上)

  • 介紹在碰到輸入的時候不只是一個向量,甚至可能輸入的向量數量會變動,該怎麼處理
  • 簡單介紹輸入為sequence的常見問題以及不同輸出的類別
  • 介紹如果輸入的sequence,不同vector之間互相影響該怎麽處理
  • 本課程著重在討論sequence中每個vector都會有獨立一個label輸出的情況

    關鍵字:
    Sequence、word embedding、window(語音處理)、self-attention、transformer(提到)、seq2seq(提到)


[4-2]自注意力機制(下)

  • 常用(上週討論的)self-attention計算方法,其實就是很多的矩陣相乘
  • 當一個vector出現在sequence的不同位置也需要考量,該怎麼處理 -> Positional encoding
  • 因為attention matrix之空間大小是$\theta(n^2)$,所以當sequence很大(ex.音訊)時,該怎麼處理 -> Truncated self-attention
  • self-attention可否用於影像呢? 如果這樣使用的話,self-attention跟CNN差別在哪?誰優誰劣呢
  • Self-attention與RNN之間的差別在哪
  • self-attention如何使用在graph中呢?GNN是什麼呢(refrence)
  • Reference各種transformer的變形(survey paper)
    PS. 這塊領域目前很新,論文大多產自2019/2020年

    關鍵字:
    Transformer(self-attention塊)、positional encoding、truncation self-attention、v.s CNN、v.s RNN、GNN


Ch5:Sequence 2 Sequence

  • 算是Ch4中的一種特例輸入
  • 5-1就是2-6,介紹batch norm

[5-2]Transformer(上)

  • 首先講解seq2seq類模型所可以解決的問題與應用,接下來講解seq2seq的其中一種模型「transformer」
  • 介紹transformer的大架構圖,以及transformer encoder的分解步驟
  • 除了原始的transformer encoder模型圖以外,還有reference其他種transform encoder的架構
  • BERT其實就是transformer的encoder

    關鍵字:
    Transformer(總覽 & encoder)、seq2seq類應用


[5-3]Transformer(下)

  • 接續5-2,介紹原始Transformer decoder之詳細步驟,以及計算loss的方式
  • 介紹為何transformer的loss function要用cross entropy,而不能直接用如BLEU等等判別算法,並說明他們兩者之間並不一定正相關
  • Transformer依decoder訓練方式有分為AT與NAT,本課主要講姊AT
  • 介紹Seq2Seq常見的一些training技巧與問題

關鍵字:
Transformer(decoder、loss)、AT & NAT、Scheduled Sampling、Beam search、Teacher forcing、Copy mechanism、Guided Attention


Ch6:Generation (Generative Adversarial Network, GAN)

[6-1]生成式對抗網路(一) – 基本概念介紹

  • 介紹GAN的訓練過程、用途、基本原理
  • GAN變種非常多
  • 這集超油

關鍵字:
discriminator、generator、Train GAN process、GAN zoo


[6-2]生成式對抗網路(二) – 理論介紹與WGAN

  • 介紹Discriminator與Generator如何訓練
  • true data跟generated data之distribution差距過大,原本的JS GAN discriminator很難evaluate
  • WGAN的discriminator算法與reference
    Note:這部看不是很懂,要複習

關鍵字:
WGAN、Wasserstein distance、1-Lipschitz function(待查)


[6-3]生成式對抗網路(三) – 生成器效能評估與條件式生成

  • 續6-2,貼了一些關於GAN training tips的延伸學習
  • GAN + Transformer (GAN in sequence generation)
  • 除了GAN以外,還有哪些也是在做generation的model
  • GAN的優劣如何衡量? 會有哪些問題被忽略?
  • Conditional GAN(把開頭GAN被拔掉的x放回來了)
  • Conditional GAN相關天馬行空的應用

關鍵字:
VAE、FLOW-based Model、Mode Collapse、Mode Dropping、Inception score(IS)、Frechet inception distance(FID)、Conditional Generation


[6-4]生成式對抗網路(四) – Cycle GAN

  • 以影像風格轉換為例,說明cycle GAN如何應用在unsupervised learning上面
  • reference 可以接受更多風格的非監督式GAN
  • 介紹其他更多任務的GAN unsupervised learning (撇除圖片)

Note: 有一些地方觀念模糊,為何generator輸出是文字,丟給discriminator會出現問題?為何需要用RL?

關鍵字:
cycle GAN 、GAN unsupervised learning、seq2seq generator unsupervised learning


Ch 6.5 :Recent Advance of Self-supervised learning for NLP

以BERT、GPT為例介紹近期self-supervised learning model的原理與在NLP上的應用

[X-1 & X-2]自督導式學習(一、二) – BERT簡介

  • 簡介BERT的訓練(pretrain)方法,以及一些應用
  • how to fine-tune BERT in some cases.
  • 帶一下pretrain decoder的方法

關鍵字:
Fine-tune、pretrain (Next sentence prediction、sentence order prediction(SOP)、masking input)


[X-3]自督導式學習(三) - BERT的奇聞軼事

  • Why BERT works? 簡單介紹word embedding

  • 關於BERT的表現作了一些相關實驗

    1. BERT學習填空,是否真的是看得懂文章? 如果輸入的sequence毫無邏輯,BERT是否受到影響?
    2. 如果BERT pretrain使用多種語言,是否可以用於解決新的語言的問題?
  • 對於BERT的猜想

    關鍵字:
    contextualized word embedding、Multi-lingual BERT


[X-4]自督導式學習(四) – GPT的野望

  • 介紹另一個self-supervised learning model:GPT
  • GPT的任務目標比起BERT更加有野心:期望能夠輸入task description與問題,就能自己預測出答案
  • GPT的訓練方式類似transformer的decoder,給定一個seq,要能預測下一個token是甚麼

    關鍵字:
    GPT


Ch8:Auto-encoder/ Anomaly Detection

[8-1]自編碼器(上) – 基本概念

  • 介紹auto-encoder的模型,以及它的學習任務
  • auto-encoder跟現今cycle GAN的2 generator關係很像
  • 介紹de-noising auto-encoder,並且分析它與現今的self-supervised learning model(BERT)的相似
  • auto-encoding 具備降維壓縮的功能

關鍵字
de-noising auto-encoder、embedding(Representation, Code)、dimention reduction


[8-2]自編碼器(下) – 領結變聲器與更多應用

  • 柯南的領結變聲器,就是一種voice conversion的應用。現實中要做到這一點,就需要對embedding有更多理解 – Feature Disentanglement
  • 除了傳統的auto-encoder之外,還有各種auto-encoder的變形
  • embedding(representation)的各種花招以及模型修改
  • auto-encoder的更多應用,比如本次作業會用到的異常檢測

關鍵字
Feature Disentanglement、Discrete Latent Representation、Text/Tree as Representation、VAE、Anomaly Detection


Note:
8-3 ~ 8-8 是Anomaly Detection主題的內容
第一部影片連結
這裡先略過


Ch9:Explainable AI

[9-1]機器學習模型的可解釋性(上) – 為什麼類神經網路可以正確分辨寶可夢和數碼寶貝呢?

  • 為何需要可解釋性的AI? 對於AI可解釋的標準定義是?
  • 可解釋性AI的類型
  • 要能找出一個輸入的哪個部位重要,有哪些技巧?
  • 要能看出機器怎麼對輸入做處理,有那些技巧?

關鍵字:
local/global explanation、Saliency map、SmoothGrad、Visualization、Probing


[9-2]機器學習模型的可解釋性(下) – 機器心中的貓長什麼樣子?

  • 著重在global explainable的各種approach
    • 觀察convoluation layer output
    • 看classifier output
    • 做一個簡易版可解釋的model模仿他的行為

Ch10:Adversarial Attack

[10-1]來自人類的惡意攻擊(上) – 基本概念

  • 介紹攻擊的原理、作法之精神
  • 常見attack相關限制的介紹與計算方式
    • 新圖與原圖的距離差距與計算方法
  • 實際攻擊的一種approach method

關鍵字:
benign image/attacked image、FGSM


[10-2]來自人類的惡意攻擊(下) – 類神經網路能否躲過人類深不見底的惡意?

  • 除了白箱攻擊以外,講解黑箱攻擊的技巧
  • 簡單探討為何黑箱攻擊具有可行性 -> 資料的特徵問題,而非模型?
  • 可攻擊的領域與方法
  • 如何防禦黑箱攻擊

關鍵字:
Proxy network、Ensemble attack、One pixel attack、Universal Adversarial Attack、Adversarial reprogramming、Backdoor in model、被動:Randomization、主動:Adversarial training、、、、、、


Ch11:Adaptation

[11-1]概述領域自適應

  • 概述何為Domain shift
  • Domain adaptation名詞解釋
  • 根據condition的不同(target,source差距、手握的data量),簡單講解domain adaptation的各種approach
    • 本課著重在target domain unlabeled data很多的前提
  • 提供各種condition的參考文獻(列入關鍵字)

    關鍵字:
    source/target domain、Domain Adversarial training、Feature Extractor、Domain Classifier、Label Predictor、Universal domain adaptation、Testing time training、Domain Generalization


CH12:Reinforcement Learning

[12-1]概述增強式學習(一) – 增強式學習跟機器學習一樣都是三個步驟


2022年正課筆記

[1-1]正課內容介紹

  • 介紹各講的重點核心
  • $X-y$中的X對應的是第幾講,2021年的編號也同樣,是按造課程網頁的syllabus排的

[2-1]再探寶可夢、數碼寶貝分類器


作業區(有寫的部分orz)

作業3 - 圖像辨識,使用CNN


作業4 - 語音辨識,使用Transformer


作業5 - Transformer


作業6 - GAN


作業7 - BERT

讀取資料

需import的套件

1
2
torch.utils.data.Dataset
torch.utils.data.DataLoader
1
2
3
dataset = MyDataset(file)
dataloader = DataLoader(dataset, batch_size, shuffle=True) //Training用true, Testing用false

  • MyDataset屬於自定義的類別,定義如下:

    1
    2
    3
    4
    5
    6
    7
    class MyDataset(Dataset):
    def __init__(self,file):
    self.data = ...
    def __getitem__(self, index):
    return self.data[index]
    def __len__(self):
    return len(self.data)
  • pytorch裡面的資料大多是以tensor來表示(向量)

  • 我們除了讀取資料,也可以自行創建,範例如下

    1
    2
    3
    x = torch.tensor([1,2],[3,4]) // 得到2x2
    x = torch.from_numpy(np.array([1,2],[3,4])) //也可以自numpy轉移矩陣
    x torch.zeros([2,2]) //創建一個shape為(2,2)的全0矩陣

常用函數

  • transpose : 讓兩個維度之間互換
    範例

    1
    2
    3
    x.shape() == (2,3)
    x = x.transpose(0,1)
    x.shape() == (3,2)
  • x.squeeze(0):將一個大小為1維度消除

  • 相對的,呼叫x.unsqueeze(0)就是增加一個大小=1的維度

  • torch.cat:將一個維度連接起來(其餘維度大小需相同)

常見問題

  • data type
  • 運算用的處理器 x = x.to('...')

目錄

如何在get repo裡面加上README ?
如何在hexo設置的網頁插入圖片 ?
如何在hexo設置網頁錨點 ?
如何在hexo輸入數學式 ?

如何在git repo裡面加上README

  • 由於hexo會幫你自動把md檔轉成html上傳github,因此直接在_posts裡面新增README是不可行的

Step1

  • 到_config.yml裡面找到#Directory子項,在裡面的skip_render補上README.md

Step2

  • 完成以後就可以直接在source/_posts裡面直接補上README囉~上傳的時候也可以正常顯示了

附註:如果想備份blog原始檔到github,README應該做在根目錄上而非source內,且兩個README可以獨立存在!

(回目錄)


如何在hexo設置的網頁插入圖片

  • 如果直接在source/image放入圖片並且在md連連結的話,會連不上圖片
  • 可以使用admin套件來協助

Step1

在終端機輸入

1
$npm install hexo-admin --save

來安裝admin套件

Step2

  • 安裝完以後,在localhost狀態下補一個/admin就可以進入admin介面
  • 在admin介面可以直接看到你的所有貼文,按下筆進入編輯,在這頁面下直接貼上圖片即可

  • 在貼上成功以後會出現
    1
    ![upload successful](\\images\yourPicName.png\)
    請把\改成/並且把\\改成../即可 (Win11,其他系統可能改法不同,請依照系統特性修改)

(回目錄)


如何在hexo設置網頁錨點

markdown語法為:

1
[連結文字](#你要連結的標題名稱)
  • 碰上空格需要以-代替
  • 如果碰上.或是(),依照各編輯器與網站,處理方法不同
    • 有些編輯器直接忽略即可
    • 有些編輯器(如本站)同樣用-代替(複數.跟()相連也只需要一個-),若遇到結尾有)可以忽略
  • 以錨定標題『有夠 歪七扭八)標()題)』為例,語法為
    1
    [嘗試看看吧!](#有夠-歪七扭八-標-題)
    嘗試看看吧!

有夠 歪七扭八)標()題)

(回目錄)


如何在hexo輸入數學式

原本以為這只是小問題,結果卻搞了我整整半天…原生hexo渲染器對於LaTex支援性太差了…這點輸HackMD

法一:hexo-renderer-marked + hexo-math

參考資料來源
hexo-math頁面

  • Hexo預設的renderer是不支持直接在md中使用$...$的,一般來說推薦的工具是hexo-math,直接在終端機輸入以下指令即可安裝
    1
    npm install hexo-math --save
  • 然而雖然我們可以直接在md檔中用$…$輸入LaTex表達式,但因為”"屬於特殊符號,都會先被markdown先行解析,因此我們每次要使用到\都需要先在前面打一個\來避免他被吃掉(\)
  • 依照官方文件建議,我們可以使用hexo-math指定的標籤『{% math %} ... {% endmath %}』來包住數學式,這樣我們就可以防止數學式的\符號被markdown randerer影響
    • 這麼做的好處是寫表達式不用一個一個去處理\,但是壞處就是在對於沒有支援hexo-math的地方使用這樣的標籤會導致相容性出問題(而且那陀標籤很笨重),使網頁跑版。

PS. 與法三相對,是選擇跟renderer規則和平共處的做法(不改裝pandoc或改主題的前提下),現在回來看這做法好像不錯orz…

法二:hexo-renderer-markdown-it + markdown-it-latex2img

markdown-it-latex2img頁面
hexo-renderer-markdown-it頁面

  • 相比於官方原始的renderer,這個版本的渲染器支援更多功能
  • markdown-it-laten2img是一個plugin,用於支援LaTex的文字格式
  • 若採用這個方法,需要先移除原版的renderer
    指令如下:
    1
    2
    3
    npm uni hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
    npm i markdown-it-latex2img --save
    安裝完以後,到_config.yml中補這段:
    1
    2
    3
    4
    #markdown setting for hexo-renderer-markdown-it
    markdown:
    plugins:
    - markdown-it-latex2img
    就可以了
    PS. 目前已知問題:改用這個renderer會導致錨點功能失效!(因為整個渲染器被改掉,可能導致原始的一些符號渲染成其他符號而讓原本的文本失效!)
    PPS. 因為後來連admin插件都不能用,原本的圖片連結都失效了,不得已只好放棄這個做法

法三:

筆者處理這個問題的時候弄到頭昏腦脹…直接貼別人的教學網誌
請參照這篇網誌

目前已知問題:

  • 因為有改到渲染escape的規則,所以會導致有些東西失靈(同前面法2的原因)
  • <detail>不可使用
  • \也不再會被丟入特殊字元中 (這是為了配合LaTex裡面動不動就需要用到\,所以必須把\的保留字移除)
    • 這樣做的壞處是(、)、.、\、\n、\t、<>、[]等等特殊符號不可跟某些需要用到這些符號的指令混用了
    • ex: 不能在連結內打[]

目前這樣設置只是折衷,不可能兼顧方便性與相容性(打$$可以切LaTex inline)、又兼顧全面性(\的保留字依然適用),只能說,當有些保留字
衝突的時候真的就只能犧牲一者(所以你在我的網誌裡面會看不到toggle list,因為\被無視了XD,請善用錨點功能)

更新:最後反璞歸真只用hexo-renderer-marked + hexo-math 居然可以用$$而且\不會被無視… 雖然我不知道發生甚麼但總之他動了…orz

upload successful

法四

直接使用hexo next theme…

目前設法:

  • 使用hexo next theme
  • 安裝hexo-math
  • 使用原始的renderer
  • _config.next.yml裡面找到math,enable mathjax,且every_page= true

Note: 如果用Katex會跑版,然後如果用mathjax配上hexo-renderer-markdown-it會讓圖片的_(或其他字元)被渲染器被吃掉導致無法顯示
參考資料:hexo-next官方文件

https://blog.csdn.net/lzs781/article/details/105592503

如何讓hexo與hackMD更加兼容

圖床

(回目錄)


在C++中,我們常常會使用Container來存儲資料,而Container分為三種

  • Sequence Container
  • Associative Container
  • Container Adapters

    在這裡簡單介紹一下他們的特性,暫不包括method以及使用範例的部分

Sequence Container

  • 這類的容器資料是有序存放的
  • 常用範例如Vector、Deque、List

Vector(常用)

  • 類似一個動態大小的陣列
  • 支援隨機存取
  • 保證記憶體空間連續 (可善用Spatial Locality)
  • 雙頭皆可加入元素,且加入與刪除的複雜度其平攤成本均為O(1)
  • 相比於Deque,insertion in rear在速度上更有利
  • 一般建議除非很清楚知道使用其他結構的原因,不然建議使用Vector

Deque

  • 又名double-ended queue
  • 跟vector很像,但是不保證記憶體空間連續
  • 相比於Vector,insertion in front在速度上更有利

List

Associative Container

  • 這類容器中的元素無序存放,但通常元素之間有對應關係
  • 常用範例如Set、Multiset、Map、Multimap

Set

  • 如數學集合定義,集合內同樣的元素只允許存在1個,若是重複加入同樣元素則會被忽略

Multiset

  • 這類集合允許重複的元素存在於集合中,這個結構會追蹤各個元素有幾個

Map

  • 又名Associative Array
  • 有點像Python的基本字典,一次插入是一對key-value

Multimap

  • 有點像python裡面的字典,不過每組value都是一個list(multiple values for the same key)
  • 當用一個key搜尋的時候,得到一個包含所有值的container

Container Adapters

  • 一種介面,用於放在一個Container之上,用於限制他的方法
  • 比如我們會用Stack adapters型態宣告Deque Container,限制Deque的功能,讓他表現得像Stack
  • 常見範例如Stack、Queue、Priority_queue

Stack

  • LIFO access
  • 通常架在Deque上

Queue

  • FIFO access
  • 通常架在Deque上

Priority_queue

  • 插入的元素按照所決定的優先順序(優先取最低值)排列,其餘表現同queue
  • 內部通常是用heap實作,所以通常架在vector上面

以上是比較常用的一些STL容器以及相關介紹,更多的內容(物件的方法、複雜度等等)可以到這裡翻閱

起頭

部落格開張的第一篇文章,就決定以部署hexo產生的靜態網頁到github上來開頭了!

前置需求

  • 常用的文字編輯器(我是用visual studio code)
  • node.js



    安裝完之後,就可以開啟終端機來安裝hexo了~

hexo的環境建置

Step1. 安裝hexo

  • 打開終端機以後,輸入以下指令安裝hexo
1
npm install hexo-cli -g
  • 安裝完以後,可以在終端機輸入’hexo -v’,確定一下hexo是否成功安裝並顯示版本。

Step2. 初始化一個Hexo資料夾

輸入以下指令

1
hexo init <資料夾名稱>

則hexo會幫你產生一個資料夾,這個資料夾內就是你的blog根目錄了

Step3. 在資料夾安裝必要檔案

  • 目前的資料夾內部還沒有東西,首先先把終端機的目錄切換到剛剛產生的資料夾,接著執行以下指令來安裝所需要的套件:
    1
    npm install
    至此基本的hexo網頁架構就完成了!你的blog資料夾應該會長得像這樣:



之後要針對網頁內容的修改都會到source/_posts裡面更改

Step4. 建立一個新的網誌

  • 如果想要建立一個新的空白網誌,在終端機輸入
    1
    hexo new post "你的網誌標題"
    hexo就會幫你建立一個新的網誌,並且會在 source/_posts 新增一個md檔,md檔使用markdown語法來撰寫,因此建議對markdown有些基本認識[點我來去看新手教學]。在md檔裡面撰寫的內容會直接更新到網頁上


  • 如果想要測試你的網站的實際模樣,可以輸入
    1
    hexo server
    或是
    1
    hexo s
    來讓hexo把網頁部署到localhost,根據終端機顯示的ip用瀏覽器打開就會看到你剛剛的成果囉~

    至此基本的hexo網頁就完成了!

將hexo產生的網頁部署到github pages

先假定大家都已經有一個github帳號了,首先到github先開一個新的Repository,我們會將網頁內容上傳到這裡

接下來回到文字編輯器,打開_config.yml檔案,找到deploy子項,將repo改成你剛剛的repository連結



完成後到終端機輸入

1
2
3
hexo cl  //清空hexo的快取,避免有些內容沒有更新到
hexo g //在部署網站前先產生好靜態檔案
hexo d //deploy,把檔案上傳到你設定的deploy目的地,本篇教學是送到git

或也可以直接輸入

1
2
hexo cl
hexo g -d

這樣就完成網站部署了,在瀏覽器中輸入https://username.github.io/就可以實際看到你部署好的網頁囉~