신선한 블로그 엔진: 상용구 코드

// routes/index.tsx

/** @jsx h */
import { h } from "preact";
import { setting } from "setting";
import { Handlers, PageProps } from "$fresh/server.ts";
import Home from '../components/front/home.jsx';


export const handler: Handlers = {
  async GET(req, ctx) {
    const config = setting();
    config.message = "Welcome to Fresh framework!";
    return await ctx.render({ "setting": config });
  },
}


export default function Template(props: PageProps){
  return (
    <Home data={props.data} />
  )
}

// components/front/home.jsx

/** @jsx h */
import { h } from "preact";
import Base from "../base.jsx";

function HomeJsx(props){
    return(
        <div>{props.data.setting.message}</div>
    )
}


export default function Home(props){
    props.data.page = HomeJsx;
    return(
        <Base data={props.data} />
    )
}

// components/base.jsx

/** @jsx h */
import { h } from "preact";


export default function Base(props){
    const Page = props.data.page
    return(
        <html>
          <head>
            <meta charSet="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <title>{props.data.setting.site_title} | {props.data.setting.page_title}</title>
            <link href="/styles/base.css" rel="stylesheet" />
            <link href="/fonts/setup.css" rel="stylesheet" />
            <script src="/scripts/jquery.js"></script>
          </head>
          <body>
            <Page data={props.data} />
          </body>
        </html>
    )
  }

// setting.js

function setting(){
    const configure = {
        site_title: "Multimedia",
        page_title: "Home",
        message: "",
    }

    return configure
}

export { setting }

/* static/styles/base.css */

:root{
    --background-light: #26f8ad;
    --background: lightgrey;
    --background-dark: #149165;
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --link: #17a372;
    --color: black;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: var(--link);
}

a:hover{
    opacity: .7;
}

.region{
    max-width: 1100px;
    margin: 0 auto;
}

body{
    color: var(--color);
    font: var(--body-font);
    background: var(--background);
}

Reference

이 문제에 관하여(신선한 블로그 엔진: 상용구 코드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sokhavuth/boilerplate-code-5gc3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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

신선한 블로그 엔진: 상용구 코드

목차

Sokhavuth TIN ・ 8월 9일 ・ 2분 읽기

Reference

좋은 웹페이지 즐겨찾기