由於網上找到的都是借用第三方雲處理添加水印,但是我不太想用,所以自己開發了一個插件
目前插件可以直接在 hexo
官網上搜索到
下面內容都是在 Github
上覆制過來的,我的正式版博客目前掛載在我的 Github
倉庫 blog
一款用於 Hexo 靜態博客網站生成時對圖片添加水印。
不對原圖產生任何影響,在網站靜態頁構建過程中將原圖讀取,輸出添加了水印的圖片。
在構建的靜態網站中不會存在原圖,只存在水印圖片。
一定要閱讀最後的提示事項,包含現有版本的支持情況和即將添加的功能
使用 npm
安裝插件
npm install hexo-images-watermark
在站點配置文件 _config.yml
中進行如下配置:
watermark:
enable: true
textEnable: true
rotate: -45
gravity: centre
在 hexo generate
運行時會自動爲你的 _post
目錄下的圖片添加水印,新的圖片將會放到 public
目錄中對應的位置。
必備配置參數
enable
默認值:無
說明:true
將會執行圖片添加水印,false
將會不執行添加
textEnable
默認值:false
說明:是否使用文本來添加水印(❌警告:目前不支持文本和圖片同時添加水印)
imageEnable
默認值:false
說明:是否使用圖片來添加水印(❌警告:目前不支持文本和圖片同時添加水印)
其他參數
text
默認值:使用配置文件中的url,一旦url不存在直接顯示作者名字(SpiritLing)
說明:當你使用的文字過長時,一旦轉爲圖片後大於待加水印的圖片尺寸,則會出現錯誤。
fontPath
默認值:undefined,使用 text-to-svg
自帶字體
說明:自己加載需要的字體,支持單個字體文件,不區分中英文;如果純中文,請只加載中文字體,例:需要加載 source/static/font/custom.ttf
字體直接將其寫入到配置文件中即可
color
默認值:rgb(169,169,167)
說明:顏色可以使用 rgb,rgba,#xxxxxx以及red名字式的。⚠️只對text有效
gravity
默認值:southeast
說明:設置水印位置處於什麼方向,以 上北下南左東右西
來確定
參數可用值:
類型 | 說明 | 備註 |
---|---|---|
centre | 中央 | 圖片正中間 |
north | 北 | 上方中間 |
west | 東 | 左邊中間 |
south | 南 | 下邊中間 |
east | 西 | 右邊中間 |
northwest | 東北 | 左上角 |
southwest | 東南 | 左下角 |
southeast | 西南 | 右下角 |
northeast | 西北 | 右上角 |
fontSize
默認值:18
說明:文本字體大小,⚠️只對text有效
watermarkImage
默認值:watermark.png
說明:水印圖片,放置在source文件根路徑的圖片名稱;⚠️大小不要超過任何一張文章中的圖片,否則會出錯,可以搭配縮放進行使用
width
默認值:50
說明:對圖片進行縮放。⚠️只對image有效
height
默認值:50
說明:對圖片進行縮放。⚠️只對image有效
rotate
默認值:0
說明:旋轉角度,如45
代表逆時針45度,-45
代表順時針45度
background
默認值:transparent
說明:配合text和rotate使用,指的是文字轉成的圖片一旦旋轉會出現多餘空白,設置這些地方的顏色,一般透明色即可
使用注意事項⚠️⚠️⚠️
- 文字不要過長過大,水印圖片不要過大(太大可以使用縮放,⚠️但是縮放是全局性的),否則都會出現錯誤,終止生成靜態頁面
- 暫不支持圖片和文字共同添加
- 目前只支持
*.jpg
,*.jpeg
,*.png
兩種格式圖片,並且只支持source/_posts
文件夾下的圖片,也就是文章本地圖片;同時也不支持遠程圖片 - 水印圖片也不支持遠程和非soucre根路徑下的文件,也是隻支持
*.jpg
,*.jpeg
,*.png
兩種格式圖片 - 不支持循環滿圖添加水印
- 請使用
1.1.x
以上版本,1.0.x
是進行Hexo api相關測試時使用的,版本雜亂無章,使用1.0.x
版本出現任何問題,概不理會
TODO LIST
- 文字水印
- 自定義文字,顏色,大小
- 自定義字體 - 2019-12-24 Done
- 支持循環添加
- 超限處理
- 圖片水印
- 自定義水印圖片
- 遠程水印圖片
- 支持循環添加
- 超限處理
- 位置
- 固定位置:九個方位
- 自定義 top,left
- 旋轉
- 縮放(僅限圖片)
- 其他格式支持