Add example

Author: robert197

cms/cms/templates/base.html

@@ -32,12 +32,12 @@
         {% block content %}{% endblock %}
 
         {# Global javascript #}
+        {% render_bundle 'main' %}
         <script type="text/javascript" src="{% static 'js/cms.js' %}"></script>
 
         {% block extra_js %}
             {# Override this in templates to add extra javascript #}
         {% endblock %}
 
-        {% render_bundle 'main' %}
     </body>
 </html>

cms/db.sqlite3

@@ -0,0 +1,19 @@
+# Generated by Django 2.2.15 on 2020-08-30 13:29
+
+from django.db import migrations
+import wagtail.core.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0002_create_homepage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.core.fields.RichTextField(blank=True),
+        ),
+    ]

cms/home/migrations/0003_homepage_body.py

@@ -0,0 +1,21 @@
+# Generated by Django 2.2.15 on 2020-08-30 13:38
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0003_homepage_body'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.CharBlock(classname='full title')), ('paragraph', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]),
+        ),
+    ]

cms/home/migrations/0004_auto_20200830_1338.py

@@ -1,7 +1,20 @@
 from django.db import models
 
+from wagtail.core import blocks
 from wagtail.core.models import Page
+from wagtail.core.fields import RichTextField, StreamField
+from wagtail.admin.edit_handlers import FieldPanel
+from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
+from wagtail.images.blocks import ImageChooserBlock
 
 
 class HomePage(Page):
-    pass
+    body = StreamField([
+        ('heading', blocks.CharBlock(classname="full title")),
+        ('paragraph', blocks.RichTextBlock()),
+        ('image', ImageChooserBlock()),
+    ])
+
+    content_panels = Page.content_panels + [
+        StreamFieldPanel('body', classname="full"),
+    ]

cms/home/models.py

@@ -1,10 +1,12 @@
 {% extends "base.html" %}
 {% load static %}
+{% load wagtailcore_tags %}
 
 {% block body_class %}template-homepage{% endblock %}
 
 {% block extra_css %}
 
+
 {% comment %}
 Delete the line below if you're just getting started and want to remove the welcome screen!
 {% endcomment %}
@@ -13,9 +15,23 @@
 
 {% block content %}
 
-{% comment %}
-Delete the line below if you're just getting started and want to remove the welcome screen!
-{% endcomment %}
-{% include 'home/welcome_page.html' %}
+<div>
+    <div id="vue-count-button"></div>
+    <div id="vue-sidebar"></div>
+</div>
+<article>
+    {% for block in page.body %}
+        {% if block.block_type == 'heading' %}
+            {{ block.value|json_script:'header_title'}}
+            {{ block.value|json_script:'header_title2'}}
+            <h1>{{ block.value }}</h1>
+        {% endif %}
+        {% if block.block_type == 'paragraph' %}
+            <p>{{ block.value }}</p>
+        {% endif %}
+
+    {% endfor %}
+</article>
+
 
 {% endblock content %}

cms/home/templates/home/home_page.html

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h2>This is a Vue 3 component!!</h2>
+    <button @click="increase">Clicked {{ count }} times.</button>
+  </div>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { get } from '../utils/django-variables';
+
+export default {
+  setup() {
+    const djangoVariables = get('header_title', 'header_title2');
+    console.log(djangoVariables);
+
+    const count = ref(0);
+    const increase = () => {
+      count.value++;
+    };
+
+    return {
+      count,
+      increase
+    };
+  }
+};
+</script>

cms/home/templates/home/welcome_page.html

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h3>Sidebar</h3>
+
+    <input type="text" v-model="search.text" />
+    <p>{{ search.text }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, reactive } from 'vue';
+export default {
+  setup() {
+    const search = reactive({
+      text: 'abc'
+    });
+    return {
+      search
+    };
+  }
+};
+</script>
+