Персональный блог 2.0 FE

внешний интерфейс React.js

Introduction

ссылка на онлайн-блог

Внешний интерфейс GitHub

Это второй сайт блога, который я написал. Первая версия была завершена в марте этого года, загрузка + Django используется.После завершения переноса данных второй версии исходный код первой версии будет открыт.Что касается того, почему я написал второе издание, так это потому, что я хочу выразить еще много вещей, которые не были представлены в первом издании.

Версия 2.0 — это проект, который разделяет переднюю и заднюю части на основе React + Node.Поскольку Django использовался в первой версии, Django Admin используется непосредственно в фоновом режиме, но на этот раз вам нужно создать фон самостоятельно.

Я не буду публиковать здесь онлайн-версию системы управления фоном, потому что исходный код версии 2.0 полностью открыт, поэтому сразу переходите кСистема фонового управления GitHubВот и все, а демо-версия будет выложена позже.

Поговорим об основном стеке технологий всего терминала:

  • Основной стек фронтенд-технологий — это семейство React Bucket + Mobx;
  • Фон управления использует ведро семейства React + mobx + Google reCAPTCHA + Ant Design;
  • Бэкэнд — это Express + Mongo + JWT + Ali OSS + Google reCAPTCHA + request promise.

В конце концов используется eslint Airbnb, а также некоторые сторонние плагины с открытым исходным кодом, такие как CSS Module, Webp, SVG Sprite и т. д.

Module

  • Глобальный
    • игрок
    • Все станции выделены серым цветом (в дни траура)
    • header
    • footer
  • Дома
    • Переключаемая полноэкранная карта покрытия
    • Девиз (Девиз)
    • Анонс (будут опубликованы некоторые новые новости)
    • Project (показать последние три проекта с открытым исходным кодом, ссылка указывает на GitHub)
    • Последние десять статейСводка
  • страница блога
    • Резюме статьи (постраничная загрузка, 10 страниц в статье)
    • Tags
    • 7 статей с самым высоким PV.
    • Поиск по названию
  • Страница сведений о блоге
    • заглавие
    • Время публикации (наведение показывает время последнего изменения)
    • Аффилированные теги
    • текст
    • Toc
    • подобно
    • поделиться в твиттере
    • Комментарий
    • Предыдущая статьяСледующая статьяПрыжок
  • Архивная страница
    • Показать архивы всех статей
  • музыкальная страница
    • Live Tours (концерты, на которые я лично ходил, живые фотографии, сделанные в разрешенное для фотосъемки время, представлены в виде карусели)
    • Последние четыре статьи о музыке
    • Избранные записи (личные любимые записи, адрес покупки не связан с рекламой)
    • Yancey Music (мое хобби - музыка, вот некоторые личные работы)
  • Страница резюме
    • Личный профиль
    • рабочий стаж
    • Опыт проекта
  • Страница приложения
    • Версии для Wap, iOS, Android и Mac будут позже, но они еще не реализованы.
  • О странице
    • Поставлю некоторые памятные вещи о текущей редакции сайта
  • Страница политики конфиденциальности
    • Это бесполезно, для целостности блога

Detail

Global Component

Все это не что иное, как стандартный заголовок, нижний колонтитул, индикатор выполнения прокрутки и, конечно же, компонент музыкального проигрывателя.

Кроме того, я также написал бэкэндglonalConfigИнтерфейс, временно подумайте только об одной функции, то есть для управления внешним интерфейсом.filter: grayscale(100%);Атрибут, при использовании в некоторые траурные дни эта кнопка будет включена в фоновом режиме.

Home Page

Cover
Home

Главная страница разделена на 5 разделов:

  • Background
  • Motto
  • Announcement
  • The Latest 3 Projects
  • The Latest 10 Articles

Background

Давайте сначала поговорим о фоновом изображении.В фоновом режиме есть несколько фоновых изображений, поэтому фоновые изображения можно переключать левой и правой кнопками. И идентификатор текущего фонового изображения будет сохранен в localStorage, поэтому, пока localStorage не будет очищен, текущее фоновое изображение будет открыто в следующий раз.

Конечно, если у localStorage нет соответствующего идентификатора или изображение удалено мной в фоновом режиме, оно вернет последнее опубликованное изображение.

На самом деле, я также установил кнопку отображения и скрытия изображения в фоновом режиме.Когда id определенного изображения находится в localStorage, но оно скрыто мной в фоновом режиме, оно также будет возвращать последнее выпущенное изображение.

Motto

Часть девиза соответствует части на первом изображении выше.

死は生の対極としてではなく、その一部として存在している

То же самое, чтобы запросить внутренний интерфейс, чтобы получить последний девиз.

ps: Предложение выше взято из "ノルウェイの森" ("Норвежский лес").

Announcement

Как и в случае с девизом, цель состоит в том, чтобы опубликовать последние новости.

The Latest 3 Projects

Это используется, чтобы показать мои последние три проекта с открытым исходным кодом, URL-адрес будет подключаться к соответствующему GitHub.

The Latest 10 Articles

Одна из основных частей всего блога, сводной модуль последних 10 статей, будет отображаться на главной странице, где показано время публикации, заголовок, объем PV, лайки, теги, резюме, показать больше, нажмите на картинку , заголовок или показать больше. Перейдите на страницу сведений о статье.

Blog Page

Blog

Слева — последние десять сводок, а ниже — внутренний пейджер, справа — коллекция тегов статьи, а ниже — 7 статей с самым высоким PV (дизайн, который всем известен, дизайн Чжиху).

Кроме того, на самом деле существуетпоисккнопку, нажмите на нее, и это выглядит так:

Blog

Правильно, милая Хатсуне Мику, набрав в поисковике смутное совпадение с названием статьи. Конечно, первая версия не так хороша, как первая версия.В первой версии используется поисковая система whoosh+jieba, и эффект теоретически лучше, чем у этой версии.

Blog Detail Page

Blog Detail

На самом деле на странице сведений о блоге много мест, и одно изображение не может поместиться:

  • Из вышеперечисленного это обложка заголовка, заголовок, время выпуска (наведение мыши показывает время последней модификации), теги и т. д.;

  • Изображения в текстовой части можно щелкнуть, чтобы увеличить, чтобы создать эффект ручной карусели;

  • Часть кода использует highlight.js

  • Нажмите на заголовок кода, который является частью имитации кнопки Mac, и блок кода также будет увеличен на весь экран.

  • справа - ток

  • Внизу есть лайки и твиттер (я боюсь делать SSR в этом месте, т.к. Twitter Card должна получить актуальную метаинформацию, если она сгенерирована JS, например с использованием react-helmet, она не будет распознана)

  • Затем я использовал плагин комментариев Livere.

  • Наконец, есть ненавистный текст копии с информацией об авторских правах:

      不知道大家看到一个小细节没，打开Chrome开发者工具，选择查看元素，将鼠标移动到html页面，发现浏览器自动给栅格标上了虚线，看下图。

  Article Name: Grid
  Article URL: https://blog.yanceyleo.com/p/5bc202a26b48dfee0a0dcedf
  License: Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)

На более позднем этапе эта страница действительно будет преобразована в SSR, за исключением проблемы Twitter Card, потому что текущий текст использует опасно SetInnerHTML, и эта часть не может быть загружена лениво.

Archive Page

Blog Detail

В этой части показан архив, ведь я давно не писал бэкенд, и написание SQL для агрегации и группировки заняло какое-то время.

Нажатие на кружок большего размера покажет/скроет архивную информацию за определенный месяц.По умолчанию будет отображаться архивная информация за последний месяц.Кнопка справа позволяет отобразить все и закрыть все.

Music Page

Мое хобби — создавать музыку, поэтому в Блоге не будет недостатка в музыкальном модуле.

Music-1

Music-2

Верхний левый угол первого снимка - это карусельное изображение Live, которое я видел.Конечно, снимки должны быть сделаны во время фотосъемки;

Справа - музыкальные ноты, которые на самом делеarticles?tag=Music, а затем взять последние четыре статьи.Конечно, данные не были перенесены, поэтому я просто нашел статью и добавил тег Музыка;

На второй картинке некоторые записи, которые мне нравятся.По поводу адреса покупки, коммерческого использования нет.Вообще ссылка от Nichia или cdjapan;

Ниже приведены некоторые из моих небольших работ, ссылка указывает на SoundCloud (необходим fq)

Apps Page

Apps

Я еще не сделал этого, но я планирую написать Wap-версию позже (1.0 адаптивная, на этот раз я хочу разделить Wap); использовать NR для написания iOS и Andriod; использовать Electron для написания версии для Mac, в конце концов , используйте Nav Bar The MBP, все же хотелось сделать что-то интересное из этого места.

CV Page

Здесь нет изображения.Резюме разделено на три части, все взяты из бэкенда:

  • Основная информация
  • рабочий стаж
  • Опыт проекта

About

About

Страница «О программе» также вынесена из бэкенда и используется для записи памятных вещей о разработке блога (по оценкам, это процесс модификации ошибок).

Privacy Policy

Существует веб-сайт, который может создать политику конфиденциальности, хотя это бесполезно, но, поскольку вы хотите создать этот блог, вам следует его усовершенствовать. Типографика заимствована из стиля Политики конфиденциальности Paypal.

наконец

Поскольку в последнее время я занят поиском работы, перенос статей и написание документов на английском языке будут осуществлены после этого периода времени.Если есть хорошая возможность, пожалуйста, свяжитесь со мной~

Выше よろしく.

Категории