nahodny-slusny-cech 项目教程-优快云博客

nahodny-slusny-cech 项目教程

nahodny-slusny-cech Aplikace s prvky UD (umele debility). 项目地址: https://gitcode.com/gh_mirrors/na/nahodny-slusny-cech

1. 项目目录结构及介绍

nahodny-slusny-cech/
├── css/
│   └── 样式文件
├── fonts/
│   └── 字体文件
├── js/
│   └── JavaScript 文件
├── LICENSE
├── README.md
├── index.html
└── manifest.webmanifest

目录结构说明

css/: 存放项目的样式文件，用于定义网页的外观和布局。
fonts/: 存放项目的字体文件，用于网页的字体显示。
js/: 存放项目的 JavaScript 文件，用于实现网页的交互功能。
LICENSE: 项目的许可证文件，说明项目的开源许可协议。
README.md: 项目的说明文件，通常包含项目的简介、安装和使用说明。
index.html: 项目的入口文件，定义了网页的基本结构和内容。
manifest.webmanifest: 项目的 Web 应用清单文件，用于定义 PWA（渐进式 Web 应用）的配置。

2. 项目启动文件介绍

index.html

index.html 是项目的启动文件，也是用户访问项目时首先加载的页面。该文件定义了网页的基本结构和内容，包括 HTML 标签、CSS 样式引用和 JavaScript 脚本引用。

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Náhodný slušný Čech</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="manifest" href="manifest.webmanifest">
</head>
<body>
    <div id="app">
        <h1>Náhodný slušný Čech</h1>
        <p>Klikni na tlačítko pro zobrazení náhodného slušného českého výroku.</p>
        <button id="generate">Generovat</button>
        <div id="output"></div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

文件说明

<head>: 包含网页的元数据，如字符编码、视口设置、标题、样式表和清单文件的引用。
<body>: 包含网页的主体内容，包括标题、按钮和输出区域。
<link rel="stylesheet" href="css/style.css">: 引用外部 CSS 文件，用于定义网页的样式。
<link rel="manifest" href="manifest.webmanifest">: 引用 Web 应用清单文件，用于定义 PWA 的配置。
<script src="js/main.js"></script>: 引用外部 JavaScript 文件，用于实现网页的交互功能。

3. 项目的配置文件介绍

manifest.webmanifest

manifest.webmanifest 是项目的 Web 应用清单文件，用于定义 PWA（渐进式 Web 应用）的配置。该文件包含了应用的名称、图标、主题颜色等信息。

{
  "name": "Náhodný slušný Čech",
  "short_name": "Náhodný Čech",
  "description": "Aplikace s prvky UD (umele debility)",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}