Вы знакомы с моей темой VuePress?

GitHub Vue.js VuePress
Вы знакомы с моей темой VuePress?

В последнее время я не спал много ночей, наступал на бесчисленные ямы и, наконец, написал тему на VuePress.

Просто испытайте это на три минуты, и вы влюбитесь в эту тему, как и я.

vuepress-theme-indigo-material, был опубликован в npm, пожалуйста, наслаждайтесь~~

вводить

vuepress-theme-indigo-materialОригинальная темаhexo-theme-indigo, количество звезд на github достигает2042, вилка есть451Во-первых, это можно увидеть повсюду в применении статического веб-сайта блога.Прежде всего, спасибо оригинальному автору здесь.

Однако его позиционирование заключается в поддержке только современных браузеров, таких как IE10+. Так как нет необходимости поддерживать старые браузеры, при быстром развитии фронтенда уже есть много технологий, которые могут сделать URL быстрее, поэтому я используюVuePressНа самом деле, оригинальный автор индиго уже переписывает его с помощью vuepress, но проект не продвинулся, поэтому я взял на себя эту задачу, и окончательный эффект перезаписи вполне удовлетворительный.

Вы можете посмотреть на следующее: эта тема находится в моих 51 заметках в блоге, развернутых на странице github, GIF-изображение скорости загрузки в сети 4G мобильного телефона, скорость загрузки веб-страницы очень высокая, чем быстрее, после загружается веб-страница, после чего скорость открытия каждой страницы такая же, как при нажатии на локальный файл.

Для конкретных чувств, пожалуйста, нажмите на мойсайт блогаПриходите и испытайте это на себе, разверните его на странице github, пожалуйста, нажмите на облако кода в Китае.адрес страницы

demo.gif

Как говорится в документации VuePress:

Каждая страница, созданная VuePress, поставляется с предварительно обработанным HTML, поэтому она имеет очень хорошую производительность загрузки и оптимизацию для поисковых систем (SEO).

При тестировании веб-сайтов с Lighthouse SEO всегда100, упакованный размер также намного меньше оригинальной темы.

k29TJO.md.png

изобретательный

Причина быстрой загрузки в том, что данные сначала записываются в соответствующий файл js в локальной компиляции,

fs.writeFile(
  `${dataPath}/search.js`,
  `export default ${JSON.stringify(search, null, 2)};`,
  error => {
    if (error)
      return console.log('写入搜索search文件失败,原因是' + error.message);
    console.log('写入搜索search文件成功');
  }
);

Затем, когда веб-страница открыта, в жизненном цикле, созданном для vue.js, объедините синтаксис import() веб-пакета, чтобы импортировать соответствующий файл js, в котором хранятся данные.


  created() {
    import(/* webpackChunkName: "search" */ "Data/search.js").then(search => {
      this.search = search.default;
    });
  },

Webpack разделит код и будет использовать jsonp для запроса js-файлов по мере необходимости, чтобы мы могли организовать необходимые данные во время локальной компиляции, а затем имитировать процесс разработки веб-приложения.Сначала появляется и отображается страница, а данные запрашиваются позже. Я боюсь, что нужные нам данные будут отправлены вместе с веб-страницей за один раз, что замедлит загрузку веб-страницы.

Наконец, используется мощная MVVM vue, потому что данные доступны, а последующие страницы рендерятся почти сразу, то есть клик и открытие.

Это хорошая оптимизация производительности, которую я нашел для статических веб-сайтов без серверной части.

Ваша причина смены темы

  • быстрее и меньше,
  • Улучшить некоторые взаимодействия и внешний вид оригинальной темы, которые я испытал за один год использования, например, удалить функцию обмена, удалить функцию подсказки, добавить навигацию по каталогу статей для мобильных устройств и т. д.
  • Проще настроить, темы и плагины vuepress очень гибкие, если вы знаете Vue, вы можете использовать соответствующие знания для изменения исходной темы, которая похожа на страницы и приложения, которые вы обычно пишете на работе.
  • Полнотекстовый поиск локальных данных
  • Примите vue, а затем наслаждайтесь его экологией, такой как библиотека компонентов, эта тема использует элемент пользовательского интерфейса.
  • Наслаждайтесь расширениями Markdown vuepress, такими как использование Vue в Markdown, пользовательские сводки статей
  • Очень хорошее SEO в теории
  • Совместим с файлами markdwon, написанными в исходной теме hexo, и может быть перенесен в эту тему без изменений, при условии, что ваш исходный файл соответствует правилам исходной темы, например включает переднюю подложку YAML в верхней части файла.
---
title: 【读书笔记】《JavaScript权威指南》第7章数组
date: 2018-11-08 04:10:03
tags: [读书笔记, 《JavaScript权威指南》]
---
  • Он был опубликован в npm, вам нужно только его загрузить.Он также предоставляет файловую структуру шаблона, которую можно использовать сразу после загрузки зависимостей.Он также предоставляет файлы оболочки для связанных операций.Просто дважды щелкните, и вы можете получить свой собственный блог за несколько минут.
  • Встроенная функция комментариев
  • ......

Совместимость с браузером

Поскольку блог предназначен для технического персонала, эта тема корректно протестирована только в последних версиях Google Chrome и Firefox.

Vuepress по умолчанию компилирует некоторую совместимость со старыми браузерами, см. его для конкретного контроля.Официальная конфигурация сайта

Я написал очень подробный документ, поторопитесь и испытайте егоvuepress-theme-indigo-materialНу, если тебе хорошо, можешь дать мне звезду?

адрес гитхаба:GitHub.com/cured my/v UE P…

Категории