airframe next

เฟรมถัดไป

เทมเพลตแดชบอร์ด / ผู้ดูแลระบบ / การวิเคราะห์ คุณภาพสูงที่ใช้งานได้ดีบนสมาร์ทโฟนแท็บเล็ตหรือเดสก์ท็อป มีให้เป็น โอเพ่นซอร์สเป็นใบอนุญาต MIT

• ดูการสาธิต
• เวอร์ชัน jQuery
• เวอร์ชันตอบสนอง
• เวอร์ชันเชิงมุม - เอกสารในการเตรียมการ
• Vue Version - เอกสารในการเตรียมการ
• MVC.NET เวอร์ชัน - เอกสารในการเตรียมการ
• ไฟล์ร่าง (เร็ว ๆ นี้)

การแนะนำ

แดชบอร์ด Airframe ที่มีการออกแบบที่เรียบง่ายและ UI แสงที่เป็นนวัตกรรมจะช่วยให้คุณสร้างแอพพลิเคชั่นที่น่าทึ่งและทรงพลังด้วย UI ที่ยอดเยี่ยม ออกแบบมาอย่างสมบูรณ์แบบสำหรับแอพพลิเคชั่นขนาดใหญ่พร้อมเอกสารทีละขั้นตอนโดยละเอียด

โครงการ Airframe นี้ใช้ NextJS ซึ่งเป็นเฟรมเวิร์กยอดนิยมที่สร้างขึ้นเพื่อตอบสนองด้วยการสนับสนุนการแสดงผลด้านเซิร์ฟเวอร์ที่ยอดเยี่ยม รวมถึง ReactStrap ที่กำหนดเองสำหรับการสนับสนุน bootstrap หัวข้อใด ๆ ที่คุณจะไม่พบที่นี่อาจอธิบายไว้ในเอกสาร NextJS

หมายเหตุ: หากคุณต้องการใช้โครงการนี้ในการผลิตคุณจะต้องมีเซิร์ฟเวอร์ที่รองรับ NodeJS

การกำหนดค่าเริ่มต้น:

คุณต้องติดตั้ง nodejs (> = 10.0.0) บนเครื่องในเครื่องของคุณก่อนที่จะพยายามเรียกใช้สภาพแวดล้อม dev

1. แยกเนื้อหาของแพ็คเกจไปยังเครื่องในพื้นที่ของคุณ
2. การใช้เทอร์มินัลนำทางไปยังเนื้อหาที่สกัด
3. เรียกใช้ npm install

ตรวจสอบให้แน่ใจว่าคุณมีไฟล์ที่เรียกว่า .npmrc ในไดเรกทอรีที่แยกออกมา ไฟล์เหล่านั้นมักจะถูกซ่อนอยู่ในระบบที่ใช้ UNIX

การพัฒนา

ในการเริ่มต้นสภาพแวดล้อมการพัฒนาประเภท 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 config.js

รายละเอียดโครงการ

บางจุดที่น่าสนใจเกี่ยวกับโครงสร้างโครงการโครงการ:

• components - ส่วนประกอบ React ทั่วโลกควรไปที่นี่
• styles - สไตล์ที่เพิ่มเข้ามาที่นี่จะไม่ถือว่าเป็นโมดูล CSS ดังนั้นคลาสระดับโลกหรือรูปแบบห้องสมุดควรไปที่นี่
• features - ส่วนประกอบเฉพาะของหน้าควรอยู่ที่นี่
• features/Layout - ส่วนประกอบ AppLayout สามารถพบได้ที่นี่ซึ่งโฮสต์เนื้อหาหน้าภายในตัวเอง คุณสามารถเปลี่ยนองค์ประกอบเลย์เอาต์สำหรับแต่ละหน้า
• core/colors.js - ส่งออกวัตถุด้วยสีที่กำหนดทั้งหมดโดยแดชบอร์ด มีประโยชน์สำหรับการจัดแต่งทรงผมส่วนประกอบที่ใช้ JS - ตัวอย่างเช่นแผนภูมิ
• pages - ส่วนประกอบหน้าควรอยู่ที่นี่ NextJS จะแมปชื่อไฟล์โดยอัตโนมัติเพื่อกำหนดเส้นทาง 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 ; 

การสร้างธีม

คุณสามารถตั้งค่าโทนสีสำหรับแถบด้านข้างและ navbar โดยการจัดเตรียม initialStyle และ initialColor ให้กับองค์ประกอบ <ThemeProvider> ซึ่งควรจะห่อส่วนประกอบ <Layout>

ค่า 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?}) - อนุญาตให้เปลี่ยนธีม