Gituhb page를 이용한 Riot.js의 SPA 형 Web 페이지 골자(안)

10213 단어 github-pagesriot.js

Introduction



오랜만에 투고하겠습니다.
요 전날 github을 이것에 대해 조사했다면 지정된 브랜치에 github pages를 게시할 수 있습니다.에 대한 기사를 발견했습니다.

놀랐습니다, 야크 데컬처입니다.



더 이상 gh-pages 브랜치를 만들 필요가 없습니다 ...
게다가 리포지토리마다 만들 수 있다! !!

Purpose



그런데, 본제입니다.

github에는 wiki 기능도 있지만 github pages를 사용할 수 있다면,
그곳을 사용하여 Document를 작성하는 분도 많을 것입니다.

그래서 SinglePageApplication을 이용하여 쉽게 멋지게하는 github pages를 만드는 방법을 제안하고 싶습니다.

이용하는 것은,,

Riot.js 짱입니다!



2016년부터 2017년에 걸쳐 일시기 고조되고 있었습니다, 저는 Vue.js에 매료되고 있었습니다만.

그러나이 Riot.js, Component 기능을 가지면서 경량과, 꽤 사용하기 편리합니다.
간단한 페이지 만들면 이 정도 요건을 충족하는 기술은 좀처럼 없는 것이 아닐까요?

여기에서는 Riot.js를 사용하여 SPA 형 웹 페이지를 작성하는 방향으로 레이아웃 골자를 제안하고 싶습니다.
Riot.js 버전은 현재 최신 버전 인 3.9.0을 사용합니다.

방법



다음의 형태로 디렉토리를 구축합니다.
docs/
    ├ public /* JS, CSS, Imageなど */
    ├ components /* Riot.jsのComponent(**.tagファイル) */
    └ index.html

index.html은 이렇게합시다.
또한 이번에는 모든 라이브러리를 외부로 읽어야한다.
로컬로 하고 싶은 분은 npm 등을 넣어 각자 실시해 주세요.
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドキュメント</title>
    <!-- My style -->
    <link rel="stylesheet" href="public/css/style.css"/>
</head>
<body>
<!-- Main -->
<r-app />

<!-- riot tags -->
<script type="riot/tag" src="components/app.tag"></script>
<!-- ここにどんどんタグを追加する -->
<script type="riot/tag" src="components/Home.tag"></script>
<script type="riot/tag" src="components/HowToUse.tag"></script>
<script type="riot/tag" src="components/SetUp.tag"></script>
<script type="riot/tag" src="components/NotFound.tag"></script>
<script type="riot/tag" src="components/***.tag"></script>

<!-- scripts we need -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.9.0/riot+compiler.js"
        integrity="sha256-4zekzcv0RXNMJ8CmHna5ya2kDpFOH1wRH2ZTAnyllnI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/route+tag.min.js"></script>

<!-- my scripts -->
<script src="public/js/script.js"></script>

<!-- Initialize -->
<script>
    'use strict';

    riot.compile(function () {
        riot.mount('*'); /* componentの有効化 */
        route.start(true); /* ルーティング有効化 */
    })
</script>
</body>
</html>

app.tag는 이쪽
포인트는 riot-route 의 <router> 를 이용하는 것.<route> 의 path 요소를 "*"로 하면 아무것도 발견되지 않았을 때에 아이 요소를 render 합니다.

※ 주의
반드시,
riot.js 는 riot+compiler.js ,
riot-route는 route+tag.js를 읽으십시오.
일반적인 것을 읽으면 작동하지 않을 수 있습니다.
<r-app>
    <aside>
        <ul>
            <li><a each={ links } href="#{ url }">{ name }</a></li>
        </ul>
    </aside>
    <main>
        <router>
            <route path="/"><r-app-home /></route>
            <route path="/how_to_use"><r-app-how-to-use /></route>
            <route path="/set_up"><r-app-set-up /></route>
            <route path="*"><r-app-not-found /></route>
        </router>
    </main>

    <script>
    'use strict';

    this.links = [
        { name: "Home",       url: "" },
        { name: "How To Use", url: "how_to_use" },
        { name: "Set Up",     url: "set_up" },
    ];
    </script>
    <style scoped>
    /* scoped を付けると Component内でのみ有効となる */
    </style>
</r-app>

나머지 ***.tag 파일의 경우 app.tag를 참조하여 태그 이름을 결정하고 처리를 작성하기 만하면됩니다.index.html 로 riot.mount(*) 하고 있으므로 모든 Component 가 읽혀질 것입니다.

Conclusion



문서를 쓰는 것이 약한 분도 이것을 계기로 문서 작성에 익숙해져 갈 수 있으면 좋네요!
나도 노력하고 싶습니다.

참고


  • 2016년 새로운 기능! GitHub의 master 브랜치를 웹페이지로 공개하는 절차
  • Riot.js
  • riot-route
  • EMOJI CHEAT SHEET
    • webpack에서 github pages를 deploy 할 때의 빠짐 (vue.js)
    private 리포지토리에서도 Jenkins와 S3를 사용하여 GithubPages와 같은 것을 시도했습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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