astro paper Télécharger - astro paper Téléchargement du code source

astro paper

Autres catégories

v4.7.0

Télécharger

AstroPaper ?

Structure du projet

À l'intérieur d'AstroPaper, vous verrez les dossiers et fichiers suivants :

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

Astro recherche les fichiers .astro ou .md dans le répertoire src/pages/ . Chaque page est exposée sous forme d'itinéraire en fonction de son nom de fichier.

Tous les actifs statiques, comme les images, peuvent être placés dans le répertoire public/ .

Tous les articles de blog sont stockés dans le répertoire src/content/blog .

Documentation

La documentation peut être lue dans deux formats : markdown et article de blog .

Configuration - démarque | article de blog
Ajouter des messages - démarque | article de blog
Personnaliser les schémas de couleurs - démarque | article de blog
Schémas de couleurs prédéfinis - démarque | article de blog

Pour AstroPaper v1, consultez cette branche et cette URL en direct

Pile technologique

Cadre principal - Astro
Vérification de type - TypeScript
Cadre de composants - ReactJS
Style - TailwindCSS
UI/UX - Fichier de conception Figma
Recherche floue - FuseJS
Icônes - Boxicons | Tableurs
Formatage du code - Plus joli
Déploiement - Pages Cloudflare
Illustration dans la page À propos - https://freesvgillustration.com
Pelucheux - ESLint

??‍ Exécution locale

Vous pouvez commencer à utiliser ce projet localement en exécutant la commande suivante dans le répertoire souhaité :

 # npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# pnpm
pnpm dlx create-astro --template satnaing/astro-paper

Avertissement! Si vous utilisez yarn 1 , vous devrez peut-être installer sharp en tant que dépendance.

Démarrez ensuite le projet en exécutant les commandes suivantes :

 # install dependencies
npm run install

# start running the project
npm run dev

Comme approche alternative, si Docker est installé, vous pouvez utiliser Docker pour exécuter ce projet localement. Voici comment procéder :

 # Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

Vérification du site Google (facultatif)

Vous pouvez facilement ajouter votre balise HTML de vérification de site Google dans AstroPaper à l'aide d'une variable d'environnement. Cette étape est facultative. Si vous n'ajoutez pas la variable d'environnement suivante, la balise google-site-verification n'apparaîtra pas dans la section HTML <head> .

 # in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

Consultez cette discussion pour ajouter AstroPaper à la console de recherche Google.

? Commandes

Toutes les commandes sont exécutées depuis la racine du projet, depuis un terminal :

Note! Pour les commandes Docker , nous devons l'installer sur votre machine.

Commande	Action
`npm install`	Installe les dépendances
`npm run dev`	Démarre le serveur de développement local sur `localhost:4321`
`npm run build`	Construisez votre site de production sur `./dist/`
`npm run preview`	Prévisualisez votre build localement, avant de le déployer
`npm run format:check`	Vérifiez le format du code avec Prettier
`npm run format`	Formater les codes avec Prettier
`npm run sync`	Génère des types TypeScript pour tous les modules Astro. Apprendre encore plus.
`npm run lint`	Lint avec ESLint
`docker compose up -d`	Exécutez AstroPaper sur Docker, vous pouvez y accéder avec le même nom d'hôte et le même port renseignés sur la commande `dev` .
`docker compose run app npm install`	Vous pouvez exécuter n'importe quelle commande ci-dessus dans le conteneur Docker.
`docker build -t astropaper .`	Créez une image Docker pour AstroPaper.
`docker run -p 4321:80 astropaper`	Exécutez AstroPaper sur Docker. Le site Web sera accessible à `http://localhost:4321` .

Avertissement! Les utilisateurs de Windows PowerShell devront peut-être installer le package simultanément s'ils souhaitent exécuter des diagnostics pendant le développement ( astro check --watch & astro dev ). Pour plus d'informations, consultez ce problème.

Commentaires et suggestions

Si vous avez des suggestions/commentaires, vous pouvez me contacter via mon email. Vous pouvez également ouvrir un ticket si vous trouvez des bugs ou si vous souhaitez demander de nouvelles fonctionnalités.