What's Vapid

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.
htps //w w.ゔ 피 d. 이 m

HTML상에서 대부분의 구축을 실시할 수 있는 심플한 CMS로서 등장한 「Vapid」입니다만,
일본어의 정보가 거의 보이지 않았기 때문에, 실제로 만져 시험해 보았습니다.
※Vapid 경력 1일의 시점에서 기사를 쓰고 있으므로, 다소의 이해 부족에는 눈을 감아 주세요

Getting Started

문서를 보자 보면서 진행하면 물건의 몇 분에 도입을 할 수 있습니다.
htps : // / cs.ゔ 피 d. 이 m

npm install -g @vapid/cli

※node 8.9.0이상의 환경이 필요하므로 node -v 로 확인해 둡시다.

vapid new path/to/project/folder

프로젝트를 원하는 곳에 만듭니다.
필자 환경에서는 vapid new ~/desktop/project/vapid-test 로서 작성하고 있습니다.

cd ~/desktop/project/vapid-test
vapid start .

만든 폴더로 이동하고 vapid start .에서 기본 기능 서버를 시작합니다.

vapid start .
==> Starting the development server...
==> Watching for changes in /Users/hogehoge/Desktop/project/vapid-test/www
View your website at http://localhost:3000

단지 이것만으로 개발용 서버가 준비되었습니다
빨리 http://localhost:3000에 액세스하자!

How to use

localhost:3000로 이동하면 다음 페이지를 볼 수 있습니다.


아무래도 템플릿 태그다운 수상한 메시지가 표시되고 있네요 HELLO,{{VAPID}}환경을 정돈한 곳에서 조속히 CMS로서의 기능을 확인해 봅시다.

LOGIN 버튼을 클릭하면 대시보드에 로그인하라는 메시지가 표시되므로,
미리 등록해 둔 이메일 주소와 비밀번호로 로그인합니다.
※ 등록하지 않은 분은 톱 페이지에서 등록하십시오!


로그인 후의 화면에는 「Greeting」 「Background Image」의 항목이 있네요.
이번은 Greeting을 예로, 내부의 구조를 설명해 갑니다.
Greeting에 적당한 문자 (이번에는 MAYOMAYO)를 입력하고 "Save"를 누르면 ....

톱 페이지의 메시지가 다음과 같이 변경되었습니다!

HELLO,{{VAPID}}  //変更前
HELLO,MAYOMAYO   //変更後

해당 지역의 코드를 확인해 봅시다.

/vapid-test/www/index.html

<header class="header" style="background-image: url({{background_image type=image tag=false required=false}})">
  <h2>A New Site</h2>
  <h1><span>Hello, {{vapid label="Greeting"}}</span></h1>
  <div class="container">
    <p>This template already has few tags—visit the dashboard now to edit their content. And when you're done, <a href="https://docs.vapid.com/content-types" target="_blank">add your own content tags</a>.</p>
    <p><a href="/dashboard" class="login button">Login</a></p>
    <p><small>Lastly, submit the contact form below.</small></p>
  </div>
</header>

h1 태그 내에 {{vapid label="Greeting"}}라는 익숙하지 않은 코드가 있지만,
이것은 Vapid 템플릿 태그입니다.
좀 더 간단한 쓰기 방법으로 항목을 늘려보고 싶습니다.

<h1><span>{{Greeting}},{{YourName}}</span></h1>

HTML을 변경했기 때문에 관리 화면에서도 입력 영역을 만들지 않으면 ...
그런 것을 생각할지도 모릅니다만, Vapid에서는 마음대로 영역을 작성해 주기 때문에,

HTML을 저장하고 위와 같이 입력하면 간단하게 표시 할 수 있습니다


이번에는 Vapid의 환경 구축에서 간단한 편집 작업에 대해 해설했습니다.
Part2에서는 Vapid에 준비되어 있는 다양한 콘텐츠를 소개하고 싶습니다!
(현재 공부 중이므로 잠시 기다려주십시오 )