airframe next

다음에 기체

모든 스마트 폰, 태블릿 또는 데스크탑에서 잘 작동하는 고품질 대시 보드 / 관리자 / 분석 템플릿 . MIT 라이센스로 오픈 소스로 제공됩니다.

• 데모보기
• jQuery 버전
• 반응 버전
• Angular 버전 - 준비중인 문서
• VUE 버전 - 준비중인 문서
• MVC.NET 버전 - 준비중인 문서
• 파일 스케치 (곧)

소개

미니멀리스트 디자인과 혁신적인 Light UI가 장착 된 Airframe 대시 보드를 사용하면 훌륭한 UI를 사용하여 놀랍고 강력한 애플리케이션을 구축 할 수 있습니다. 자세한 단계별 문서가 포함 된 대규모 응용 프로그램을 위해 완벽하게 설계되었습니다.

이 기체 프로젝트는 NextJS를 기반으로합니다. 이는 훌륭한 서버 측 렌더링 지원과의 반응을 위해 제작 된 인기있는 프레임 워크입니다. 부트 스트랩 지원을위한 맞춤형 ReactStrap을 포함합니다. 여기에서 찾을 수없는 주제는 아마도 NextJS 문서에 설명되어있을 것입니다.

참고 :이 프로젝트를 제작에 사용하려면 NodeJS를 지원하는 서버가 필요합니다.

초기 구성 :

DEV 환경을 실행하려고 시도하기 전에 로컬 컴퓨터에 nodejs (> = 10.0.0)를 설치해야합니다.

1. 패키지의 내용을 로컬 컴퓨터로 추출하십시오.
2. 터미널을 사용하여 추출 된 내용으로 이동합니다.
3. npm install 실행하십시오.

추출 된 디렉토리에 .npmrc 라는 파일이 있는지 확인하십시오. 이러한 파일은 일반적으로 유닉스 기반 시스템에 숨겨져 있습니다.

개발

개발 환경을 시작하려면 콘솔에서 npm run dev . 핫 재 장전이 활성화 된 개발 서버가 시작됩니다.

생산

패키지에 포함 된 쉘 스크립트를 사용할 수 있습니다. 터미널에서 Unix 기반 시스템 실행 ./build-dist.sh 를 사용하는 경우 /dist 디렉토리에 패키지를 배포 할 준비가됩니다.

쉘 스크립트를 사용할 수없는 경우 패키지를 수동으로 준비해야합니다.

1. npm run build 실행하십시오
2. 해당 내용을 대상 기계에 복사하십시오
   • .next
   • static
   • package.json
   • .npmrc
3. 위 내용을 복사 한 서버에서 npm install 실행하십시오.
4. 이제 npm start 실행하여 앱을 시작할 수 있습니다.

사용자 정의 구축

다음 플러그인을 추가하고 next.config.js 파일 내부에서 구성하여 추가 빌드 기능을 추가 할 수 있습니다.

프로젝트 세부 사항

프로젝트 프로젝트 구조에 대한 관심있는 몇 가지 사항 :

• components - Global React 구성 요소가 여기로 이동해야합니다
• styles - 여기에 추가 된 스타일은 CSS 모듈로 취급되지 않으므로 모든 글로벌 클래스 또는 라이브러리 스타일은 여기로 이동해야합니다.
• features - 페이지 특정 구성 요소는 여기에 있습니다
• features/Layout - AppLayout 구성 요소는 여기에서 페이지 내용물 자체를 호스팅하는 곳에서 찾을 수 있습니다. 각 페이지의 레이아웃 구성 요소를 변경할 수 있습니다.
• core/colors.js 대시 보드에서 정의 된 모든 색상의 객체를 내보내고 있습니다. JS 기반 구성 요소 (예 : 차트) 스타일링에 유용합니다.
• pages - 페이지 구성 요소는 여기에 있어야합니다. 다음 JS는 파일 이름을 자동으로 맵핑하여 URL을 라우팅합니다.

라우팅

경로 구성 요소는 /routes/ 디렉토리 내부의 별도 디렉토리에 배치해야합니다. 다음으로 /routes/index.js 파일을 열고 구성 요소를 첨부해야합니다. 두 가지 다른 방법 으로이 작업을 수행 할 수 있습니다.

정적 수입

정적으로 가져온 페이지는 다른 모든 컨텐츠와 함께 Pageload에서 간절히로드됩니다. 해당 페이지를 탐색 할 때 추가로드가 없지만 초기 앱로드 시간도 더 길어집니다. 정적으로 가져온 페이지를 추가하려면 다음과 같이 수행해야합니다.

 // Import the default component
import SomePage from './SomePage' ;
// ...
export const RoutedContent = ( ) => {
    return (
        < Switch >
            { /* ... */ }
            { /* Define the route for a specific path */ }
            < Route path = "/some-page" exact component = { SomePage } />
            { /* ... */ }
        </ Switch >
    ) ;
} 

라우팅

라우팅 시스템은 Nextjs 자체에 의해 처리됩니다. 여기에서 문서를 찾을 수 있습니다 - Nextjs 라우팅

경로 특정 레이아웃

때로는 Navbar 또는 사이드 바에 추가 컨텐츠를 표시 할 수도 있습니다. 이렇게하려면 특정 페이지의 사용자 정의 레이아웃 구성 요소를 정의해야합니다. 예:

1. features/layout 에서 새 레이아웃 구성 요소를 만듭니다. LayoutDefault 구성 요소를 예로 들어 보겠습니다.
2. 특정 경로의 페이지 구성 요소를 엽니 다. 예를 들어 pages/example-page.js .
3. 다음과 같이 사용자 정의 레이아웃 구성 요소를 설정하십시오.

 import React from 'react' ;

import { CustomLayout } from
    './../../features/Layout/CustomLayout' ;

const ExamplePage = ( ) => (
    { /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;

export default ExamplePage ; 

테마

<ThemeProvider> 구성 요소에 initialStyle 및 initialColor 제공하여 <Layout> 구성 요소를 감싸는 일을 제공하여 사이드 바 및 NAVBAR의 색 구성표를 설정할 수 있습니다.

가능한 initialStyle 값 :

• 빛
• 어두운
• 색상

가능한 initialColor 값 :

• 주요한
• 성공
• 정보
• 경고
• 위험
• 남빛
• 보라
• 분홍색
• 노란색

프로그래밍 방식 테마 변경

구성 요소의 ThemeConsumer 를 사용하여 런타임에 색 구성표를 변경할 수 있습니다. 예:

 // ...
import { ThemeContext } from './../components' ;
// ...
const ThemeSwitcher = ( ) => (
    < ThemeConsumer >
        ( { onChangeTheme } ) = > (
            < React . Fragment >
                < Button onClick = { ( ) => onThemeChange ( { style : 'light' } ) } >
                    Switch to Light
                </ Button >
                < Button onClick = { ( ) => onThemeChange ( { style : 'dark' } ) } >
                    Switch to Dark
                </ Button >
            </ React . Fragment >
        )
    </ ThemeConsumer >
) ;

ThemeConsumer 가 제공하는 옵션 :

• 스타일 - 현재 테마 스타일
• 색상 - 현재 테마 색상
• onchangetheme ({style?, color?}) - 테마를 변경할 수 있습니다.