個人博客主題美化

来源:https://www.cnblogs.com/pythonywy/archive/2019/08/23/11402682.html
-Advertisement-
Play Games

個人博客主題美化 選擇主題 Hexo預設的主題是landscape,推薦以下主題: 1. "snippet" 2. "Hiero" 3. "JSimple" 4. "BlueLake" 詳見:https://github.com/search?q=hexo theme 應用主題 1. 下載主題 2. ...


個人博客主題美化

選擇主題

Hexo預設的主題是landscape,推薦以下主題:

  1. snippet
  2. Hiero
  3. JSimple
  4. BlueLake

詳見:https://github.com/search?q=hexo-theme

應用主題

  1. 下載主題
  2. 將下載好的主題文件夾,粘貼到站點目錄的themes下。
  3. 更改站點配置文件_config.yml 的theme欄位,為主題文件夾的名稱:
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: <主題文件夾的名稱>

主題優化

以上主題都有比較詳細的說明文檔,本節主要解決主題優化的常見問題。

主題優化一般包括:

  • 設置「RSS」

  • 添加「標簽」頁面

  • 添加「分類」頁面

  • 設置「字體」

    問題:引用國外字體鏡像較慢。

    解決:可以改用國內的。將\themes*\layout_partials\head external-fonts.swig文件中fonts.google.com改成fonts.lug.ustc.edu.cn。

  • 設置「代碼高亮主題」

  • 側邊欄社交鏈接

    問題:圖標哪裡找?

    解決:Font Awesome

  • 開啟打賞功能

    問題:微信支付寶二維碼不美觀,規格不一。

    解決:線上生成二維碼

  • 設置友情鏈接

  • 騰訊公益404頁面

  • 站點建立時間

  • 訂閱微信公眾號

  • 設置「動畫效果」

    問題:慢,需要等待 JavaScript 腳本完全載入完畢後才會顯示內容。
    解決:將主題配置文件_config.yml中,use_motion欄位的值設為 false 來關閉動畫。

  • 設置「背景動畫」

主題優化還包括:

添加背景圖

在 themes/*/source/css/_custom/custom.styl 中添加如下代碼:

body{    background:url(/images/bg.jpg);    background-size:cover;    background-repeat:no-repeat;    background-attachment:fixed;    background-position:center;}
修改Logo字體

themes/*/source/css/_custom/custom.styl 中添加如下代碼:

@font-face {    font-family: Zitiming;    src: url('/fonts/Zitiming.ttf');}.site-title {    font-size: 40px !important; font-family: 'Zitiming' !important;}

其中字體文件在 themes/next/source/fonts 目錄下,裡面有個 .gitkeep 的隱藏文件,打開寫入你要保留的字體文件,比如我的是就是寫入 Zitiming.ttf ,具體字型檔自己從網上下載即可。

修改內容區域的寬度

編輯主題的 source/css/_variables/custom.styl 文件,新增變數:

// 修改成你期望的寬度$content-desktop = 700px// 當視窗超過 1600px 後的寬度$content-desktop-large = 900px
網站標題欄背景顏色

打開 themes/*/source/css/_custom/custom.styl ,在裡面寫下如下代碼:

.site-meta {  background: $blue; //修改為自己喜歡的顏色}
自定義滑鼠樣式

打開 themes/*/source/css/_custom/custom.styl ,在裡面寫下如下代碼:

// 滑鼠樣式  * {      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important  }  :active {      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important  }
文章加密訪問

打開 themes/*/layout/_partials/head.swig文件,在 ``之前插入代碼:

<script>    (function(){        if('{{ page.password }}'){            if (prompt('請輸入密碼') !== '{{ page.password }}'){                alert('密碼錯誤');                history.back();            }        }    })();</script>

寫文章時加上password: *

---title: 2018date: 2018-10-25 16:10:03password: 123456---
實現點擊出現桃心效果
  1. /themes/*/source/js/src下新建文件click.js,接著把以下粘貼到click.js文件中。
    代碼如下:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
  1. \themes\*\layout\_layout.swig文件末尾添加:
<!-- 頁面點擊小紅心 --><script type="text/javascript" src="/js/src/clicklove.js"></script>
靜態資源壓縮

在站點目錄下:

$ npm install gulp -g

安裝gulp插件:

npm install gulp-minify-css --savenpm install gulp-uglify --savenpm install gulp-htmlmin --savenpm install gulp-htmlclean --savenpm install gulp-imagemin --save

Hexo 站點下新建 gulpfile.js文件,文件內容如下:

var gulp = require('gulp');var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');var imagemin = require('gulp-imagemin');// 壓縮css文件gulp.task('minify-css', function() {  return gulp.src('./public/**/*.css')  .pipe(minifycss())  .pipe(gulp.dest('./public'));});// 壓縮html文件gulp.task('minify-html', function() {  return gulp.src('./public/**/*.html')  .pipe(htmlclean())  .pipe(htmlmin({    removeComments: true,    minifyJS: true,    minifyCSS: true,    minifyURLs: true,  }))  .pipe(gulp.dest('./public'))});// 壓縮js文件gulp.task('minify-js', function() {    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])        .pipe(uglify())        .pipe(gulp.dest('./public'));});// 壓縮 public/demo 目錄內圖片gulp.task('minify-images', function() {    gulp.src('./public/demo/**/*.*')        .pipe(imagemin({           optimizationLevel: 5, //類型:Number  預設:3  取值範圍:0-7(優化等級)           progressive: true, //類型:Boolean 預設:false 無損壓縮jpg圖片           interlaced: false, //類型:Boolean 預設:false 隔行掃描gif進行渲染           multipass: false, //類型:Boolean 預設:false 多次優化svg直到完全優化        }))        .pipe(gulp.dest('./public/uploads'));});// 預設任務gulp.task('default', [  'minify-html','minify-css','minify-js','minify-images']);

只需要每次在執行 generate 命令後執行 gulp 就可以實現對靜態資源的壓縮,壓縮完成後執行 deploy 命令同步到伺服器:

hexo ggulphexo d
修改訪問URL路徑

預設情況下訪問URL路徑為:domain/2018/10/18/關於本站,修改為 domain/About/關於本站。 編輯 Hexo 站點下的 _config.yml 文件,修改其中的 permalink欄位:

permalink: :category/:title/
博文置頂
  1. 安裝插件

    $ npm uninstall hexo-generator-index --save
    $ npm install hexo-generator-index-pin-top --save

然後在需要置頂的文章的Front-matter中加上top即可:

---title: 2018date: 2018-10-25 16:10:03top: 10---
  1. 設置置頂標誌

打開:/themes/*/layout/_macro/post.swig,定位到

,插入以下代碼即可:

{% if post.top %}  <i class="fa fa-thumb-tack"></i>  <font color=7D26CD>置頂</font>  <span class="post-meta-divider">|</span>{% endif %}
在右上角或者左上角實現fork me on github
  1. 選擇樣式GitHub Ribbons,
  2. 修改圖片跳轉鏈接,將<a href="https://github.com/you">中的鏈接換為自己Github鏈接:
  3. 打開 themes/next/layout/_layout.swig 文件,把代碼複製到<div class="headband"></div>下麵。
主頁文章添加邊框陰影效果

打開 themes/*/source/css/_custom/custom.styl ,向裡面加代碼:

// 主頁文章添加陰影效果.post {   margin-top: 0px;   margin-bottom: 60px;   padding: 25px;   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}
顯示當前瀏覽進度

修改themes/*/_config.yml,把 false 改為 true

# Back to top in sidebarb2t: true# Scroll percent label in b2t buttonscrollpercent: true
創建分類頁

在終端視窗下,定位到 Hexo 站點目錄下,新建:

$ cd <站點目錄>$ hexo new page categories
加入 廣告

主要有兩種:百度SSP谷歌Adsense。方法類似:

  1. 註冊,複製廣告代碼

  2. 部署到網站。

    2.1. 新建 theme/*/layout/_custom/google_ad.swig,將 AdSense 上的代碼粘貼進去

    2.2. 頭部。在 theme/*/layout/_custom/head.swig 中也粘貼一份

    2.3. 每篇博客。在 theme/*/layout/post.swig 里中在希望看到的地方加上:

    {% include '_custom/google_ad.swig' %}

    例如:在 <div id="posts" class="posts-expand"> </div> 中間插入,總代碼如下:

    {% block content %}  <div id="posts" class="posts-expand">    {{ post_template.render(page) }}    {% include '_custom/google_ad.swig' %}  </div>{% endblock %}
  3. 等待審核通過。如果失敗,可再次申請。

添加萌萌噠

首先,安裝npm包:

npm install --save hexo-helper-live2d

然後在hexo的配置文件_config.yml中添加如下配置,詳細配置可以參考文檔

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

然後下載模型,模型名稱可以到這裡參考,一些模型的預覽可以在這裡

npm install live2d-widget-model-shizuku

所有模型列表如下:

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

下載完之後,在Hexo根目錄中新建文件夾live2d_models,然後在node_modules文件夾中找到剛剛下載的live2d模型,將其複製到live2d_models中,然後編輯配置文件中的model.use項,將其修改為live2d_models文件夾中的模型文件夾名稱。

  1. 複製你喜歡的模型名字:

    Epsilon2.1

    img

    Gantzert_Felixander

    img

    haru

    img

    miku

    img

    ni-j

    img

    nico

    img

    nietzche

    img

    nipsilon

    img

    nito

    img

    shizuku

    img

    tsumiki

    img

    wanko

    img

    z16

    img

    hibiki

    img

    koharu

    img

    haruto

    img

    Unitychan

    img

    tororo

    img

    hijiki

    img

插件配置

以下插件(評論系統、數據統計與分析、內容分享服務、搜索服務)各選一個即可。

評論系統

推薦指數 優點 缺點
Valine 4 每天30000條評論,10GB的儲存 作者評論無標識
來必力/livere 4 多種賬號登錄 評論無法導出
暢言 3 美觀 必須備案功能變數名稱
gitment 3 簡潔 只能登陸github評論
Disqus 1 需要翻*牆
Valine

1.1. 獲取APP ID 和 APP Key

請先登錄或註冊 LeanCloud, 進入控制台後點擊左下角創建應用,

進入剛剛創建的應用,選擇左下角的設置>應用Key,然後就能看到你的APP IDAPP Key了。

1.2. 填寫APP ID 和 APP Key到主題配置文件_config.yml

1.3. 運行hexo g&&hexo d推送到博客。

來必力/livere

2.1. 登陸 來必力 獲取你的 LiveRe UID。

2.2. 填寫LiveRe UID到主題配置文件_config.yml

暢言

3.1.獲取APP ID 和 APP Key

請先登錄或註冊 暢言, 點擊“立即免費獲取暢言”,

新建站點,點擊管理,點擊評論插件>評論管理,

點擊後臺總覽,然後就能看到你的APP IDAPP Key了。

3.2. 填寫APP ID 和 APP Key到主題配置文件_config.yml

3.3. 運行hexo g&&hexo d推送到博客。

gitment

(如果博客搭建再碼雲上不能運行,個人沒有解決)

4.1. 安裝插件:

npm i --save gitment

4.2. 申請應用

New OAuth App為你的博客應用一個密鑰:

Application name:隨便寫Homepage URL:這個也可以隨意寫,就寫你的博客地址就行Application description:描述,也可以隨意寫Authorization callback URL:這個必須寫你的博客地址

4.3. 配置

編輯主題配置文件themes/*/_config.yml:

# Gitment# Introduction: https://imsun.net/posts/gitment-introduction/gitment:  enable: true  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway  count: true # Show comments count in post meta area  lazy: false # Comments lazy loading with a button  cleanly: false # Hide 'Powered by ...' on footer, and more  language: # Force language, or auto switch by theme  github_user: {you github user id}  github_repo: 公開的git倉庫,評論會作為那個項目的issue  client_id: {剛纔申請的ClientID}  client_secret: {剛纔申請的Client Secret}  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect  redirect_protocol: # Protocol of redirect_uri with force_redirect_pro
Disqus

編輯 主題配置文件themes/*/_config.yml, 將 disqus 下的 enable 設定為 true,同時提供您的 shortname。count 用於指定是否顯示評論數量。

disqus:  enable: false  shortname:  count: true

數據統計與分析

推薦指數 優點 缺點
不蒜子 4 可直接將訪問次數顯示在您在網頁上(也可不顯示) 只計數
百度統計 3 收錄慢
不蒜子

編輯 主題配置文件 themes/*/_config.yml中的busuanzi_count的配置項即可。

  • enable: true時,代表開啟全局開關。
  • site_uv(本站訪客數)、site_pv(本站訪客數)、page_pv(本文總閱讀量)的值均為false時,不蒜子僅作記錄而不會在頁面上顯示。

註意:

不蒜子官方因七牛強制過期原有的『dn-lbstatics.qbox.me』功能變數名稱(預計2018年10月初),與客服溝通數次無果,即使我提出為此付費也不行,只能更換功能變數名稱到『busuanzi.ibruce.info』!

解決辦法:

  1. 找到主題調用不蒜子的swig文件。一般在”\themes*\layout_third-party\analytics\busuanzi-counter.swig”

  2. 更改功能變數名稱

    把原有的:<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>功能變數名稱改一下即可:<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
百度統計
  1. 登錄 百度統計,定位到站點的代碼獲取頁面
  2. 複製統計腳本 id,如圖:
    img
  3. 編輯 主題配置文件themes/*/_config.yml,修改欄位 google_analytics,值設置成你的統計腳本 id。

內容分享服務

推薦指數 優點 缺點
百度分享 4 穩定 不太美觀
need-more-share2 4 美觀 更新不及時(比如微信分享API)
百度分享

編輯 主題配置文件,添加/修改欄位 baidushare,值為 true即可。

# 百度分享服務baidushare: true
need-more-share2

編輯 主題配置文件,添加/修改欄位 needmoreshare2,值為 true即可。

needmoreshare2:  enable: true

搜索服務

推薦指數 優點 缺點
Local Search 4 配置方便
Swiftype 2 需註冊
Algolia 2 需註冊

添加百度/谷歌/本地 自定義站點內容搜索

  1. 安裝 hexo-generator-searchdb,在站點的根目錄下執行以下命令:

    $ npm install hexo-generator-searchdb --save
  2. 編輯 站點配置文件,新增以下內容到任意位置:

    search:  path: search.xml  field: post  format: html  limit: 10000
  3. 編輯 主題配置文件,啟用本地搜索功能:

    # Local searchlocal_search:  enable: true

Error: watch /path/to/hexo/theme/ EMPERM

因為目前在Windows Subsystem for Linux中,有些內容更改時,還不能實時更新到hexo伺服器。所以需要重新編譯,再啟動伺服器:

$ hexo generate
$ hexo server -s

#### Template render error有時運行命令`$ hexo generate` 返回一個錯誤:

FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)

這意味著有些認不出來單詞在你的文件,並且很可能在你的新博文,或者配置文件`_config.yml`中,比如縮進錯誤:錯誤例子:

plugins:
hexo-generator-feed
hexo-generator-sitemap
```


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 版權聲明:本文為xing_star原創文章,轉載請註明出處! 本文同步自http://javaexception.com/archives/188 Glide.3x的版本是3.7.0,Glide4.x的版本是4.2.0 Glide3.x中最基礎的用法 那麼在Glide4.x中,其實還是一樣的,最基本 ...
  • 入門學習Flutter有一段時間了,Demo用過的Widget也有不少,想著整體的梳理一下,所以今天結合Flutter中文網和書籍梳理一下Widget的使用,首先梳理一下擁有單個子元素的佈局Widget。 Container:一個擁有繪製、定位、調整大小的Widget Pad... ...
  • ### 前言 前面我們講了 [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源碼解析(1)-OkHttpClient分析](https://www.jianshu.com/p/bf1d01b79ce7) 今天主要分析下Req ...
  • ### 前言 前面我們講了 [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源碼解析(1)-OkHttpClient分析](https://www.jianshu.com/p/bf1d01b79ce7) [Okhttp3源碼 ...
  • 日誌就像是構建工具的 UI,如果輸出太混亂,真正的警告和錯誤很容易就被忽略了。Gradle 定義了 6 種日誌級別,以便於我們識別有用的信息。 ...
  • ### 前言 上篇文章我們講了[Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f),今天根據上節講到請求流程來分析源碼,那麼第一步就是實例化OkHttpClient對象,所以我們今天主要分析下OkHttpClient源碼! #### 初始化-構造 ...
  • 聲明:本文來自我的導師wangjie. 本文主要包含以下內容 一、查看項目所在分支二、切換到目標分支三、查看當前所在分支四、編譯Android源碼五、source Android 編譯環境六、lunch 所需的編譯項目七、單編 模塊八、push 模塊 驗證修改是否生效 一、查看項目所在分支 git ...
  • js節點操作 整個頁面可以看成文檔節點,節點用node表示。頁面裡面全是節點,元素節點, 屬性節點,文本節點(文字,空格,換行), 節點:一定有節點類型,節點名稱,節點值 節點類型的值: 元素節點為1,屬性節點為2,文本節點為3 通過節點,可以更好的獲取元素。 邏輯全在代碼裡面 js部分 長話短說: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...