Flowershow 开源项目使用教程

Flowershow 开源项目使用教程

flowershow💐 Publish your obsidian digital garden or any markdown site easily and elegantly.项目地址:https://gitcode.com/gh_mirrors/fl/flowershow

1、项目的目录结构及介绍

Flowershow 项目的目录结构如下：

flowershow/
├── components/
├── config/
├── content/
├── layouts/
├── lib/
├── pages/
├── public/_flowershow/
├── scripts/
├── styles/
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .prettierignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

目录介绍：

• components/: 存放 React 组件。
• config/: 存放项目的配置文件。
• content/: 存放 Markdown 内容文件。
• layouts/: 存放页面布局文件。
• lib/: 存放库文件。
• pages/: 存放 Next.js 页面文件。
• public/_flowershow/: 存放公共资源文件。
• scripts/: 存放脚本文件。
• styles/: 存放样式文件。
• .eslintrc.json: ESLint 配置文件。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierignore: Prettier 忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• next-env.d.ts: Next.js 环境类型定义文件。
• next.config.mjs: Next.js 配置文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目依赖和脚本配置文件。
• postcss.config.js: PostCSS 配置文件。
• tailwind.config.js: Tailwind CSS 配置文件。

2、项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本配置：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

启动命令：

• npm run dev: 启动开发服务器。
• npm run build: 构建生产环境版本。
• npm run start: 启动生产环境服务器。
• npm run lint: 运行 ESLint 进行代码检查。

3、项目的配置文件介绍

next.config.mjs

Next.js 的配置文件，用于配置 Next.js 应用的各种选项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

export default nextConfig;

tailwind.config.js

Tailwind CSS 的配置文件，用于自定义 Tailwind CSS 的配置：

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

PostCSS 的配置文件，用于配置 PostCSS 插件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

.eslintrc.json

ESLint 的配置文件，用于配置代码检查规则：

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

flowershow💐 Publish your obsidian digital garden or any markdown site easily and elegantly.项目地址:https://gitcode.com/gh_mirrors/fl/flowershow