[IMP] blog: update and restructure blog documentation

Task - 5136454

closes odoo/documentation#16998

X-original-commit: e5fd6a27ce
Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>

content/applications/websites/blog.rst

@@ -2,128 +2,163 @@
 Blog
 ====
 
-**Odoo Blog** allows you to create and manage blog posts on your website to engage your audience and
-build a community.
+**Odoo Blog** lets you manage blog pages and posts, and customize them with the website builder.
 
 .. tip::
-   If the Blog module is not yet installed, click :guilabel:`+New` on the website builder, select
-   :guilabel:`Blog Post`, and click :guilabel:`Install`.
+   Install the :guilabel:`Blog` app by clicking :guilabel:`New` on the website builder, then
+   selecting  :guilabel:`Blog Post`, and clicking :guilabel:`Install`.
 
-Creating a blog
-===============
+.. seealso::
+   `Odoo Tutorials: Blogs [video] <https://www.odoo.com/slides/slide/blogs-6935>`_
 
-To create or edit a blog, go to :menuselection:`Website --> Configuration --> Blogs: Blogs`. Click
-:guilabel:`New`, and enter the :guilabel:`Blog Name` and the :guilabel:`Blog Subtitle`.
-
-The :guilabel:`Blog` menu item is added to your website's menu the first time you create a blog and
-gathers all your blogs.
-
-Adding a blog post
-==================
-
-Go to your website, click :guilabel:`+New` in the top-right corner, and select
-:guilabel:`Blog Post`. In the pop-up, **select the blog** where the post should appear, write the
-post's :guilabel:`Title`, and :guilabel:`Save`. You can then write the post's content and customize
-the page using the website builder.
-
-.. tip::
-   - Illustrate your articles with copyright-free images from :doc:`Unsplash
-     </applications/general/integrations/unsplash>`.
-   - Type `/` in the text editor to format and add elements to your text.
-
-.. important::
-   Don't forget to toggle the :guilabel:`Unpublished` switch in the top-right corner to publish
-   your post.
-
-Using tags
+Blog posts
 ==========
 
-Tags let visitors filter all posts sharing the same tag. By default, they are displayed at the
-bottom of posts, but can also be displayed on the blog's main page. To do so, click
-:menuselection:`Edit --> Customize` and enable the :guilabel:`Sidebar`. By default, the sidebar's
-:guilabel:`Tags List` is enabled.
+To create a blog post, click :guilabel:`New` on the website builder and click :guilabel:`Blog Post`.
+Select a :ref:`blog <blog/blog-pages>`, define a :guilabel:`Blog Post Title`, and click
+:guilabel:`Save`. Write the post's content and customize it using the website builder.
 
-To create a tag, go to :menuselection:`Website --> Configuration --> Blogs: Tags` and click
+To publish a post, toggle the :guilabel:`Unpublished` switch in the top-right corner of the page.
+
+To delete a blog post, go to :menuselection:`Website --> Site --> Blog post`. Select the blog
+post to delete, click :icon:`fa-cog` :guilabel:`Actions`, and :icon:`fa-trash-o` :guilabel:`Delete`.
+
+Customize blog posts
+--------------------
+
+To customize the layout of all blog posts, open one and click :menuselection:`Edit --> Style`.
+Under the :guilabel:`Blog page` section, different options can be used to customize the posts:
+
+- :guilabel:`Layout`: display the title inside or above the cover.
+- :guilabel:`Increase Readability`: adjust or not the posts' formatting for better reading comfort.
+- :guilabel:`Sidebar`: display or hide a sidebar that can contain several elements:
+
+  - :guilabel:`Archive`: allow visitors to view all posts from a specific month by selecting it.
+  - :guilabel:`Author`: display the post author.
+  - :guilabel:`Blog List`: display links to all :ref:`blog pages <blog/blog-pages>`.
+  - :guilabel:`Share Links`: add clickable icons that link to your social network profiles and a
+    subscription field for your newsletter.
+  - :guilabel:`Tags`: create or select existing :ref:`tags <blog/tags>` and display them on the post.
+
+- :guilabel:`Breadcrumb`: display the breadcrumb trail.
+- :guilabel:`Bottom`: click the :guilabel:`Next Article` to hide or display the next post at the
+  end of the page, and click :guilabel:`Comments` to enable or disable visitors' comments.
+
+To add tags or customize the cover of a specific post, click the cover and use the following
+settings under the :guilabel:`Blog Post Cover` section:
+
+- :guilabel:`Tags`
+- :guilabel:`Background`: add an image by clicking the :icon:`os-camera` :guilabel:`(camera)` icon,
+  or use a background color by clicking the :icon:`fa-ban` (:guilabel:`None`) icon and selecting a
+  color.
+
+- :guilabel:`Size`: select the size of the cover (:guilabel:`Full screen`, :guilabel:`Half screen`,
+  or :guilabel:`Fit text`).
+- :guilabel:`Filter Intensity`: choose the cover filter's intensity
+  (:guilabel:`Low`, :guilabel:`Medium`, :guilabel:`High`) or disable it by selecting
+  :guilabel:`No filter`.
+
+After applying the desired changes, click :guilabel:`Save`.
+
+.. tip::
+   - Illustrate your posts with copyright-free images from :doc:`Unsplash
+     </applications/general/integrations/unsplash>`.
+   - Use :ref:`Plausible <analytics/plausible>` to track traffic on your blog.
+   - Customize blog building blocks through the website editor. For example, filter by the
+     :guilabel:`Latest blog posts` or :guilabel:`Most viewed blog posts` and determine which blog
+     to display in the building block.
+
+.. seealso::
+   - :doc:`Building block documentation <website/web_design/building_blocks>`
+   - :doc:`Odoo rich-text editor documentation <../essentials/html_editor>`
+
+.. _blog/tags:
+
+Tags
+~~~~
+
+Tags let visitors filter blog posts that share a specific tag. They are displayed at the bottom of
+each post.
+
+To create a tag, go to :menuselection:`Website --> Configuration --> Tags` and click
 :guilabel:`New`. Fill in the:
 
 - :guilabel:`Name`
-- :guilabel:`Category`: tag categories let you group tags displayed on the sidebar by theme.
-- :guilabel:`Used in`: to apply the tag to existing blog posts, click :guilabel:`Add a line`,
-  select the posts, and click :guilabel:`Select`.
+- :ref:`Category <blog/tag-category>`
+- :guilabel:`Color`
+- :guilabel:`Used in`: to apply tags to existing blog posts, click :guilabel:`Add a line`.
 
-You can add and create tags directly from posts by clicking :menuselection:`Edit --> Customize` and
-select the post's cover. Under :guilabel:`Tags`, click :guilabel:`Choose a record...`, and select
-or create a tag.
+Add and create tags directly from posts by clicking :menuselection:`Edit --> Style` and
+selecting the post's cover. Under :guilabel:`Tags`, click :guilabel:`Choose a record...`, and select
+or create a tag by writing a new name.
 
-.. image:: blog/create-tag.png
-   :alt: Adding a tag to a blog post
+.. _blog/tag-category:
+
+Tag category
+************
+
+Tag categories let you organize tags displayed on the sidebar into groups.
+
+.. image:: blog/tag-categories.png
+   :alt: tag categories
+
+To create tag categories, go to :menuselection:`Website --> Configuration --> Tag Categories`
+and click :guilabel:`New`.
+
+.. _blog/blog-pages:
+
+Blog landing pages
+==================
+
+To create multiple blogs, go to :menuselection:`Website --> Configuration --> Blogs` and click
+:guilabel:`New`. Next, enter the :guilabel:`Blog Name` and the :guilabel:`Blog Subtitle`.
+
+The :guilabel:`Blog` menu gathers all the blogs and their posts.
 
 .. note::
-   To manage tag categories, go to :menuselection:`Website --> Configuration --> Blogs: Tag
-   Categories`.
+   With two or more blogs, the blog landing page (/blog) aggregates posts from all blogs and lets
+   visitors choose which blog to view.
 
-Customizing blog homepages
-==========================
+Customize blog landing pages
+----------------------------
 
-Customize the content of blog homepages by opening a blog homepage and clicking :menuselection:`Edit
---> Customize`.
+To customize the blog landing pages, go to :menuselection:`Edit --> Style` and use the available
+options as desired.
 
 .. note::
-   Settings apply to **all** blogs homepages.
+   If you use multiple blogs, settings configured on the main blog landing page or on a specific
+   blog landing page will be applied to all other pages.
 
-:guilabel:`Top Banner`: :guilabel:`Name/Latest Post` displays the title of the latest post on the
-top banner, while :guilabel:`Drop Zone for Building Blocks` removes the top banner and lets you use
-any building block instead.
+- :guilabel:`Top Banner`: display or hide the page's banner:
 
-:guilabel:`Layout`: organizes posts as a :guilabel:`Grid` or :guilabel:`List`.
+  - :guilabel:`Full-width`: make the banner use the page's full-width or display a condensed banner.
+- :guilabel:`Layout`: display blog posts as a grid or as a list.
+- :guilabel:`Cards`: display blog posts with or without the *card* effect.
+- :guilabel:`Increase Readability`: enlarge or not the blog posts' size for better reading comfort .
+- :guilabel:`Sidebar`: display or hide a sidebar that contains an *about us* section, and, depending
+  on the options selected:
 
-- :guilabel:`Cards`: adds a *card* effect.
-- :guilabel:`Increase Readability`: improves the text's readability.
+  - :guilabel:`Archives`: allow visitors to view all posts from a specific month by selecting it.
+  - :guilabel:`Follow Us`: add clickable icons that link to your social network profiles and a
+    subscription field for your newsletter.
+  - :ref:`Tags List <blog/tags>`: allow visitors to view all blog posts that share a specific tag by
+    selecting it.
 
-:guilabel:`Sidebar`: displays a sidebar containing an :guilabel:`About us` section.
+- :guilabel:`Posts List`: select :guilabel:`Cover` to display the posts' covers or select
+  :guilabel:`No Cover` to hide them.
+- :guilabel:`Author`: display the posts' authors.
+- :guilabel:`Comments/Views Stats`: display or hide the number of comments and views for each post.
+- :guilabel:`Teaser & Tags`: display the posts' first sentences and tags.
 
-- :guilabel:`Archives`: allows visitors to select a month and filter all posts created during that
-  month.
-- :guilabel:`Follow Us`: displays links to your social media networks. They can be configured using
-  the Social Media building block somewhere on your website.
-- :guilabel:`Tags List`: displays all tags related to a blog. Visitors can select a tag to filter
-  all related posts.
-
-:guilabel:`Posts List`: :guilabel:`Cover` displays the posts' images, and :guilabel:`No Cover` hides
-them.
-
-- :guilabel:`Author`: displays the posts' authors.
-- :guilabel:`Comments/Views Stats`: displays the posts' number of comments and views.
-- :guilabel:`Teaser & Tags`: displays the posts' first sentences and tags.
-
-Customizing blog posts
-======================
-
-Customize posts by opening a blog post and clicking :menuselection:`Edit --> Customize`.
+After applying the desired changes, click :guilabel:`Save`.
 
 .. note::
-   Settings apply to **all** posts.
+   Increase your blog's visibility in search engines, attract more visitors while
+   improving the :doc:`SEO <../../../applications/websites/website/structure/seo>` by:
 
-:guilabel:`Layout`: :guilabel:`Title Inside Cover` displays the title inside the cover image, and
-:guilabel:`Title above Cover` displays it above.
-
-- :guilabel:`Increase Readability`: increases the text's readability.
-
-:guilabel:`Sidebar`: displays the :guilabel:`Sidebar` and additional options:
-
-- :guilabel:`Archive`: allows visitors to select a month and filter all posts created during that
-  month.
-- :guilabel:`Author`: displays the post's author and creation date.
-- :guilabel:`Blog List`: displays links to all your blogs.
-- :guilabel:`Share Links`: displays share buttons to several social networks.
-- :guilabel:`Tags`: displays the post's tags.
-
-:guilabel:`Breadcrumb`: displays the path to the post.
-
-:guilabel:`Bottom`: :guilabel:`Next Article` displays the next post at the bottom, and
-:guilabel:`Comments` enable visitors to comment on the post.
-
-:guilabel:`Select To Tweet`: visitors are offered to tweet the text they select.
-
-.. tip::
-   Use :ref:`Plausible <analytics/plausible>` to keep track of the traffic on your blog.
+   - Updating the content of the website regularly.
+   - Using meta tags and ensuring that both the content and metadata are translated.
+   - Never having more than one :ref:`Heading 1 <website/elements/titles>` per page, so
+     search engines can easily identify the page's main topic.
+   - Use the :guilabel:`Blog` :ref:`building blocks <website/building_blocks/add>` anywhere on the
+     website.