clear cache

blog/admin.py

@@ -0,0 +1,6 @@
+from django.contrib import admin
+
+from blog.models import Article as ArticleModel
+
+
+admin.site.register(ArticleModel)

blog/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class BlogConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'blog'

blog/migrations/0001_initial.py

@@ -0,0 +1,26 @@
+# Generated by Django 3.2 on 2023-01-11 17:00
+
+import ckeditor.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Article',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=120)),
+                ('thumbnail', models.ImageField(upload_to='')),
+                ('discription', models.CharField(max_length=355)),
+                ('body', ckeditor.fields.RichTextField()),
+                ('date', models.DateTimeField()),
+            ],
+        ),
+    ]

blog/migrations/0002_article_slug.py

@@ -0,0 +1,19 @@
+# Generated by Django 3.2 on 2023-01-18 14:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='article',
+            name='slug',
+            field=models.SlugField(default='slug-article', max_length=200),
+            preserve_default=False,
+        ),
+    ]

blog/models.py

@@ -0,0 +1,14 @@
+from django.db import models
+from ckeditor.fields import RichTextField
+
+class Article(models.Model):
+    slug = models.SlugField(max_length=200)
+    title = models.CharField(max_length=120)
+    thumbnail = models.ImageField()
+    discription = models.CharField(max_length=355)
+    body = RichTextField()
+    date = models.DateTimeField()
+
+    def __str__(self):
+        return self.title
+

blog/sitemaps.py

@@ -0,0 +1,18 @@
+from django.contrib.sitemaps import Sitemap
+
+from blog.models import Article as ArticleModel
+
+
+class ArticleSitemeps(Sitemap):
+    changefreq = 'daily'
+    priority = 0.8
+    protocol = 'https'
+
+    def items(self):
+        return ArticleModel.objects.all()
+
+    def lastmod(self, obj):
+        return obj.date
+
+    def location(self, obj):
+        return f"blog/detail/{obj.slug}"

blog/static/css/blog.css

@@ -0,0 +1,129 @@
+#blog-list {
+  margin-top: 100px;
+  min-height: 20vh;
+}
+#blog-list .item {
+  margin-bottom: 15px;
+  display: flex;
+}
+@media only screen and (max-width: 597px) {
+  #blog-list .item {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+#blog-list .item .item__image {
+  margin: 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  max-width: 25%;
+  min-width: 25%;
+  max-height: 250px;
+}
+@media only screen and (max-width: 597px) {
+  #blog-list .item .item__image {
+    max-width: 100%;
+    min-width: 50%;
+    max-height: 500px;
+  }
+}
+#blog-list .item .item__image img {
+  width: 100%;
+  height: auto;
+  display: inline-block;
+  transition: all 300ms;
+}
+#blog-list .item .item__text-content {
+  width: 100%;
+}
+#blog-list .item .item__text-content .item__title h4 {
+  font-size: 24px;
+  letter-spacing: 1px;
+  font-weight: 600;
+}
+#blog-list .item .item__text-content .item__title h4 a {
+  margin: 10px;
+  color: #1d1d1d;
+}
+#blog-list .item .item__text-content .item__title h4 a:hover {
+  color: #155bd5;
+}
+#blog-list .item .item__text-content .item__discription {
+  margin: 10px;
+}
+#blog-list .item .item__text-content .item__discription p {
+  color: #6d6d6d;
+}
+#blog-list .item:hover .item__image img {
+  transform: scale(1.1) rotate(1deg);
+}
+#blog-list .pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 100px;
+  margin-bottom: 50px;
+}
+#blog-list .pagination ul li {
+  margin: 1px;
+}
+#blog-list .pagination ul li a, #blog-list .pagination ul li span {
+  border-radius: 3px;
+  padding: 8px 13px;
+  color: #6d6d6d;
+  transition: all 0.3s ease;
+  font-size: 17px;
+}
+#blog-list .pagination ul li a:hover, #blog-list .pagination ul li span:hover {
+  background-color: #155bd5;
+  color: #ffffff;
+}
+
+#blog-detail {
+  margin-top: 100px;
+  min-height: 20vh;
+  margin-bottom: 100px;
+}
+#blog-detail .flexbox {
+  display: flex;
+  justify-content: center;
+}
+#blog-detail .flexbox .article {
+  width: 668px;
+  max-width: 100%;
+  margin: 10px;
+}
+#blog-detail .flexbox .article img {
+  border-radius: 8px;
+  width: 100%;
+  max-width: 668px;
+  height: auto;
+  margin: 15px auto;
+}
+#blog-detail .flexbox .article a {
+  color: #155bd5;
+  display: inline-block;
+}
+#blog-detail .flexbox .article .article__title h4 {
+  font-size: 28px;
+  letter-spacing: 1px;
+  font-weight: 600;
+  color: #1d1d1d;
+  margin-bottom: 25px;
+}
+#blog-detail .flexbox .article .article__discription {
+  color: #6d6d6d;
+  line-height: 1.6;
+  font-size: 17px;
+}
+#blog-detail .flexbox .article .article__body {
+  color: #6d6d6d;
+  line-height: 1.6;
+  font-size: 17px;
+}
+#blog-detail .flexbox .article .article__body pre {
+  overflow-x: auto;
+  border-radius: 8px;
+  margin: 10px 0;
+  padding: 15px;
+  background-color: #d7d7d7;
+}

blog/static/css/scss/_mixin.scss

@@ -0,0 +1,23 @@
+@mixin very_large_responsive {
+    @media only screen and (max-width: $very_large_size) {
+        @content;
+    }
+}
+
+@mixin large_responsive {
+    @media only screen and (max-width: $large_size) {
+        @content;
+    }
+}
+
+@mixin medium_responsive {
+    @media only screen and (max-width: $medium_size) {
+        @content;
+    }
+}
+
+@mixin small_responsive {
+    @media only screen and (max-width: $small_size) {
+        @content;
+    }
+}

blog/static/css/scss/_variables.scss

@@ -0,0 +1,30 @@
+$primary_color: #155bd5;
+$primary_dark_color: #1c3ab6;
+$white_color: #ffffff;
+$white_color_2: #fafafa;
+$white_color_3: #efefef;
+$white_color_4: #d7d7d7;
+$dark_color: #2d2d2d;
+$dark_color_2: #6d6d6d;
+$dark_color_3: #1d1d1d;
+$dark_color_4: #e0e0e0;
+$black_1: #000000;
+
+$font-family: 'Inter', sans-serif;
+
+// sizes for responsive
+$very_large_size : 1200px;
+$large_size : 992px;
+$medium_size : 768px;
+$small_size : 597px;
+
+
+$box-shadow-1: 0px 2px 4px rgba(40, 41, 61, 0.04),
+    0px 8px 16px rgba(96, 97, 112, 0.16);
+
+$box-shadow-2: 0px 0px 1px rgba(40, 41, 61, 0.04),
+    0px 2px 4px rgba(96, 97, 112, 0.16);
+
+
+$box-shadow-3: 0px 4px 4px 4px rgb(79 81 122 / 30%),
+    0px 2px 8px 2px rgb(133 134 155 / 56%);

blog/static/css/scss/blog.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'sections/blog_list';
+@import 'sections/blog_detail';

blog/static/css/scss/sections/_blog_detail.scss

@@ -0,0 +1,51 @@
+#blog-detail {
+    margin-top: 100px;
+    min-height: 20vh;
+    margin-bottom: 100px;
+    .flexbox {
+        display: flex;
+        justify-content: center;
+        .article {
+            width: 668px;
+            max-width: 100%;
+            margin: 10px;
+            img {
+                border-radius: 8px;
+                width: 100%;
+                max-width: 668px;
+                height: auto;
+                margin: 15px auto;
+            }
+            a {
+                color: $primary_color;
+                display: inline-block;
+            }
+            .article__title {
+                h4 {
+                    font-size: 28px;
+                    letter-spacing: 1px;
+                    font-weight: 600;
+                    color: $dark_color_3;
+                    margin-bottom: 25px;
+                }
+            }
+            .article__discription {
+                color: $dark_color_2;
+                line-height: 1.6;
+                font-size: 17px;
+            }
+            .article__body {
+                color: $dark_color_2;
+                line-height: 1.6;
+                font-size: 17px;
+                pre {
+                    overflow-x: auto;
+                    border-radius: 8px;
+                    margin: 10px 0;
+                    padding: 15px;
+                    background-color: $white_color_4;
+                }
+            }
+        }
+    }
+}