어떻게 2022년에 Tailwind CSS 3을 Hugo 사이트에 추가합니까?

9699 단어 tutorialhugotailwindcsswebdev
나는 우과를 나의 개인 사이트인 https://www.unsungnovelty.org으로 사용한다.현재 제가 사용하고 있는 것은 Bulma CSS입니다.Tailwind CSS을 다시 설계하고 있습니다.검색하는 동안 Hugo에Tailwind CSS를 추가하는 방법에 대한 기사를 발견했습니다.때로는 부어오르기도 한다.따라서 Hugo에 Tailwind CSS를 가장 간단하게 추가하는 방법을 알려 드리려고 합니다.Hugo 웹 사이트에서 Tailwind CSS를 간단하고 직접적으로 설정하는 것이 목표입니다.
이 밖에 Integrating TailwindCSS with Hugo by oomusou으로 이 블로그도 가능해졌다.그것은 더욱 아름답고 다른 것들을 사용했다.나는 이미 참고 자료/링크 부분에 이 문장을 포함했다.이것은 내가 찾을 수 있는 유일한 Hugo에Tailwind CSS 3을 추가하는 것에 관한 문장이다.감사합니다.내 게시물은 릴 디테일을 사용하고 NPM의tailwindcss 패키지만 사용한다.만약 네가 그 문장을 쓰기를 원한다면.이렇게 하십시오.
만약 당신이 이미 우과 사이트가 있다면 순풍 CSS를 주제에 추가하고 싶을 뿐입니다. 다음 절로 넘어가면 어떻게 순풍 CSS를 우과 주제에 추가합니까?그렇지 않으면 따라와!
oomusou
어떻게 가장 작은 우과 사이트를 만들고 순풍 CSS를 우과 테마에 추가합니까?
  • 은 운영 체제에 Hugo 패키지를 설치합니다. 의 설치 섹션을 따르십시오.Windows에서 다음 명령이 완전히 작동하지 않을 수 있습니다.bash와 유사한 유닉스셸을 사용하여 작업을 합니다.
  • 터미널에서 명령 hugo new site <site name>을 사용하여 새로운 Hugo 사이트를 만듭니다.예컨대hugo new site thisSiteIsNew . 이것은 thisSiteIsNew이라는 디렉터리에 시작 템플릿이 있는 새hugo 사이트를 만들 것입니다.
  • 새 사이트의 목록에 들어갑니다.예컨대cd thisSiteIsNew .
  • 에서 hugo new theme <theme name>을 사용하여 새 주제를 만듭니다.예컨대hugo new theme thisThemeIsNew . 이것은 <theme name>과 입문에 필요한 파일을 포함하는 새 디렉터리를 만들 것입니다.내게는 thisSiteIsNew/themes/thisThemeIsNew 내부에 위치할 것이다.
  • 은 우과 테마를 설정 파일의 우과 사이트에 연결한다.이 링크를 통해 Hugo는 /themes/ 디렉터리에서 이른바 테마를 찾을 수 있다.만약 네가 이렇게 링크하지 않는다면 사이트는 나타나지 않을 것이다.샘플 구성 파일은 다음과 같습니다.그것은 .toml 형식을 사용하고 파일 이름은 config.toml이다.Hugo 구성 파일로 .json 또는 .yaml을 사용할 수 있습니다.상응하는 포맷만 하면 된다.
    • baseURL = ''
languageCode = 'en-us'
title = 'thisSiteIsNew'
theme = 'thisThemeIsNew'
    getting started from gohugo.io
    어떻게 우과 주제에 순풍 CSS를 추가합니까?
  • 주제 목록에 들어갑니다.hugo-website-directory/themes/theme-name/에 있습니다.이것은 당신이 hugo 사이트의 레이아웃, 프로필 등 설정을 가지고 있다고 가정합니다.기타 선결 조건은 컴퓨터에npm와 노드를 설치하는 것이다.
  • 알림 - 우과 테마를 설정 파일의 우과 사이트에 연결합니다.이 링크를 통해 Hugo는 /themes/ 디렉터리에서 이른바 테마를 찾을 수 있다.만약 네가 이렇게 링크하지 않는다면 사이트는 나타나지 않을 것이다.샘플 구성 파일은 다음과 같습니다.그것은 .toml 형식을 사용하고 파일 이름은 config.toml이다.Hugo 구성 파일로 .json 또는 .yaml을 사용할 수 있습니다.상응하는 포맷만 하면 된다.
    • baseURL = ''
languageCode = 'en-us'
title = 'thisSiteIsNew'
theme = 'thisThemeIsNew'
  • 은 package.json을 사용하여 npm init -y을 초기화합니다.이것은 테마 디렉터리에 package.json 파일을 만들 것입니다.
  • 은 npm install --save-dev tailwindcss을 사용하여 순풍 CSS를 설치합니다.그러면 Tailwind CSS가 개발 종속성으로 설치됩니다.
  • 은 실행 명령 tailwind.config.js을 통해 npx tailwindcss init을 초기화합니다.그러면 tailwind.config.js 파일이 생성됩니다.
  • 은 tailwind.config.js 파일에 다음 코드를 추가합니다.
    • module.exports = {
  content: ["content/**/*.md", "layouts/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  • 은 main.css 디렉토리에 /assets이라는 파일을 만듭니다.main.css 대신 다른 이름을 사용할 수 있습니다.이 테마가 새 테마라면 /assets 디렉터리가 존재하지 않습니다. 만들어야 합니다.Linux의 mkdir assets 명령은 터미널에서 새 디렉토리를 생성합니다.
  • 은 다음 코드를 main.css 파일에 추가합니다.
    • @tailwind base;
@tailwind components;
@tailwind utilities;
  • 은 style.css 폴더에 /assets을 만듭니다.Tailwind CSS CLI를 사용하여 필요한 내용을 main.css에서 style.css으로 전송합니다.style.css은 우리가 사이트 스타일을 디자인하는 데 사용할 마지막 css 파일이다.
  • Tailwind CSS 유틸리티를 html 파일에 추가합니다.나는 아래의 index.html을 가지고 있는데, 이것은 우과 사이트의 홈페이지이다.
    • {{ define "main" }}

    <h1 class="text-3xl text-blue-700 font-bold underline">thisSiteIsNew</h1>
    <p class="bg-sky-600 text-slate-100">The thisSiteIsNew uses a theme called thisThemeIsNew</p>

{{ end }}
  • 은 style.css의 스타일시트를 연결하여 /layouts/partials/head.html을 귀하의 사이트에 연결합니다.예제 head.html은 다음과 같습니다.
    • <head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Hugo</title>
    <!-- resources.Get "style.css" will fetch the style.css file. 
    It will not work if you mention the exact location like "./assets/style.css".-->
    {{ $style := resources.Get "style.css" }}    
    <link rel="stylesheet" href="{{ $style.Permalink }}"> 

</head>
  • 다음 스크립트/명령을 package.json 파일에 추가합니다.이전 단계에 추가한 실용 프로그램 종류에 따라 style.css에서 main.css을 구축할 때 이렇게 해야 합니다.
    • "scripts": {
    "build-tw": "npx tailwindcss -i ./assets/main.css -o ./assets/style.css"
  },
    build-tw이 아닌 모든 이름을 사용할 수 있습니다.나는 build-tw만 사용하는데, 이것은 순풍을 세우는 것으로 바뀌기 쉽다.
  • 은tailwind 유틸리티를 사용하여 스타일을 변경할 때마다 npm run build-tw을 실행할 수 있습니다.그러면 새 style.css 파일이 생성됩니다.
  • 은 현재 /themes/thisThemeIsNew에서 우과 사이트의 목록으로 돌아왔다.
  • , /thisSiteIsNew 내부에서 터미널에서 hugo server --disableFastRender을 운행한다.기본적으로 http://localhost:1313/에서 실시간 서버를 시작합니다.그렇지 않으면 터미널에서 주소를 찾을 수 있습니다.그렇습니다.만약 당신이 모든 절차를 따랐다면, 우과 사이트와 아래의 출력이 있어야 한다.


    • 참조 자료/링크
    • 이 글은 최초로 https://functional.style/hugo/general/tailwind/에 발표되었는데, 제목은'https://unsungnovelty.org'이다.
    오류를 발견했습니까?더 좋은 방법 아세요?나의 작문에 대해 피드백이 있습니까?트위터에 DM을 보내거나 unsungnovelty at protonmail dot com으로 메일을 보내세요.
    hibenate 의 2 급 캐 시 이야기
    jsf - 간단 한 내 비게 이 션 (Navigation)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage