Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Breadcrumb and multilanguage

Forum › General Inquiry

  • April 8, 2020 at 5:35 pm #2355
    Avatar photo[anonymous]

    Hi everybody and congratulations for this amazing CMS.

    I’m designing my first website using Publii and I need to know if there’s any (easy) way to put some kind of breadcrumb at the top of every post. I’m using Square theme. I’ve seen that question was debated some time ago in this topic but it refers a disappeared ticket

    Another question is when it will be possible to build a multilanguage site, a feature that I (and a lot of people) really need. I saw it was intended to be ready this year 2020 but I’m not sure if this is still the goal.

    Thanks.

    April 9, 2020 at 2:56 pm #2373
    Avatar photo[anonymous]

    Hi,

    At this moment there are no easy way to create breadcrumbs – we will address this issue in the future as it seems to be important for the SEO and UX.

    Regarding multilanguage – it is still on our ToDo list, but we have no any ETA for this now.

    April 9, 2020 at 4:19 pm #2383
    Avatar photo[anonymous]

    Thanks for your answer and congratulations for your work I really appreciate.

    April 9, 2020 at 4:34 pm #2385
    Avatar photoBob

    In terms of breadcrumb, here is an example:

    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
   <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="{{@website.url}}">
         <span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
   </li>
   ›
   <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="{{post.mainTag.url}}"
         href="{{post.mainTag.url}}">
         <span itemprop="name">{{post.mainTag.name}}</span></a>
      <meta itemprop="position" content="2" />
   </li>
   ›
   <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">{{post.title}}</span>
      <meta itemprop="position" content="3" />
   </li>
</ol>
    April 9, 2020 at 7:59 pm #2392
    Avatar photo[anonymous]

    Thanks Bob, but I can’t make it work.

    I tried to paste this HTML in one of my posts using the HTML editor and didn’t work. My post only shows this text:

    Home
    ›
    {{post.mainTag.name}}
    ›
    {{post.title}}

    And when I go back to the HTML editor the major part of the code has been erased.

    Any help would be appreciated. Thanks.

    April 10, 2020 at 5:06 am #2400
    Avatar photoBob

    You should paste this code into a post.hbs file ‎⁨(Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME)

    To preserve the custom code changed from being overwritten the next time your theme is updated, please make sure you have created override files, which are essentially copies of the existing theme files and are stored separately → https://getpublii.com/dev/theme-overrides/

    November 16, 2022 at 6:48 am #8725
    Avatar photo[anonymous]

    Thank you, @Bob for the helpful addition here! I was able to get this working nicely on my theme.

    FWIW, depending on your theme you’ll need to remove the “post.” from the variable names, thus just {{title}} or {{mainTag.*}}

    Also, in order to make it look like an actual breadcrumb, you’ll need to add some CSS appropriate for your theme. Wrap the whole block in a (note: this site editor is broken, it strips HTML “tags” even if escaped manually) < div class = “breadcrumb” > and , then add something like this example to start from in your custom CSS:

    /* Breadcrumbs */
.breadcrumb ol {
  list-style: none;
  padding: 0 0 2rem 0;
  margin: 0;
  display: flex;
    font-size: .8239746086rem;
    font-style: italic;
}
.breadcrumb li {
    padding: 0;
}
.breadcrumb a {
    text-decoration: none;
}
.breadcrumb li::after {
  content: "»";
  margin-left: .3rem;
  margin-right: .3rem;
  color: var(--light);
}
.breadcrumb li:last-child::after { content: none; }
    July 9, 2023 at 12:15 pm #10284
    Avatar photo[anonymous]

    Any update on breadcrumb’s for posts being implemented?

    If someone made a plugin, I’d be happy to pay.

    Tried using the code above, but can’t wrap my head around it.

    SEO is my thing, not code.

    Cheers