Nuxt.js: Tworzenie strony głównej
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
Cześć!
W tej lekcji zajmiemy się tworzeniem strony głównej.
Jest tutaj kilka takich mniejszych błędów, które moglibyśmy poprawić, no i oczywiście
wypełnić tutaj jakimiś danymi tą stronę początkową.
Pierwsze plany, które mamy to to, że jeżeli przechodzimy na stronę główną to.
Po odświeżeniu strony.
I kliknięciu tutaj na odnośnik czy na bezpośrednio roota.
No to widzimy, że page jest not found i to
wynika z tego, że tutaj walczyliśmy z tym default local ustawione na en
z tym że default local ustawione na en faktycznie naprawia problem.
Tutaj strony głównej.
Jednak faktycznie gdy przejdziemy do random article
to niestety to nam nie działa i musimy się pozbyć stąd z tej ścieżki.
I zastanawiam się z czego to może wynikać i doszedłem do wniosku, że prawdopodobnie
wystarczyłoby po prostu nie przekazywać tej ścieżki w momencie kiedy odpytuje.
Nasz losowy artykuł z Wikipedii.
W związku z czym co możemy zrobić to zmodyfikować
ten middleware, który robi nam random mess i zrobić taką zależność, że jeżeli
language jest pusty to go po prostu tutaj nie wstawimy.
Czyli jeśli?
Link równa się PPM, czyli w przypadku to jest nasz domyślny język.
Moglibyśmy go ustawić w zmiennej
środowiskowej i nie uaktualniać dwa miejsca na raz,
to po prostu zrobimy redirect w takie miejsce.
W przeciwnym wypadku.
Przekieruje Cię na wersję językową.
Czyli jeśli język jest równy.
Językowi angielskiemu, to przekieruje
bezpośrednio do tej podstrony i zobaczmy czy to nam zadziała.
Mam taką nadzieję.
Przejdź na stronę główną i teraz random article.
Jeszcze się to nam chyba nie zablokowało.
Zobaczmy, co tutaj się dzieje.
To był błąd.
General to jest stary błąd.
Na stronie głównej jeszcze raz random article.
Tutaj widzimy pasek.
On jest taki ciemnej, akurat się zlewa
z ułamkiem przeglądarki, ale faktycznie zostało to pobrane i.
Ładują nam się artykuły, więc to jest
pierwszy krok naprawy naszej strony głównej.
Następnym krokiem będzie pozbycie się tych
linków, więc przejdźmy do naszego index.php.
Pozbądźmy się tych plików, a już nie są nam prawdopodobnie potrzebne.
Chyba, że chcielibyśmy faktycznie mieć nawigację.
W sytuacji, kiedy na stronie głównej nie ma żadnego języka, ale taka sytuacja chyba
nie nastąpi, w związku z czym usuńmy to i to co zrobimy, to wykorzystamy ponownie
Wikipedię do pobrania najczęściej odwiedzanych stron, w związku z czym
wykorzystamy tutaj właściwość Most World i analogicznie do tego, co zrobiliśmy
wcześniej w naszym wiki, teraz możemy zmodyfikować nasz
endpoint random, aby przyjmował funkcje i przekazywać tą funkcję tutaj.
Różnica między tymi dwoma punktami jest
taka, że tutaj jest jeszcze krok docelowy, który pobiera nam konkretnego page'a.
Tutaj takiej potrzeby nie mamy, bo będziemy pobierali także właśnie most.
Wójt.
I teraz być może w samym index.php możemy stworzyć async data.
Jest to funkcja synchroniczna, z której.
Pobierzemy sobie biosa analogicznie do tego co robiliśmy teraz.
Czyli tutaj popieramy akcję OSA i zrobimy takie samo zapytanie.
Tutaj.
Pomimo, że piszemy to w komponencie, to nie jest to wywoływane na front endzie.
Tak jak wspominałem na backend async data się wykonuje.
W związku z czym zrobimy sobie zapytanie
do naszego API i tutaj zamiast random wykorzystamy sobie.
No właśnie tutaj jest jeszcze metoda Count.
Na to niestety chyba nie uda się
w taki fajny sposób wykorzystać tego samego endpoint u.
Chciałem oszczędzić tam troszkę czasu,
więc zrobimy kopiuj wklej i zamiast random zrobimy max wet.
Pozbędziemy się niepotrzebnych parametrów, zostawimy.
Parametryzacja języków, bo w różnych
językach najczęściej odwiedzane strony mogą być inne.
No i tutaj max Field wydaje mi się, że też przyjmuje parametr
nie przyjmuje parametru, co w sumie jest ciekawe, bo przydałoby się
przygotować takie tego typu zapytania, więc zapiszemy i
teraz to powinno nam dalej wszystko funkcjonować.
I na naszym.
Pobierzemy Max Field.
Pozbędziemy się tutaj konta.
I nie będziemy wykorzystywali.
Pierwszego elementu tablicy, tylko całe.
I zwrócimy to sobie do naszego data.
Jako Max Wood średnik.
I tutaj darujemy sobie wtręt w HTML.
Powiedzmy czasem.
Albo może bez HTML? Niekoniecznie musi.
Może być to interaktywne.
Tutaj po prostu wąsy.
Jackson Stringi?
Fuj!
Max fiut.
Numer 2 zapisujemy.
I zobaczmy co się stanie na naszej stronie głównej.
Lecz request jest o wiele dłuższy.
On się jeszcze chyba tutaj nie skończył.
Możemy z kasetami zalać kolor tego paska Swoją drogą loading.
Customs tax lobbing.
I tutaj zmienimy sobie jego kolor, żeby to było widoczne.
Więc w naszym next konfiguruje się.
Możemy tutaj wyeksportować link z taką treścią.
Zapiszemy.
Przejdźmy z powrotem na Homepage.
Wydaje mi się, że on się nam nie załadował, ale nie widzę żadnego błędu.
Nawet będzie.
W związku z czym spróbujmy może najpierw Wspaniale.
Nastąpił błąd i powinniśmy to zobaczyć na
ekranie, ale tego nie widać, bo chyba nie zrobiliśmy tutaj ch.
Zróbmy.
Oczywiście nie ma tutaj Langa.
Tak, to jest problemem, więc wyciągamy z aplikacji 16 i tutaj i 18 Król.
Zobaczmy, co poszło nie tak.
Max State Function.
A to akurat ciekawe.
Most field.
I tutaj tak samo jest most WT nie max WT.
To już na pewno przebudować z powrotem na stronę główną.
Niestety dalej jest błąd.
Chyba się nie budowało, więc zrobimy serwer i uruchomimy ponownie.
Powinniśmy zobaczyć po tym, jak już przebudowuje strukturę tego NTP.
Niestety API wiki jest nie najlepsze jeśli
chodzi o to jakie struktury zostaną zwrócone.
Dzięki właśnie temu pre i.
Odpowiedzi z tego co otrzymaliśmy.
Tutaj jestem ciekawy czy to 18 lokal w
ogóle jest też wypełnione, ale załóżmy, że tak.
I ponownie dostaliśmy błąd niestety max put function.
Czy ja czegoś nie zapisałem?
Być może nie zapisałem.
Odświeżamy.
Wyszukaj w całym projekcie w takim razie
nazwę tej zmiennej, bo chyba coś faktycznie.
Tutaj poszło nie tak i faktycznie znajduje się to max tutaj.
Most Wild.
I zapisujemy.
Zobaczmy czy tym razem się to uda.
I faktycznie się udało.
Mamy wypisane czasem z różnymi informacjami.
Jest tutaj nazwa page'a i jakiś Count Count symbolizuje tutaj.
Niestety nie wiadomo co.
Wydaje mi się, że jest to ilość odwiedzin.
Być może dziennie, być może miesięcznie. Ciężko powiedzieć.
Są to bardzo różne wartości, w związku z czym po prostu
to wygenerujemy i zrobimy przekierowanie do odpowiedniej podstrony, czyli w naszym.
Index kw.
Możemy stworzyć nowy komponent, bo tak będzie czyściej.
Nowy komponent Most Field View
i ponownie pobierzemy sobie proste logo albo po prostu templates templates.
Script script.
W.
Eksportujemy komponent i wstawimy tutaj prostego diva,
który będzie zawierał w sobie listę numerowane tym razem, czyli po l.
Poza tym HTML omówię więcej w moim kursie dotyczącym accessibility.
I tutaj przejdę.
Bujamy się po procesach.
Gdzie zdefiniujemy sobie most?
Wiódł.
Jako Type array, który jest required
zapiszemy i tutaj wykorzystamy sobie znak stop linki default view.
Wykorzystamy max linka.
I będziemy musieli stworzyć kilka properties.
Ale w międzyczasie najpierw załaduj ten komponent na indeks.
Może tutaj.
Możemy zmienić nazwę tego parametru na Most Field.
Przekazujemy zmienną z naszego data.
Zapisujemy.
Tutaj był jakiś błąd, Przeczytajmy.
Oczywiście nie ma tutaj znacznika kończącego dla nas linka oraz musimy też
dodać tutaj coś, po czym będziemy interwałami.
Tutaj next link.
Mamy do tego prawo. Chwilowo usuńmy.
Odśwież stronę, zobaczmy, co się stanie.
Komponent się z niczym nie wygenerował, bo nie daliśmy żadnych informacji,
w związku z czym możemy tutaj stworzyć sobie nowy komplet Properties.
I wypisać powiedzmy każdy link, czyli może bardziej metodę, czyli news.
I metoda będzie to get link.
I tutaj piksel jako parametr.
Gdy spojrzymy na naszą treść, widzimy, że niektóre podstrony odnoszą się do special.
Wydaje mi się, że takie
specjalne musimy niestety zignorować, bo jeśli sobie wpiszemy tutaj w wiki.
Na to. Niestety to na mnie działa, w związku z
czym ignorujemy wszystkie wpisy, które posiadają w sobie dwukropek.
Najpierw, czyli tutaj.
Filters articles.
Return des.
Most wójt.
Psów.
Filter.
Article.
Kratka includes dwukropek.
Niestety jest to dosyć ostra reguła i niektóre artykuły mogą nam
się w ogóle nie wyświetlać po prostu dlatego, że mają nazwę w sobie.
I tak naprawdę wydaje mi się, że nie
będziemy musieli nawet robić tego getting w tym momencie.
Bo w for dla article in.
Article in filters.
Articles.
Możemy zrobić sobie sleep +.
Article.
Ta.
I identyczną.
Ten link prawdopodobnie będzie miał treść.
Zapiszmy, zobaczymy co się stanie.
I tak jak nikt nie jest w tym momencie używana.
Na naszej stronie głównej jest teraz jakiś błąd.
Zobaczmy czy wyświetla się tutaj.
Niestety nie.
Więc przejdźmy tutaj na podstronę francuską i dalej błędu nie widać.
Jestem ciekawy z czego to wynika.
Bo jeśli pozbędziemy się chyba tego
komponentu, to on się nam powinien załadować.
W tym momencie to działa. Przywróćmy komponent, zobaczmy oco chodzi.
Ten komponent wywraca całą aplikację.
Czy jest tutaj jakaś informacja dlaczego?
Article function.
Prawdopodobnie musimy przefiltrować po
tytule, a nie po całym obiekcie, więc jeszcze raz odświeżamy.
I w tym momencie to zadziałało.
Tylko musimy odwrócić tutaj negację, że
te, które nie zawierają dwukropka powinny zostać wygenerowane.
I faktycznie jest to wyświetlane, w związku z czym możemy pozbyć się tego.
Pre, które wyświetlało nam dane w takim formacie i będziemy mieli faktycznie
informacje o najpopularniejszych artykułach, które jeżeli wszystko poszło
dobrze powinny przekierowywać nas na odpowiednią stronę.
Tylko, że musimy tutaj dać jeszcze prefiks do strony wiki slash.
I widzimy, że faktycznie nam to zadziałało.
Jeśli przejdziemy na hiszpańską wersję tego artykułu.
Również to działa.
Tutaj nam się.
Wyświetlił jakiś link bardzo długi.
Powinniśmy jeszcze zlinczować ilość tych rzeczy.
I tutaj widzimy Kleopatra.
Prawdopodobnie jeśli klikniemy sobie na
któryś z tych odnośników, przekieruje nas na hiszpańską wersję tego artykułu.
Jak widzimy, każdy z tych języków ma inne popularne strony, w
związku z czym faktycznie mamy sekcję najbardziej popularnych wpisów w
danym języku, więc tutaj możemy zrobić sobie małą dwójkę
i prawdopodobnie powinniśmy tutaj zrobić translację, czyli ten most.
Filtr H2 i teraz w każdym z naszych plików
musimy oczywiście tą translację dodać czyli n +.
Mostek pod.
Most jutro.
I dla pozostałych.
W kraju również.
Szybki Google Translate.
Ma być to.
Dla hiszpańskiego oraz dla francuskiego.
Klepnął swego.
Mam nadzieję, że osoby francuskojęzycznych wybaczą mi moją dykcję po francusku
i faktycznie będziemy mieli tutaj ładny wpis.
Zlokalizowanym danymi.
O najbardziej popularnych artykułach.
Tak naprawdę moglibyśmy tutaj to troszkę oscylować, żeby było to troszkę większe.
Czyli np.
ten komponent jakoś nazwać klasą most wójt.
I tutaj po prostu wstawić style.
Dla tego komponentu.
H2 font size.
1, 5 albo 150.
Ciężko powiedzieć.
Fotel Lema.
Spędziłem troszkę większy.
Pomimo semantycznego takiego samego sensu jak być powinno.
2.
Nie wydaje się to aplikować.
Zobaczmy, co może być problemem.
Klasa jest w porządku.
Font jest ok.
Copy na sztywno 40 pikseli.
Wydaje mi się, że jest to kwestia specyfikacji.
Jak to wrzucimy important.
Jeżeli widzieliście mój kurs dotyczący CSS a będziecie wiedzieli, aby tego nie
robić, jestem bardzo ciekawy czemu to się nie aplikuje tutaj.
W ogóle, czy u nas się nie przebudowuje?
No w każdym razie mamy nasz komponent, który renderuje naszą treść.
Jeszcze posprzątam, pozbędę się metod, które są używane.
I analogicznie most.
First.
L.
Możemy też ustawić jakiś większy font size 20 pikseli.
Tak important.
Ja go tutaj oczywiście nie zostawię, ale zastanawiam się.
Dlaczego to nam się nie aplikuje?
Atlasy zaaplikował.
Bardzo ciekawe czy bez tego important też przeszło.
Tak.
Widocznie Next miał jakiś problem z haszem, więc zmieńmy to może na 1.7 rema.
Mam nadzieję, że zadziałają i.
I faktycznie tam zadziałało.
Mamy tutaj taką sekcję z najbardziej popularnymi artykułami.
Moglibyśmy tutaj zwiększyć troszkę padding
albo zamknąć ten cały boks w jakimś bodajże.
Border.
1 Pixel solid black.
I padding.
20 pikseli marki albo już jak w ramach to w ramach.
1 cm to chyba trochę dużo.
No ale w każdym razie jakoś to wygląda,
więc mamy popularne strony na naszej stronie głównej.
Niezależnie od języka powinny się nam tutaj wyświetlić.
Jeśli przejdziemy na wersję angielską, również mamy najbardziej popularne strony
w wersji angielskiej i możemy przeglądać naszą mini z poziomu strony głównej.
W kolejnej lekcji skupimy się na stworzeniu wyszukiwarki
w naszej aplikacji, wykorzystując do tego natywne elementy HTML oraz jest.
Kod
Zmiany wprowadzone w lekcji · 19 min
diff --git a/32/minipedia/api/routes/wiki.js b/32/minipedia/api/routes/wiki.js
index f9a1c12..d9476ce 100644
--- a/32/minipedia/api/routes/wiki.js
+++ b/32/minipedia/api/routes/wiki.js
@@ -45,4 +45,23 @@ router.get('/random/lang/:lang/count/:count', async (req, res) => {
}
})
+router.get('/mostViewed/lang/:lang', async (req, res) => {
+ const lang = req.params.lang || 'en';
+
+ const Wiki = WikiJs({
+ apiUrl: `https://${lang}.wikipedia.org/w/api.php`,
+ headers: { 'User-Agent': process.env.BOT_USER_AGENT}
+ });
+
+ try {
+ const randomArticles = await Wiki.mostViewed();
+
+ return res.status(200).json(randomArticles);
+
+ } catch (e) {
+ console.error(e);
+ return res.status(500).json(e);
+ }
+})
+
export default router;
\ No newline at end of file
diff --git a/32/minipedia/components/MostViewed.vue b/32/minipedia/components/MostViewed.vue
new file mode 100644
index 0000000..c7c95a9
--- /dev/null
+++ b/32/minipedia/components/MostViewed.vue
@@ -0,0 +1,45 @@
+<template>
+ <div class="most-viewed">
+ <h2> {{ $t('MostViewed') }}</h2>
+ <ol>
+ <li v-for="article in filteredArticles">
+ <nuxt-link :to="localePath('/wiki/'+article.title)">
+ {{ article.title }}
+ </nuxt-link>
+ </li>
+ </ol>
+ </div>
+</template>
+<script>
+export default {
+ props: {
+ mostViewed: {
+ type: Array,
+ required: true,
+ }
+ },
+ computed: {
+ filteredArticles() {
+ return this.$props.mostViewed.filter(article => {
+ return !article.title.includes(':');
+ });
+ }
+ },
+}
+</script>
+
+<style>
+ .most-viewed h2 {
+ font-size: 1.8rem;
+ }
+
+ .most-viewed ol li {
+ font-size: 1.2rem;
+ }
+
+ .most-viewed {
+ border: 1px solid black;
+ padding: 1rem;
+ margin: 1rem;
+ }
+</style>
\ No newline at end of file
diff --git a/32/minipedia/lang/en-US.js b/32/minipedia/lang/en-US.js
index 0490bf6..e52ea36 100644
--- a/32/minipedia/lang/en-US.js
+++ b/32/minipedia/lang/en-US.js
@@ -29,5 +29,6 @@ export default {
'Languages': 'Languages',
'Register': 'Register',
'Login': 'Login',
- 'Disclaimer': 'From Wikipedia, the free encyclopedia'
+ 'Disclaimer': 'From Wikipedia, the free encyclopedia',
+ 'MostViewed': 'Most viewed',
}
\ No newline at end of file
diff --git a/32/minipedia/lang/es-ES.js b/32/minipedia/lang/es-ES.js
index 788f80f..300120d 100644
--- a/32/minipedia/lang/es-ES.js
+++ b/32/minipedia/lang/es-ES.js
@@ -29,5 +29,6 @@ export default {
'Languages': 'Idiomas',
'Register': 'Registrarse',
'Login': 'Acceso',
- 'Disclaimer': 'De Wikipedia, la enciclopedia libre'
+ 'Disclaimer': 'De Wikipedia, la enciclopedia libre',
+ 'MostViewed': 'Mas visto',
}
\ No newline at end of file
diff --git a/32/minipedia/lang/fr-FR.js b/32/minipedia/lang/fr-FR.js
index c7a2eda..4873d5b 100644
--- a/32/minipedia/lang/fr-FR.js
+++ b/32/minipedia/lang/fr-FR.js
@@ -29,5 +29,6 @@ export default {
'Languages': 'Langues',
'Register': 'S\'inscrire',
'Login': 'Connexion',
- 'Disclaimer': 'Un article de Wikipédia, l\'encyclopédie libre'
+ 'Disclaimer': 'Un article de Wikipédia, l\'encyclopédie libre',
+ 'MostViewed': 'Le plus regardé',
}
\ No newline at end of file
diff --git a/32/minipedia/middleware/random.js b/32/minipedia/middleware/random.js
index 79526e7..d72db0f 100644
--- a/32/minipedia/middleware/random.js
+++ b/32/minipedia/middleware/random.js
@@ -1,5 +1,11 @@
export default async function ({ store, route, $axios, app: { i18n }, redirect}) {
const lang = i18n.locale;
const random = (await $axios.$get(`/api/wiki/random/lang/${lang}/count/1`))[0];
+
+
+ if (lang === 'en') {
+ return redirect(`/wiki/${random}`);
+ }
+
return redirect(`/${lang}/wiki/${random}`);
}
\ No newline at end of file
diff --git a/32/minipedia/nuxt.config.js b/32/minipedia/nuxt.config.js
index 2f0d7e4..9b868dc 100644
--- a/32/minipedia/nuxt.config.js
+++ b/32/minipedia/nuxt.config.js
@@ -68,8 +68,13 @@ module.exports = {
}
],
lazy: true,
- langDir: 'lang/'
+ langDir: 'lang/',
+ defaultLocale: 'en',
},
+ loading: {
+ color: 'blue',
+ height: '5px'
+},
basic: {
name: process.env.USERNAME,
pass: process.env.PASSWORD,
diff --git a/32/minipedia/pages/index.vue b/32/minipedia/pages/index.vue
index 16aebeb..b073829 100644
--- a/32/minipedia/pages/index.vue
+++ b/32/minipedia/pages/index.vue
@@ -1,17 +1,19 @@
<template>
<article class="content">
<h1>Minipedia - {{ $t('Welcome') }} </h1>
-
- <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
- <nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>
- <nuxt-link :to="switchLocalePath('es')">Español</nuxt-link>
+ <MostViewed :mostViewed="mostViewed"></MostViewed>
</article>
</div>
</template>
<script>
export default {
- layout: 'default'
+ layout: 'default',
+ async asyncData({ $axios , app: { i18n }}) {
+ return {
+ mostViewed: await $axios.$get(`/api/wiki/mostViewed/lang/${i18n.locale}`),
+ };
+ }
}
</script>