Visitez le dépôt d'origine - Bento
style.csscode.
Settings > GitHub Pages > Source [master branch] > Save
Github Pages link
Vous pouvez utiliser différents modules complémentaires/extensions pour cela
Presque toutes les personnalisations peuvent être gérées dans le
config.jsfichier :
Pour changer le nom par défaut, les salutations et si vous voulez avoir une image de fond ou ouvrir vos liens dans de nouveaux onglets, éditez les premières configurations dans le fichier
config.js.
// General
name: 'John',
imageBackground: false,
openInNewTab: true,
// Greetings
greetingMorning: 'Good morning!',
greetingAfternoon: 'Good afternoon,',
greetingEvening: 'Good evening,',
greetingNight: 'Go to Sleep!',
Vous pouvez changer l'arrière-plan en remplaçant le
background.jpgfichier dansassetsle dossier.
Pour modifier les boutons, il vous suffit de modifier la liste suivante dans le
config.jsfichier en choisissant un lien, une icône parmi les icônes Feather et un nom :
cards: [
{
id: '1',
name: 'Github',
icon: 'github',
link: 'https://github.com/',
},
{
id: '2',
name: 'Mail',
icon: 'mail',
link: 'https://mail.protonmail.com/',
},
{
id: '3',
name: 'Todoist',
icon: 'trello',
link: 'https://calendar.google.com/calendar/r',
},
{
id: '4',
name: 'Calendar',
icon: 'calendar',
link: 'https://calendar.google.com/calendar/r',
},
{
id: '5',
name: 'Reddit',
icon: 'bookmark',
link: 'https://reddit.com',
},
{
id: '6',
name: 'Odysee',
icon: 'youtube',
link: 'https://odysee.com/',
},
],
La même chose se produit avec les liens de la liste, vous pouvez changer l'icône de la liste (également en utilisant des icônes en forme de plume) et les liens :
//Icons
firstListIcon: 'music',
secondListIcon: 'coffee',
// Links
lists: {
firstList: [
{
name: 'Inspirational',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Classic',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Oldies',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Rock',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
],
secondList: [
{
name: 'Linkedin',
link: 'https://linkedin.com/',
},
{
name: 'Figma',
link: 'https://figma.com/',
},
{
name: 'Dribbble',
link: 'https://dribbble.com',
},
{
name: 'Telegram',
link: 'https://webk.telegram.org',
},
],
},
Pour configurer le widget Météo, vous aurez besoin d'une clé API de :
https://openweathermap.org/. Une fois que vous avez votre clé, vous devrez définir votre latitude et votre longitude, vous pouvez utiliser :
https://www.latlong.net/pour les obtenir.
Enfin, choisissez un jeu d'icônes :
Enfin, ajoutez-les simplement au
config.jsfichier.
// Weather
weatherKey: 'InsertYourAPIKeyHere123456',
weatherIcons: 'OneDark',
weatherUnit: 'C',
weatherLatitude: '37.774929',
weatherLongitude: '-122.419418',
Dans le
app.cssfichier, vous pouvez modifier les variables pour les deux thèmes (Dark et Light) :
/* Light theme */
:root {
--accent: #61b0f1; /* Hover color */
--bg: #f5f5f5; /* Background color */
--sbg: #e4e6e6; /* Cards color */
--fg: #3a3a3a; /* Foreground color */
--sfg: #3a3a3a; /* Sceondary Foreground color */
}
/* Dark theme */
.darktheme {
--accent: #61b0f1; /* Hover color */
--bg: #19171a; /* Background color */
--sbg: #201e21; /* Cards color */
--fg: #d8dee9; /* Foreground color */
--sfg: #3a3a3a; /* Secondary Foreground color */
}
Le thème peut être automatiquement modifié par le thème actuel de l'OS ou des heures personnalisées que vous pouvez modifier dans le
config.jsfichier :
// Autochange
autoChangeTheme: true,
// Autochabge by OS
changeThemeByOS: false,
// Autochange by hour options (24hrs format, string must be in: hh:mm)
changeThemeByHour: true, // If it's true, it will use the values below:
hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour
hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour