У меня сейчас был личный блог. Я написал несколько постов там, но это было далеко не идеально. Он был построен с использованием базовых HTML, CSS и JS. Я видел все это удивительные сайты с уникальными дизайнами, и я подумал, почему бы не создать свой собственный?
Я пошел с интерфейсом для заднего подхода, что означает, что задний конец должен быть надежным для того, чтобы контент был нагружен правильно и быстро.
Я построил свой API с помощью Fastapi для Python и WebApp с помощью Vuejs.
Структурирование API.
Я заложил конечные точки, которые могут потребоваться для того, чтобы вести блог работать должным образом.
Вот некоторые из них
- .
- /подписываться: Разрешить пост, удалить, где только пост будет публично.
- /Связанный: Разрешить добраться до соответствующих сообщений на сообщение.
Для базы данных я пошел с MongoDB. Таким образом, идея состоит в том, чтобы сохранить посты как усадьбу в базе данных и позволить API доступа к нему. Frestend затем просто сделает запрос и получает все данные из API.
Реализация API.
Мне потребовалось несколько дней, чтобы получить API. Fastapi был очень полезен с их документами Openapi, чтобы обеспечить хороший интерфейс, чтобы проверить API без использования Curl Отказ
Сообщения и конечная точка подписки довольно явно объясняют, вот как я создал связанную конечную точку.
Поиск должностей, связанных с постом
Поскольку все посты будут теги, связанные с ними, я использовал те, кто рассчитывает счет для поста.
/Связанный/ Конечная точка была структурирована, чтобы пройти post_id Это скажет нам, какой пост рассмотреть корневой пост. Как только у нас есть этот пост, мы можем получить все другие посты и рассчитать связанную с балла.
Этот счет рассчитывается следующим образом
# Consider root_tags are tags of the source post
# other_tags are the tags of the other post that.
def calculate(root_tags: List, other_tags: List) -> int:
# Remove duplicate tags if present
root_tags = set(root_tags)
other_tags = set(other_tags)
# Calculate the score now
score = len(root_tags.intersection(other_tags)) / len(root_tags)
return score
Приведенный выше код делает следующее:
- Пересекают корневые теги с другими метками, установленными нам общие теги
- Оценка – это разделение количества меток, распространенных между двумя постами и общее количество тегов, присутствующих в фактическом посте.
Таким образом, мы получаем счет, который будет от 0 до 1. После того, как у нас есть этот счет, мы можем отсортировать посты, основанные на результате, а посты, которые имеют более высокий балл, более связаны с постом по сравнению с другими сообщениями.
WebApp построен с использованием Vuejs. Вся идея Frontend для Backend подход – это интерфейс будет зависеть от бэкэнда для данных.
Стимулировать приложение
Перед созданием приложения я прошел несколько очков, что приложение должно быть в состоянии сделать
- У него должна быть домашняя страница, которая покажет пользователей всех доступных постов
- Это должно быть в состоянии показать каждый пост
- Это должно быть быстро
- Он должен быть в состоянии загружать сообщения непосредственно через маршрут (например:
Blog.com/nanaдолжен загрузить постNanaИ не только WebApp, который размещается наblog.comНесомненно
Первая часть довольно проста. Я только что использовал /посты Маршрут для того, чтобы получить все сообщения, а затем отобразит их в хорошем смысле.
Рендеринг поста динамически
Вот поток того, как пост оказывается
- Если пользователь нажимает на сообщение с домашней страницы, содержимое поста передается на маршрутизатор и соответственно отображается на представлении поста.
- Если сообщение открывается с использованием маршрута, маршрут используется для поиска поста и соответственно, содержимое отображается.
Выше приведено в основном, делает две вещи:
- Сделает скорость нагрузки быстрее, если пользователь открывает сообщение с домашней страницы
- Добавляет возможность загрузить сообщение с помощью маршрута.
Чтобы пройти содержимое поста по маршруту, используйте проверку маршрута для передачи объекта, который будет проводить содержимое. В представлении поста проверьте, доступна ли этот объект или нет, если не использовать маршрут, чтобы сделать запрос и получить контент.
А как насчет SEO?
Ну да, я знаю, что SEO важно. Для загрузки мета-тегов я использовал Vue-Head который отображает метки динамически после того, как пост загружен с помощью API.
Это довольно важно, так как метаги Meta используются всеми ботами, ползающими страницу. Кроме того, Google Bots теперь могут подделать динамически оказанные контент, что означает, что он не должен быть проблемой, если теги загружаются динамически с помощью JS.
Кроме распространного возникновения ошибок, у меня не было никаких проблем со спиной. Однако была одна проблема, которая заставила меня под сомнение всей идеей. Как боты, которые не имеют возможности для ползания динамически отображаются контент, ползут страницу.
Например, Twitter Bots ползет на страницу, чтобы показать хороший вид карты. Если боты не могут заползть страницу, то карта не будет там. Не только Twitter, подобная функциональность используется различными другими социальными долями, как те, что из Facebook и LinkedIn.
Как позволить ботам ползать страницу
Ну, так как я решил эту проблему? Сначала я, очевидно, подумал, что это будет неизбежно, потому что нет, боты не смогут обнаружить динамически оказанные контент. Одним из решений было пойти с рендерингом бокового сервера Но мне лучше не погрузиться на эту дорогу.
Таким образом, решение, с которым я пошел, должен был написать статический файловый сервер в Python.
Какой бы наш сервер сделать?
- Он должен быть в состоянии вернуть статические HTML, JS, CSS-файлы.
- Он должен быть в состоянии вернуть оказанный HTML только с мета-тегами, если запрос сделан ботом.
Я построил сервер, используя колбу для Python. Он обнаруживает приводящее средство, излучающую, используя Пользовательский агент Заголовок пропускается и соответственно возвращает HTML. Если запрос производится ботом, он возвращает некоторые HTML-контент, который имеет META, представляющую пост.
Остальное возвращает правильные статические файлы.
Вы можете прочитать об этом здесь
Вы можете проверить мой блог здесь
Этот пост также опубликован в моем личный блог
Оригинал: “https://dev.to/deepjyoti30/i-created-my-own-blog-management-system-here-s-how-i-did-it-jo5”