-
|
I want to add different favicons to each main page of my website. Currently, I have four main pages: "project," "photo," "blog," and "info." Among these four main pages, only "project" and "blog" have subpages. I have already added different favicons to each main page, and now I want the favicons for the subpages of "project" to be the same as the favicon for "project," and the favicons for the subpages of "blog" to be the same as the favicon for "blog." Can you please advise me on how to do this? Thank you in advance. Here is my .eleventy.js code: here is my file structure: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
It's a bit tricky without seeing the files, but I have one idea that might work. Here's a [barely] simplified version of your file structure: 11tybuildsite/
├─ .eleventy.js
└─ src/
├─ 404.njk
├─ _includes/*.njk
├─ archive.njk
├─ assets/
│ └─ image/
│ ├─ favicon/
│ │ ├─ archive.svg
│ │ ├─ article.svg
│ │ ├─ blog.svg
│ │ ├─ homepage.svg
│ │ ├─ info.svg
│ │ ├─ photo.svg
│ │ └─ project.svg
│ └─ photo/*-min.jpeg
├─ blog/
│ ├─ yyyy-mm-dd-*.md
│ └─ blog.json
├─ blog.njk
├─ categories.njk
├─ categoriesproject.njk
├─ index.njk
├─ info.njk
├─ photos/
│ ├─ yyyy-mm-dd-*.md
│ └─ photos.json
├─ photos.njk
├─ project/
│ ├─ project.json
│ └─ *.md
└─ project.njkNow, looking at your code, it looks like you have these favicon to folder mappings: "/": "/assets/image/favicon/homepage.svg",
"/project/": "/assets/image/favicon/project.svg",
"/photos/": "/assets/image/favicon/photo.svg",
"/blog/": "/assets/image/favicon/blog.svg",
"/info/": "/assets/image/favicon/info.svg",
"/archive/": "/assets/image/favicon/archive.svg",So I'll assume:
For something like src/index.njk, I'd probably do some front matter like: ---
favicon: homepage
---Or, you could add the full path of "/assets/image/favicon/homepage.svg". Finally, in your layout file, do something like this: <link rel="icon" href="/assets/image/favicon/{{- favicon -}}.svg" />I'd also add some sort of default in case Your file list above also had an "article.svg" but not sure where that's used. |
Beta Was this translation helpful? Give feedback.
-
|
If the above idea sounds tedious and boring, another approach might be just looking at eleventyConfnig.addFilter("faviconify", function (pageUrl) {
const _favicon = (icon) => `/assets/image/favicon/${icon}.svg`;
if (pageUrl === "/") return _favicon("homepage");
if (pageUrl.startsWith("/blog/")) return _favicon("blog");
if (pageUrl.startsWith("/project/")) return _favicon("project");
...
return ""; // some default favicon slug here.
}The above code is so repetitive you could almost put it in a loop (although you might need to rename "photo.svg" to plural "photos.svg" so it matches the directory name). Plus this uses "homepage.svg" as a fallback: ["archive", "blog", "info", "photos", "project"].forEach(slug => {
if (pageUrl.startsWith(`/${slug}/`)) return _favicon(slug);
});
return _favicon("homepage");Now in your layout file maybe something like: <link rel="icon" href="{{- page.url | faviconify -}}" /> |
Beta Was this translation helpful? Give feedback.
-
|
Hello Pdehaan, After your detailed explanation and several trial-and-error attempts, I finally managed to make the favicon for my subpages the same as the favicon for the main pages. Many thanks for your help. Here is my Eleventy.js code: |
Beta Was this translation helpful? Give feedback.
-
|
Thought about this a bit more on the dog walk this morning and came up with this cursed RegExp solution if you want something a bit more terse and harder to read (although about 3% more fun): eleventyConfig.addFilter("faviconify", function (pageUrl) {
// A list of top level directories to check *and* also the favicon's basename.
const favicons = ["archive", "blog", "info", "photos", "project"];
// Note the `(?<favicon>...)` named capturing group in the RegExp.
const regexp = new RegExp(`^/(?<favicon>${favicons.join("|")})/`);
// Note the `?.` (optional chaining) and `??` (nullish coalescing) operators.
// If the page isn't a match `.match()` will return `null` and default to "homepage" favicon.
const favicon = pageUrl.match(regexp)?.groups.favicon ?? "homepage";
return `/assets/image/favicon/${favicon}.svg`;
});MDN docs of note: |
Beta Was this translation helpful? Give feedback.
-
|
Hello Pdehaan, Thanks for your patience to help me solve this issue. I will try the third option. Kind regards, Ning |
Beta Was this translation helpful? Give feedback.
If the above idea sounds tedious and boring, another approach might be just looking at
{{ page.url }}and using some custom filter like this untested code:The above code is so repetitive you could almost put it in a loop (although you might need to rename "photo.svg" to plural "photos.svg" so it matches the directory name). Plus th…