Add slides for fragment caching
This commit is contained in:
parent
90a7b360ec
commit
89cc1a7509
GPG key ID:
57AFB45680EDD477
4 changed files with 265 additions and 6 deletions
BIN
public/website-homepage.png
Normal file
BIN
public/website-homepage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
public/website-posts.png
Normal file
BIN
public/website-posts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 676 KiB |
BIN
public/website-search.png
Normal file
BIN
public/website-search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
271
slides.md
271
slides.md
|
|
@ -3,6 +3,7 @@ title: Wagtail & Caching
|
|||
class: text-center
|
||||
highlighter: shiki
|
||||
transition: slide-left
|
||||
monaco: false
|
||||
mdc: true
|
||||
themeConfig:
|
||||
primary: '#2e1f5e'
|
||||
|
|
@ -40,17 +41,275 @@ layout: cover
|
|||
layout: center
|
||||
---
|
||||
|
||||
# Importance of caching
|
||||
|
||||
---
|
||||
layout: cover
|
||||
background: https://cdn.jsdelivr.net/gh/wagtail/wagtail@main/.github/wagtail-screenshot-with-browser.png
|
||||
---
|
||||
# Scale
|
||||
|
||||
# Wagtail is a Content Management System
|
||||
<style>
|
||||
@keyframes grow {
|
||||
from {
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
font-size: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
animation-name: grow;
|
||||
animation-duration: 30s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
---
|
||||
layout: cover
|
||||
---
|
||||
|
||||
# <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em>
|
||||
|
||||
---
|
||||
layout: section
|
||||
---
|
||||
|
||||
## 1:
|
||||
# Template Fragment Caching
|
||||
|
||||
---
|
||||
layout: image
|
||||
image: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png
|
||||
backgroundSize: cover
|
||||
---
|
||||
|
||||
<style>
|
||||
.slidev-layout {
|
||||
background-position: top center !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
layout: none
|
||||
---
|
||||
|
||||
```html
|
||||
<div class="one-half--medium one-third--large">
|
||||
<div class="card card--link">
|
||||
<a href="/developers/springload/made-wagtail/" class="project-image">
|
||||
<img src="https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.52.2e16d0ba.fill-680x564.png" alt="" title="">
|
||||
</a>
|
||||
<div class="project__links">
|
||||
<a class="project__info" href="/developers/springload/made-wagtail/">
|
||||
<span class="u-sr-only">Project info</span>
|
||||
<svg class="i i--grey i--hover">
|
||||
<use xlink:href="#i-info"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="project__visit" href="http://madewithwagtail.org/" title="Project link" data-analytics="Project|Link click">
|
||||
<span class="u-sr-only">Project link</span>
|
||||
<svg class="i i--grey i--hover">
|
||||
<use xlink:href="#i-visit"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="project-title">
|
||||
Made with Wagtail
|
||||
</h4>
|
||||
<p class="project-author">
|
||||
<a href="/developers/springload/" title="View the company page of Springload">
|
||||
Springload
|
||||
</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
<style>
|
||||
.slidev-page, .slidev-code-wrapper, .slidev-code {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
---
|
||||
layout: cover
|
||||
background: /website-homepage.png
|
||||
---
|
||||
|
||||
# An example
|
||||
|
||||
---
|
||||
layout: image
|
||||
image: /website-posts.png
|
||||
---
|
||||
|
||||
---
|
||||
layout: none
|
||||
---
|
||||
|
||||
````md magic-move
|
||||
```html
|
||||
{% load wagtailcore_tags util_tags %}
|
||||
|
||||
<article class="media listing-item">
|
||||
<div class="columns">
|
||||
<figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
|
||||
{% if page.list_image_url %}
|
||||
<a href="{% pageurl page %}" class="image" title="{{ page.title }}">
|
||||
<img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
|
||||
</a>
|
||||
{% endif %}
|
||||
</figure>
|
||||
<div class="media-content column">
|
||||
<div>
|
||||
{% if breadcrumbs %}
|
||||
{% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
|
||||
{% endif %}
|
||||
<h2 class="title is-3">
|
||||
<a href="{% pageurl page %}">{{ page.title }}</a>
|
||||
</h2>
|
||||
{% include "common/content-details.html" %}
|
||||
<p>{{ page.summary }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
|
||||
```html {all|1|3,27|4-26|all}
|
||||
{% load wagtailcore_tags wagtail_cache util_tags %}
|
||||
|
||||
{% wagtailpagecache FRAGMENT_CACHE_TTL "listing-item" breadcrumbs show_listing_images %}
|
||||
<article class="media listing-item">
|
||||
<div class="columns">
|
||||
<figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
|
||||
{% if page.list_image_url %}
|
||||
<a href="{% pageurl page %}" class="image" title="{{ page.title }}">
|
||||
<img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
|
||||
</a>
|
||||
{% endif %}
|
||||
</figure>
|
||||
<div class="media-content column">
|
||||
<div>
|
||||
{% if breadcrumbs %}
|
||||
{% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
|
||||
{% endif %}
|
||||
<h2 class="title is-3">
|
||||
<a href="{% pageurl page %}">{{ page.title }}</a>
|
||||
</h2>
|
||||
{% include "common/content-details.html" %}
|
||||
<p>{{ page.summary }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endwagtailpagecache %}
|
||||
```
|
||||
````
|
||||
|
||||
<style>
|
||||
.slidev-page, .slidev-code-wrapper, .slidev-code {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
---
|
||||
layout: cover
|
||||
background: /website-search.png
|
||||
---
|
||||
|
||||
# Duplication
|
||||
|
||||
---
|
||||
layout: center
|
||||
---
|
||||
|
||||
```html {3}
|
||||
<section class="container">
|
||||
{% for page in listing_pages %}
|
||||
{% include "common/listing-item.html" %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
```
|
||||
|
||||
<style>
|
||||
code {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
layout: image
|
||||
image: /website-search.png
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
# Cache invalidation
|
||||
|
||||
<v-click>
|
||||
|
||||
```python
|
||||
>>> BlogPostPage.objects.first().cache_key
|
||||
```
|
||||
|
||||
</v-click>
|
||||
|
||||
<v-click>
|
||||
|
||||
```python
|
||||
@property
|
||||
def cache_key(self) -> str:
|
||||
"""
|
||||
A generic cache key to identify a page in its current state.
|
||||
Should the page change, so will the key.
|
||||
|
||||
Customizations to the cache key should be made in :attr:`get_cache_key_components`.
|
||||
"""
|
||||
...
|
||||
```
|
||||
|
||||
</v-click>
|
||||
|
||||
<style>
|
||||
code {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
layout: center
|
||||
---
|
||||
|
||||
# What about Django?
|
||||
|
||||
```jinja
|
||||
{% load cache %}
|
||||
{% cache 500 sidebar request.user.username %}
|
||||
.. sidebar for logged in user ..
|
||||
{% endcache %}
|
||||
```
|
||||
<Transform :scale="1.4">
|
||||
<v-clicks>
|
||||
|
||||
- Current page
|
||||
- Current site
|
||||
- Preview
|
||||
- Cache invalidation
|
||||
|
||||
</v-clicks>
|
||||
</Transform>
|
||||
|
||||
<style>
|
||||
code {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
layout: section
|
||||
---
|
||||
|
||||
## 2:
|
||||
# Frontend Caching
|
||||
|
|
|
|||
Loading…
Reference in a new issue