사용자 지정 고스트 테마에 대해 TailwindCSS를 설정하는 방법

Ghost에는 엄청난 노력이 필요합니다. 그러나 기존 테마는 결코 정확하지 않으며 TailwindCSS으로 변경할 수 있기를 원했지만 이 경우에도 despite finding others looking 새로운 시작을 찾을 수 없었습니다. 당신이 같은 위치에 있다면 이 게시물은 당신을 위한 것입니다.

공식Ghost Starter Theme을 시작점으로 사용하지만 기존 테마로 이 작업을 수행할 수 있어야 합니다.

Ghost CLI이 설치되어 있어야 합니다.

npm install ghost-cli@latest -g

새로운 디렉토리를 생성하여 시작하십시오.

mkdir ghost-project && cd "$_"

그런 다음 install Ghost locally .

ghost install local

설치가 완료되면 http://localhost:2368에서 고스트 인스턴스가 실행됩니다.

그런 다음 Github에서 "이 템플릿 사용"녹색 버튼을 사용하여 Ghost Starter Theme을 기반으로 새 리포지토리를 만듭니다.


테마 디렉토리로 cd하고 사용자 이름과 저장소 이름을 사용하여 새 저장소를 복제하십시오.

cd content/themes
git clone [email protected]:<your-github-username/<your-new-repo-name>.git ghost-starter-with-tailwind

기본 캐스퍼 테마는 해당 테마가 무엇이든 처리하는 방법을 확인하려는 경우 형제로 해당 디렉토리에 있습니다.

Ghost Starter 테마는 원사를 사용하므로 이를 사용하여 종속성을 설치합니다. 새 테마 디렉토리로 이동한 다음 yarn을 실행합니다.

cd ghost-starter-with-tailwind
yarn

테마 이름을 원하는 대로 변경할 수 있는 좋은 시간입니다. package.json 상단의 이름 필드(파일을 열 때 ' ghost-starter-theme')는 Ghost의 관리 인터페이스에 표시되는 항목입니다.

이제 Tailwind를 설치하고 설정할 수 있습니다.

yarn add tailwindcss
npx tailwindcss init

Tailwind 기본 스타일을 ./assets/css/screen.css에 추가합니다.

/* assets/css/screen.css */

/* ... */

/* Base components */
@import "vars.css";
@import "components/global.css";
@import "components/forms.css";
@import "components/buttons.css";

/* Ghost components */
@import "ghost/header.css";
@import "ghost/content.css";
@import "ghost/readmore.css";
@import "ghost/members.css";
@import "ghost/errors.css";
@import "ghost/footer.css";
@import "ghost/badge.css";

/* Tailwind - add this part */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* ... */

스타일을 Tailwind 클래스로 바꾸면 다른 가져오기를 제거할 수 있지만 지금은 그대로 둘 수 있습니다.

Starter는 Gulp 및 gulp-postcss를 사용하므로 Tailwind installation instructions의 해당 부분을 대략적으로 따를 것입니다.

// gulpfile.js

// import tailwind at the top of the file
const tailwind = require('tailwindcss')

// ...

// add tailwind to the css processors list, around line 43:
function css(done) {
    var processors = [
        easyimport,
        colorFunction(),
        tailwind(), // add this
        autoprefixer(),
        cssnano()
    ];

    // ...
}

다음으로 고스트를 다시 시작하여 테마를 만든 경우 모든 새 파일과 테마의 이름 변경을 포착하는지 확인합니다. 작업 디렉토리가 무엇인지는 중요하지 않습니다. 테마 디렉토리에서 실행할 수 있습니다.

ghost restart

그런 다음 모든 테마 파일 감시자를 시작하여 css 및 handlebars 파일에 대한 변경 사항을 Ghost가 선택하도록 합니다. 테마 디렉터리(/content/themes/ghost-starter-with-tailwind 또는 이름 지정)에서 실행해야 합니다.

yarn dev

관리자 및 블로그 이름, 이메일 및 비밀번호http://localhost:2368/ghost로 Ghost 관리자를 설정한 다음 팀원을 초대하라는 메시지가 표시되면 다음 페이지 하단에서 건너뛰기를 누르십시오.





이제 거의 끝났습니다. Ghost의 설정으로 이동하여 새 테마를 활성화하십시오. 설정 > 디자인을 클릭합니다.

그런 다음 디자인 설정 페이지 맨 아래에서 새 테마에서 활성화를 클릭합니다.


마지막으로 핸들바 템플릿에 Tailwind 클래스를 추가할 수 있습니다. 제대로 작동하지 않는 경우 CSS를 제거하고 screen.css에서 가져옵니다. 관찰자가 변경 사항을 선택해야 하지만 브라우저에는 자동으로 다시 로드되지 않습니다. 따라서 변경 사항을 저장한 후 새로 고침하십시오.

이것은 당신이 시작해야합니다. 나는 the code to this point on Github .

기존 CSS를 Tailwind로 변환한 방법에 대한 다른 게시물로 후속 게시물 페이지에 대한 좋은 시작점을 위해 Tailwind's typography plugin을 추가하고 사용할 때 수동 제거가 필요한 Ghost Pro에 purging unused CSS을 추가하겠습니다.