15.03.2025, 14:20
(Dieser Beitrag wurde zuletzt bearbeitet: 15.03.2025, 14:24 von Manfred Aabye.)
Das Astro 5.5 Web Framework
Astro ist ein modernes Web-Framework, das sich auf die Erstellung von schnellen, statischen Websites konzentriert.
Es verwendet keine traditionellen CSS-Frameworks wie Bootstrap, sondern setzt auf moderne Web-Standards und ermöglicht die Integration von verschiedenen UI-Bibliotheken.
1. Astro-Projekt erstellen
Zuerst musst du ein neues Astro-Projekt erstellen. Führe dazu die folgenden Befehle aus:
bash
2. Astro-Komponenten erstellen
Erstelle eine neue Astro-Komponente für deine Seite, z.B. `src/pages/index.astro`.
3. Angepasster Code für Astro
Hier ist der angepasste Code für deine Seite in Astro:
astro
---
### 4. Globale CSS-Datei
Erstelle eine globale CSS-Datei `src/styles/global.css`, um die CSS-Variablen zu definieren:
css
5. Bilder hinzufügen
Lege die Bilder `background.jpg` und `foreground.png` in den `public/images`-Ordner.
6. Astro-Projekt starten
Starte das Astro-Projekt mit:
bash
Erläuterungen:
- Astro-Komponenten: Astro verwendet `.astro`-Dateien, die eine Mischung aus HTML, CSS und JavaScript sind.
- CSS-Variablen: Wir verwenden CSS-Variablen, um die Farben dynamisch zu ändern.
- JavaScript: Das JavaScript wird direkt in der Astro-Komponente eingebettet, um die Farben zu ändern.
Astro ist ein modernes Web-Framework, das sich auf die Erstellung von schnellen, statischen Websites konzentriert.
Es verwendet keine traditionellen CSS-Frameworks wie Bootstrap, sondern setzt auf moderne Web-Standards und ermöglicht die Integration von verschiedenen UI-Bibliotheken.
1. Astro-Projekt erstellen
Zuerst musst du ein neues Astro-Projekt erstellen. Führe dazu die folgenden Befehle aus:
bash
Code:
npm create astro@latest
cd dein-projekt
npm install2. Astro-Komponenten erstellen
Erstelle eine neue Astro-Komponente für deine Seite, z.B. `src/pages/index.astro`.
3. Angepasster Code für Astro
Hier ist der angepasste Code für deine Seite in Astro:
astro
---
PHP-Code:
import '../styles/global.css';
const title = 'Deine Seite';
const SITE_NAME = 'Deine Seite';
const FONT_FAMILY = 'Arial, sans-serif';
const BACKGROUND_IMAGE = '/images/background.jpg';
const FOREGROUND_IMAGE = '/images/foreground.png';
const BACKGROUND_OPACITY = 0.9;
const FOREGROUND_OPACITY = 0.8;
const INITIAL_COLOR_SCHEME = 'default';
const colorSchemes = {
default: {
header: '#007bff',
footer: '#343a40',
secondary: '#f8f9fa',
primary: '#212529'
},
dark: {
header: '#343a40',
footer: '#212529',
secondary: '#121212',
primary: '#ffffff'
}
};
function setColorScheme(scheme) {
document.documentElement.style.setProperty('--header-color', colorSchemes[scheme].header);
document.documentElement.style.setProperty('--footer-color', colorSchemes[scheme].footer);
document.documentElement.style.setProperty('--secondary-color', colorSchemes[scheme].secondary);
document.documentElement.style.setProperty('--primary-color', colorSchemes[scheme].primary);
}
---
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<style>
body {
font-family: {FONT_FAMILY};
background-color: var(--secondary-color);
color: var(--primary-color);
background-image: url({BACKGROUND_IMAGE});
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100vw;
opacity: {BACKGROUND_OPACITY};
}
header {
background-color: var(--header-color);
padding: 10px;
text-align: center;
color: white;
}
footer {
background-color: var(--footer-color);
margin: 0;
padding: 0;
text-align: center;
color: white;
position: fixed;
width: 100%;
bottom: 0;
line-height: 0;
}
.container {
background-image: url({FOREGROUND_IMAGE});
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
padding: 20px;
border-radius: 8px;
opacity: {FOREGROUND_OPACITY};
}
.color-button {
margin: 1px;
padding: 1px;
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 10px;
color: white;
}
</style>
<script>
const colorSchemes = {JSON.stringify(colorSchemes)};
function setColorScheme(scheme) {
document.documentElement.style.setProperty('--header-color', colorSchemes[scheme].header);
document.documentElement.style.setProperty('--footer-color', colorSchemes[scheme].footer);
document.documentElement.style.setProperty('--secondary-color', colorSchemes[scheme].secondary);
document.documentElement.style.setProperty('--primary-color', colorSchemes[scheme].primary);
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.color-button').forEach(function(button) {
button.addEventListener('click', function() {
setColorScheme(this.dataset.scheme);
});
});
// Set the initial color scheme
setColorScheme('{INITIAL_COLOR_SCHEME}');
});
</script>
</head>
<body>
<header class="bg-primary text-white p-3">
<h1>Welcome to {SITE_NAME}</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">{SITE_NAME}</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{Object.entries(colorSchemes).map(([scheme, colors]) => (
<li class="nav-item">
<button class="btn btn-sm btn-secondary color-button" data-scheme={scheme} style={`background-color: ${colors.header};`}>{scheme.charAt(0).toUpperCase() + scheme.slice(1)}</button>
</li>
))}
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<!-- Inhalt der Seite -->
</div>
<footer class="bg-dark text-white text-center py-3">
© {new Date().getFullYear()} {SITE_NAME}
</footer>
</body>
</html>
### 4. Globale CSS-Datei
Erstelle eine globale CSS-Datei `src/styles/global.css`, um die CSS-Variablen zu definieren:
css
Code:
:root {
--header-color: #007bff;
--footer-color: #343a40;
--secondary-color: #f8f9fa;
--primary-color: #212529;
}5. Bilder hinzufügen
Lege die Bilder `background.jpg` und `foreground.png` in den `public/images`-Ordner.
6. Astro-Projekt starten
Starte das Astro-Projekt mit:
bash
Code:
npm run devErläuterungen:
- Astro-Komponenten: Astro verwendet `.astro`-Dateien, die eine Mischung aus HTML, CSS und JavaScript sind.
- CSS-Variablen: Wir verwenden CSS-Variablen, um die Farben dynamisch zu ändern.
- JavaScript: Das JavaScript wird direkt in der Astro-Komponente eingebettet, um die Farben zu ändern.
Ein Metaversum sind viele kleine Räume, die nahtlos aneinander passen,
sowie direkt sichtbar und begehbar sind, als wäre es aus einem Guss.
sowie direkt sichtbar und begehbar sind, als wäre es aus einem Guss.
![[-]](https://www.gridtalk.de/images/collapse.png)