整自己blog #3 Strapi CMS
Programming

導覽

正文

第3篇想講下用既CMS，即係strapi
open source + 免費
唯一唔好處係自己host 比較煩
同cloud host就貴

煩就煩 首先開visual studio

npx create-strapi-app@latest blog-strapi

如無意外之後就可以run command 入admin page

cd blog -strapi npm run develop

default 下會去左localhost:1337/admin

register admin account strapi admin.png

順利入到admin panel strapi panel.png

第一樣要做既係入Content-Type Builder
係拎黎define 想要既type 既schema
值得一提既係strapi 有傻瓜式schema builder
對比sanity 要打code式係好駛好用(對我黎講)

define 一個叫site 既single content type
site.png

  • avatar: 方便我除時改圖像
  • title: 睇我心情，可能第時唔retire asap
  • subtitle: 都係睇心情，類似ig bioo咁
  • home: rich text, 其實係markdown language 黎，都係為左方便，到時唔駛改source code，直接入strapi就改到個網
  • about: ditto, 放job experience

define 完schema就可以入去content manager打自己想要既野
site.png 打完記得publish

除左site content之外我仲另外define左category 同post 呢兩個content type
分別拎黎define post 屬於咩類別同埋post既基本資料內容等等基本野

然後頭先所輸入既內容就可以經strapi 既api 俾front end 去query
做呢步之前去一去Settings -> API Token
api token.png

入到去create一個新既token 權限因為我唔會經api create content，所以係read only
duration 就unlimited
api token.png create完會有一條token key，記得copy
冇做既話只可以再gen一條新既

有左呢條key就可以用REST 去query 頭先我地入既content
呢個時候拎出postman, api testing 神器
睇返strapi既api documentation strapi get.png

request method 用返GET
request url 因為要睇既資料係site 所以改返 之後就係頭先gen既一條token
如果睇返documentation既話 strapi要既係bearer token
所以係postman 入面click返bearer token之後係右手邊格仔入返token
strapi auth.png

打完襟send試試佢 postman response.png

{
    "data": {
        "id": 1,
        "attributes": {
            "title": "Retire as soon as possible.",
            "subtitle": "Alcohol, Guitar, Programming, also I hate BIM",
            "home": "# Welcome to my blog!\n\n>Under construction",
...

咁樣即係strapi 條api成功左啦
之後係front end果邊就可以用呢個方法去display返資料

Back to Programming
Copyright © tnlo.me. All rights reserved.