Данный проект поможет вам вести блог в современном стиле на статических хостингах. Я сделал его с целью облегчить себе жизнь, что бы в ручную не редактировать html файлы и заниматься прочей волокитой.
-------------------------------------------------------------------------------------------------
Его функции:
1.Написание статей
2.Форматирование текста
3.Удаление постов
4.Редактирование статей
5.Добавление изображений
6.Добавление видео
-------------------------------------------------------------------------------------------------
Как он работает:
В корневой папке есть файл Index.php, это и есть редактор блога, все что вы в нем делайте сохраняется в файл blog.html, который после всех нужных действий связанных с блогом можно с чистой душой перекидывать на ваш сайт . Фотографии которые вы вкладывайте в блог сохраняются в папку uploads, из которой уже blog.html подтягивает изображения. Соответственно папку uploads тоже надо перекидывать на хостинг, что бы blog.html мог загрузить из нее фотографии.
-------------------------------------------------------------------------------------------------
Структура blog.html
Код: Выделить всё
<!DOCTYPE html>
<html>
<head>
<title>Мой блог</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.post {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
}
.post h2 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
.content {
line-height: 1.6;
margin: 15px 0;
white-space: pre-line; /* Сохраняем форматирование текста */
}
.content h2 {
font-size: 1.5em;
margin: 1em 0 0.5em 0;
border-bottom: none;
}
.content ul {
margin: 1em 0;
padding-left: 2em;
}
.content li {
margin: 0.5em 0;
}
.content a {
color: #0066cc;
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content br {
display: block;
margin: 0.5em 0;
}
.date {
color: #666;
font-size: 0.9em;
margin-top: 15px;
border-top: 1px solid #eee;
padding-top: 10px;
}
.blog-image {
max-width: 100%;
height: auto;
margin: 15px 0;
display: block;
}
.content img {
max-width: 100%;
height: auto;
margin: 15px 0;
display: block;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>Мой блог</h1>
<main>
</main>
</body>
</html>-------------------------------------------------------------------------------------------------
ВАЖНОЕ УТОЧНЕНИЕ!
Что бы запустить этот проект у себя на пк, нужен веб сервер с php.
viewtopic.php?t=99
-------------------------------------------------------------------------------------------------
Изображения:
Меню со всеми статьями:
Пример страницы с заполнением блога можно посмотреть по этой странице:
https://ftod.w10.site/blog/blog.html
-------------------------------------------------------------------------------------------------
ОБНОВЛЕНИЕ VER 2.0
-------------------------------------------------------------------------------------------------
Что было добавлено:
-
Было изменено:
1.8:
Исправлен баг с пропажей тегов после редактирования статьи
1.9:
Исправленно отображение некторых кнопок
2.0:
Добавленно форматирование по центру и правому краю
-------------------------------------------------------------------------------------------------
Загрузить этот редактор блога можно по ссылке ниже:
[ver 2.0]https://ftod.w10.site/downloads/ver2.0.zip [Beta] [Больше функций]
[ver 1.0]https://ftod.w10.site/downloads/project.zip [Stable]
-------------------------------------------------------------------------------------------------
Все вопросы можно задать ниже этого поста
Так же можете отправлять баг репорты ниже поста, помечая его огоньком
-------------------------------------------------------------------------------------------------
.