Рубрики
Без рубрики

Статический сайт Membuat Dengan Nuxt.js

Сайт Selamat Tinggal Yang Dulu … Предупреждение: этот сайт больше не использует этот метод, поскольку я не могу … помечен с Индонезией, JavaScript, NUXT.

Сайт Selamat Tinggal Yang Dulu …

Предупреждение: этот сайт больше не использует этот метод, так как я не могу понять, как сделать динамический SEO в NUXT.JS, больше на этой информации я объясню в здесь Но вы все еще можете использовать это руководство для создания простого блога NUXT.JS:)

Хай! 😃 Dan Selamat Datang di Blog Baru Ini Sebelumnya Maaf Jika Ini Memakan Waktu Lama Hanya Untuk Сайт Dengan Fitur Tak Banyak Ini. JamStack Sendiri Sudah Cukup Lama Berkembang Sejak Saya Mengenalnya 2017 Lalu Melalui Sebuah Purusahaan Bernama NetLify Ян Берхасил меня- Переделать Сайт Sebuah Yang Suka Saya Kunjungi Saat Sedang Belajar Программирование Sampai Sekarang Berkarir di dunia ini.

Кукуп простой

Поцелуй Дэнган Аданья баняк Bantuan Dari Module Di NPM … Кукуп простой Дэн Бахкан Себенарня Кита Дапат Меньюлесайкана Сату Хари.

Разборка отметки

Bagian Markdown-Parsing Saya Menggunakan Отмена – это Модуль Ovisial Dari Nuxtjs. Сая Агак Мендапатакан Седикит беда Мэнгунакан MDX Падахал менурут Sawa Ini Lebih мощная дарипада Sekedar Parsing. Karena Saya Menganut Filosofi DADI SIK Обновление Sesuk Мака Сая Мемилих отметка – это

// nuxt.config.js

modules: ['@nuxtjs/markdownit'],
markdownit: {
  html: true,
  preset: 'default',
  linkify: true,
  breaks: true
},

Дэн Кита Биса Менганакана Дэнган

// vue template you use




Название содержимого и Blogpost Meta

Untuk Hal ini Saya Manfaatkan ЯМЛ Фронт Материл Markdown Pada. Саянгня Отмена – это Mendeteksi Yaml Front Mattion Ini Sebagai H2 DAN DI PARSE KE HTML 😄 JADI YA SAYA NEMU обходной путь Ян Paling Tidak Bekerja di сайт Saya.

// remove yaml from blogpost 😁
mounted() {
  const h2 = document.getElementsByTagName('h2')
  h2[0].outerHTML = ''
}

Kembali Ke Topik Meta Tadi Untuk Parser Yaml Saya Memakai Серого материи Себенарня Ини Терлалу мощный -sih Tapi Saya Tidak Bisa Menemukan Yang Lebih Simple Lagi Di NPM. LALU KITA BUAT SICE Script Untuk Men-Generate Meta Kita.

// create-post-list.js

const fs = require('fs')
const matter = require('gray-matter')
// eslint-disable-next-line no-path-concat
const files = fs.readdirSync(__dirname + '/content/post')

console.time('⏲')

const posts = []

for (const i in files) {
  // eslint-disable-next-line no-path-concat
  const str = fs.readFileSync(__dirname + `/content/post/${files[i]}`, 'utf8')
  const post = matter(str).data
  posts.push(post)
}

//  to JSON
const data = JSON.stringify(posts)
fs.writeFileSync('blogposts.json', data)

console.timeEnd('⏲')

Хлопнуть! Дэнган Ини Кита Паная единый источник правды Ян Гампан Кита Гунакан, Аданья blogposts.json Ини Биса Дибунакан Джуга док Mempermudah Проход генерирует маршрут ди nuxt.config.js.

// nuxt.config.js

const blogJSON = require('./blogposts.json')

function generateStaticRoute() {
  const route = []
  for (let i = 0; i < blogJSON.length; i++) {
    // add /blog in frot of string
    const blog = blogJSON[i].slug.replace(/^/, '/blog/')
    route.push(blog)
  }
  return route
}

// pages routes automaticaly generated with nuxt 🚄
module.exports = {
  generate: {
    routes: generateStaticRoute()
  }
}

Dengan Tambahan Script Di package.json Untuk Run Ini Selesai Sudah.

Кита Юга Гунакан blogpost.json Тади Пада Vuex Магазин док извлекать Данные artikel ini.

import dataJson from '../blogposts.json'

export const state = () => ({
  posts: [],
  post: {}
})

export const mutations = {
  updatePosts(state, postsJSON) {
    state.posts = postsJSON
  },
  updatePost(state, { post }) {
    state.post = post
  }
}

export const actions = {
  getPost({ commit, state }, slug) {
    const post = state.posts.find(post => {
      return post.slug === slug
    })
    commit('updatePost', { post: post })
  },
  getListOfPost({ commit, state }) {
    if (state.posts.length === 0) commit('updatePosts', dataJson)
  }
}

Нааах Дэнган Ини Кита извлекать Meta data blogpost kita yg ada pada Реклама ди Vue-шаблон

fetch({ store, params }) {
  // in case user reload the page
  store.dispatch('getListOfPost')
  //  fetch post
  store.dispatch('getPost', params.slug)
},

Выделение кода

Sawa Pilih Yang Plinging Ringan Prism.js Penggunaannya Cukup просто.

// _slug.vue

mounted() {
  const block = document.querySelectorAll('code')
  for (let i = 0; i < block.length; ++i) {
    block[i].classList.add('language-javascript')
  }
  //  remove yaml title
  const h2 = document.getElementsByTagName('h2')
  h2[0].outerHTML = ''
  // hightlight code
  Prism.highlightAll()
}

Enaknya Memakai Prism Sendiri Ini Style Dapat Kita Kustomisasi Dengan Mudah 😍.

Все еще на прогрессе

Jika Anda Membaca Sampai Sini Ini Isinya Hanya CurhaTan Saja. Sawa Ada Juga Mengalami Blocker Lain Selaн Kesusahan Saat Mengapliaksikan MDX DI проект INI. Salah-Satunya Adalah Purgecss Проект INI Menggunakan Tailwindcss Dimana Jika Tidak di kompress Atau Dikurangi Class Yang Tidak Digunakan Maka Размер CSS-NYA CUKUP BASAR YAITU 38.6KB.

Саат Сая Ммутускан Мэнгукан Purgecss , CSS Custom Saya Banyak Kena Обрезать 😄 Walaupun Sudah Saya включает в себя класс Beberapa Yang Tidak Boleh Di Обрезать Отказ Sawa Selalu Strich Soal размер, Saya Sering Curi исходный код -НЕА Лоташ Kalau Hanya Dipakai 4/6 Fungsi Saja Pada Prokeek Sawa Daripada Harus Meng-Install-Nya.

Комментируя блог Sebenarnya Saya Mau Menyematkan Fitur Komen Pada Blog Ini, Menggunakan utteranc.es Darapida Discus … Tapi Kok Style-Nya Kurang Cock Jadi Saya Harus Menyesuaikanhange Sedikit Dengan Сайт INI.

Karena Saya Tidak Begitu Paham Paham Benar Bonal CSS. Kadang Masih Bingung Ini Kenapa Высота: 100% КОК TIDAK BISA BISA 😂. Денган Ини Сая Нятакан МСЭ Фитру Берикутня Саджа Хехе.

Хорошо, semoga anda menikmati первый пост saka ini dan mendapat setidaknya sedikit ilmu 😁 ah yah untuk meninggalkan komen anda dapat mengunjungi github thume ini Sambil Saya Coba Coba Integrasi неуклонные отношения Тади.

Tidak Lupa Исходный код Untuk сайт INI ADA DI сини

Оригинал: “https://dev.to/mandaputtra/membuat-static-site-dengan-nuxt-js-4n87”