htmx-get으로 htmx로 쉽게

4890 단어 webdev
나는 최근에 python web conf 2022에 참석했고 그것에 대한 몇 가지 놀라운 프레젠테이션을 본 후 htmx를 시도하게 되어 기쁩니다.

기본 페이지



일부 html 상용구로 시작하여 스크립트 태그를 삽입하여 htmx.org 스크립트를 추가하고 click me라는 버튼을 추가합니다. 나는 당신의 섬세한 개발자의 눈을 태우지 않도록 약간의 스타일을 추가했습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html  { background: #1f2022; color: #eefbfe; font-size: 64px; }
      button {font-size: 64px;}
      body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items:center; }
    </style>
    <!-- Load from unpkg -->
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
  <!-- have a button POST a click via AJAX -->
  <button hx-get="/partial" hx-swap="outerHTML">
    Click Me
  </button>

  </body>
</html>


이것을 index.html로 저장하고 웹 서버를 실행하면 이 큰 비프케이크 버튼이 표시됩니다.



개발 서버 기본 설정이 없는 경우 터미널을 열고 python -m http.server 8000를 실행한 다음 브라우저를 localhost:8000로 여는 것이 좋습니다.

부분



이제 페이지에는 교체할 준비가 된 버튼이 있습니다.hx-swap="outerHTML"> ,/partial의 내용 포함. 생성하려면
일종의 정적 API를 사용하여 파일의 일부 페이지를 간단히 호스팅할 수 있습니다./partial/index.html 다음 내용으로.

<p>
hello
</p>




나무



여기에서 좀 더 명확하게 하기 위해 이것을 설정한 후 파일 트리가 어떻게 생겼는지 보여줍니다.

~/git/htmx  v3.9.7 (git)
❯ tree
.
├── clicked
│   └── index.html
└── index.html


데모



이 페이지에 htmx를 추가하고 아래 부분을 설정했습니다. 이 부활절 달걀을 확인하세요.

클릭 해주세요

연결


  • python web conf 2022
  • htmx
  • big beefcake of a button
  • the final results
    • CSS 로고: React 로고
    HTML에서 이미지 요소를 클릭 가능하게 만드시겠습니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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