git add .eleventy.js git commit -m "Add date filte...
बनाया गया: 27 अगस्त 2025
का उपयोग करके उत्तर दिया गया GPT-5 Thinking द्वारा Chat01
बनाया गया: 27 अगस्त 2025
का उपयोग करके उत्तर दिया गया GPT-5 Thinking द्वारा Chat01
git add .eleventy.js
git commit -m "Add date filters + responsive images shortcode + passthrough"
zsh: parse error near `)'
(base) Yousef@Apples-MacBook-Pro my-portfolio % rm -rf _site .cache
npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./archive.njk (via TemplateContentRenderError)
[11ty] 2. (./archive.njk)
[11ty] Template render error: (/Users/Yousef/my-portfolio/_includes/postslist.njk)
[11ty] Error: filter not found: htmlDateString (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./archive.njk)
[11ty] Template render error: (/Users/Yousef/my-portfolio/_includes/postslist.njk)
[11ty] Error: filter not found: htmlDateString
[11ty] at Object._prettifyError (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/lib.js:32:11)
[11ty] at /Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:464:19
[11ty] at eval (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:30:11)
[11ty] at /Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:471:11
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:105:3)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] at eval (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:29:10)
[11ty] at fn (/Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:26:24)
[11ty] at /Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:66:22
[11ty] at executeSync (/Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:8:15)
[11ty] Copied 1 file / Wrote 0 files in 0.39 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio % cp archive.njk archive.njk.bak
ضيف permalink: false في الـ front matter
awk 'BEGIN{p=1} /^---/{c++} {print} c==1 && 0 /−−−0 /−−−/ && p {print "permalink: false"; p=0}' archive.njk > /tmp/_a && mv /tmp/_a archive.njk
git add archive.njk
git commit -m "Temporarily disable building Archive page (permalink: false)"
zsh: command not found: #
[main b996cee] Temporarily disable building Archive page (permalink: false)
1 file changed, 1 insertion(+)
(base) Yousef@Apples-MacBook-Pro my-portfolio % /* إخفاء روابط معينة من الناف */
.site-nav a[href="/posts/"],
.site-nav a[href="/photos/"] { display: none !important; }
/* صور مرنة */
img, picture { max-width: 100%; height: auto; display: block; }
zsh: event not found: important
(base) Yousef@Apples-MacBook-Pro my-portfolio % grep -n 'overrides.css' _includes/layouts/base.njk ||
sed -i '' 's#</head># <link rel="stylesheet" href="/assets/css/overrides.css">\n</head>#' _includes/layouts/base.njk
git add _includes/layouts/base.njk
git commit -m "Ensure overrides.css is included" || true
67: <link rel="stylesheet" href="/assets/css/overrides.css">n</head>
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
(use "git push" to publish your local commits)
nothing to commit, working tree clean
(base) Yousef@Apples-MacBook-Pro my-portfolio % git push origin fix/mobile-and-images
لو حابب تدمج على main فورًا:
git checkout main
git merge --no-ff fix/mobile-and-images -m "Mobile viewport + date filters + responsive images"
git push origin main
Everything up-to-date
zsh: command not found: #
Already on 'main'
Your branch is ahead of 'origin/main' by 1 commit.
(use "git push" to publish your local commits)
Already up to date.
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 349 bytes | 349.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/YousefMohamd/YousefMohamd.github.io.git
81ad850..b996cee main -> main
(base) Yousef@Apples-MacBook-Pro my-portfolio % npm i -D luxon @11ty/eleventy-img
up to date, audited 255 packages in 2s
53 packages are looking for funding
run npm fund for details
1 moderate severity vulnerability
To address all issues (including breaking changes), run:
npm audit fix --force
Run npm audit for details.
(base) Yousef@Apples-MacBook-Pro my-portfolio % nano .eleventy.js
(base) Yousef@Apples-MacBook-Pro my-portfolio % git add .eleventy.js
git commit -m "Eleventy: add date filters + responsive images shortcode"
[main c403ceb] Eleventy: add date filters + responsive images shortcode
1 file changed, 16 insertions(+), 4 deletions(-)
(base) Yousef@Apples-MacBook-Pro my-portfolio % nano _includes/layouts/base.njk
(base) Yousef@Apples-MacBook-Pro my-portfolio % git add _includes/layouts/base.njk
git commit -m "Add mobile viewport meta"
[main 9634754] Add mobile viewport meta
1 file changed, 1 insertion(+)
(base) Yousef@Apples-MacBook-Pro my-portfolio % mkdir -p assets/css
nano assets/css/overrides.css
(base) Yousef@Apples-MacBook-Pro my-portfolio % nano _includes/layouts/base.njk
(base) Yousef@Apples-MacBook-Pro my-portfolio % git add assets/css/overrides.css _includes/layouts/base.njk
git commit -m "Add CSS overrides (hide archive/photos + responsive imgs)"
[main 2c0d184] Add CSS overrides (hide archive/photos + responsive imgs)
1 file changed, 1 insertion(+)
(base) Yousef@Apples-MacBook-Pro my-portfolio % rm -rf _site .cache
npx @11ty/eleventy
npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./archive.njk (via TemplateContentRenderError)
[11ty] 2. (./archive.njk)
[11ty] Template render error: (/Users/Yousef/my-portfolio/_includes/postslist.njk) [Line 6, Column 40]
[11ty] Error: Unable to call collections["tagList"]["indexOf"], which is undefined or falsey (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./archive.njk)
[11ty] Template render error: (/Users/Yousef/my-portfolio/_includes/postslist.njk) [Line 6, Column 40]
[11ty] Error: Unable to call collections["tagList"]["indexOf"], which is undefined or falsey
[11ty] at Object._prettifyError (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/lib.js:32:11)
[11ty] at /Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:464:19
[11ty] at eval (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:30:11)
[11ty] at /Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:471:11
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:105:3)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] at eval (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:29:10)
[11ty] at fn (/Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:26:24)
[11ty] at /Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:66:22
[11ty] at executeSync (/Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:8:15)
[11ty] Copied 1 file / Wrote 0 files in 0.32 seconds (v2.0.1)
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./archive.njk (via TemplateContentRenderError)
[11ty] 2. (./archive.njk)
[11ty] Template render error: (/Users/Yousef/my-portfolio/_includes/postslist.njk) [Line 6, Column 40]
[11ty] Error: Unable to call collections["tagList"]["indexOf"], which is undefined or falsey (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./archive.njk)
[11ty] Template render error: (/Users/Yousef/my-portfolio/_includes/postslist.njk) [Line 6, Column 40]
[11ty] Error: Unable to call collections["tagList"]["indexOf"], which is undefined or falsey
[11ty] at Object._prettifyError (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/lib.js:32:11)
[11ty] at /Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:464:19
[11ty] at eval (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:30:11)
[11ty] at /Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:471:11
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:105:3)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] at eval (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:29:10)
[11ty] at fn (/Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:26:24)
[11ty] at /Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:66:22
[11ty] at executeSync (/Users/Yousef/my-portfolio/node_modules/a-sync-waterfall/index.js:8:15)
[11ty] Copied 1 file / Wrote 0 files in 0.32 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio %
احل الاخطاء دي ازاي ولو احتاجت امدك بمعلومات قولي
تمام—فيه 3 أشياء بتسبب لك الأخطاء اللي شايفها:
نقص فلاتر وتجمّعات (collections) في .eleventy.js
filter not found: htmlDateString
معناه إن الفلتر مش متسجل.collections["tagList"]["indexOf"] is undefined
معناه إنك بتستدعي tagList
بس عمرك ما عرّفته كـ collection.قمت بلزق CSS/تعليقات مباشرة في الـ zsh
/* ... */
أو !
أو حتى تعليقات عربية لو اترمت في الشِل هيتفسر كأوامر (عشان كده ظهر event not found: important
).أدخلت حرف n
زيادة في <head>
overrides.css">n</head>
بدل سطرين منفصلين.خلّيني أديك “حزمة إصلاح” سريعة خطوة بخطوة 👇
.eleventy.js
(فلتر التاريخ + tagList + shortcode للصور)انسخ الملف كله بهذا المحتوى (هيغطي الفلاتر، وcollection للوسوم، والـ shortcode للصور، والـ passthrough):
bashcat > .eleventy.js <<'JS' const { DateTime } = require("luxon"); const Image = require("@11ty/eleventy-img"); function filterTagList(tags) { return (tags || []).filter(tag => !["all","nav","post","posts"].includes(tag)); } module.exports = function(eleventyConfig) { // فلاتر تواريخ eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLL yyyy") => { if (!dateObj) return ""; const d = (dateObj instanceof Date) ? dateObj : new Date(dateObj); return DateTime.fromJSDate(d, { zone: "utc" }).toFormat(format); // أمثلة: "dd LLL yyyy" => 27 Aug 2025 }); eleventyConfig.addFilter("htmlDateString", (dateObj) => { if (!dateObj) return ""; const d = (dateObj instanceof Date) ? dateObj : new Date(dateObj); return DateTime.fromJSDate(d, { zone: "utc" }).toFormat("yyyy-LL-dd"); // مثال: 2025-08-27 }); // فلتر للوسوم eleventyConfig.addFilter("filterTagList", filterTagList); // Collection للوسوم (tagList) — زي بتاع 11ty blog starter eleventyConfig.addCollection("tagList", (collectionApi) => { const tagSet = new Set(); collectionApi.getAll().forEach(item => { (item.data.tags || []).forEach(tag => tagSet.add(tag)); }); return filterTagList([...tagSet]); }); // Shortcode للصور المرنة (@11ty/eleventy-img) async function imageShortcode(src, alt, sizes = "(min-width: 768px) 768px, 100vw", widths = [320, 640, 960, 1200], formats = ["avif","webp","jpeg"]) { if (!alt) throw new Error(`Missing \`alt\` on responsive image from: ${src}`); const metadata = await Image(src, { widths, formats, urlPath: "/img/", outputDir: "./_site/img/", }); const imageAttributes = { alt, sizes, loading: "lazy", decoding: "async", }; return Image.generateHTML(metadata, imageAttributes); } eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode); // نسخ الأصول (ومنها overrides.css) eleventyConfig.addPassthroughCopy({ "assets": "assets" }); return { dir: { input: ".", includes: "_includes", data: "_data" }, htmlTemplateEngine: "njk", markdownTemplateEngine: "njk", }; }; JS
ملاحظة: أنت فعلًا مثبت
luxon
و@11ty/eleventy-img
— تمام 👌
postslist.njk
ضد عدم وجود tagListلو جوّا _includes/postslist.njk
عندك استخدام مباشر لـ collections.tagList.indexOf(...)
، خلي فيه متغير آمن قبل الاستخدام:
njk{% set tagList = collections.tagList or [] %} {# مثال لفحص وسم #} {# {% if tagList.indexOf('javascript') != -1 %} ... {% endif %} #}
ولو بتفلتر الوسوم في تِكرار، استخدم الفلتر اللي ضفناه:
njk{% set safeTags = (post.data.tags | filterTagList) %}
وبأي مكان بتعتمد فيه على collections.tagList
, حط شرط بسيط:
njk{% if collections.tagList %} {# .. الاستعمال .. #} {% endif %}
في رأس archive.njk
:
njk--- permalink: false eleventyExcludeFromCollections: true ---
حتى مع
permalink: false
، 11ty لسه ممكن يكمبايل التمبليت علشان الـ include؛ عشان كده خطوة (2) مهمة.
<head>
اللي اتخرب بالـ sedعالج حرف n
اللي اتزاحم جوّا الوسم:
bashsed -i '' 's#overrides.css">n</head>#overrides.css">\n</head>#' _includes/layouts/base.njk
وتأكد أن عندك الملف:
bashmkdir -p assets/css cat > assets/css/overrides.css <<'CSS' /* إخفاء روابط معينة من الناف */ .site-nav a[href="/posts/"], .site-nav a[href="/photos/"] { display: none !important; } /* صور مرنة */ img, picture { max-width: 100%; height: auto; display: block; } CSS
لو حبيت تضيف CSS من التيرمنال تاني، استعمل
heredoc
زي فوق أو لفّ كل شيء بين single quotes. في zsh علامة!
تفعل الـ history expansion، فمتكتبهاش في السطر لوحدها داخل الشِل.
bashrm -rf _site .cache npx @11ty/eleventy --serve --port 8087
لو كل شيء تمام، الأخطاء اللي ظهرت لك هتختفي.
zsh: event not found: important
حصلت لأنك لصقت !important
في الشِل بدل ما تكتبها داخل ملف CSS.zsh: parse error near \
)'` غالبًا سببه لصق سطور فيها أقواس/تعليقات في الشِل. خلي الحاجات دي تدخل ملفاتك مش الشِل.لو ما زال في خطأ بعد الخطوات دي، ابعتلي أول 15–20 سطر من:
_includes/postslist.njk
archive.njk
وسأصلحها لك مباشرة.
ده ملف ال _includes/postslist.njk
عدل عليه وهاته براحتك
جامد! ده نسخة سليمة وآمنة لـ _includes/postslist.njk
تحل مشاكل
htmlDateString
و collections.tagList.indexOf
وتمنع أي undefineds:
njk{# _includes/postslist.njk #} {% set list = postslist or collections.posts or [] %} <ol reversed class="postlist" style="counter-reset: start-from {{ ((postslistCounter or (list | length)) + 1) }}"> {% for post in list | reverse %} <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}"> <a href="{{ post.url | url }}" class="postlist-link"> {% if post.data.title %}{{ post.data.title | safe }}{% else %}{{ post.url }}{% endif %} </a> <time class="postlist-date" datetime="{{ post.date | htmlDateString }}"> {{ post.date | readableDate }} </time> {% set tagList = collections.tagList or [] %} {% for tag in (post.data.tags | default([]) | filterTagList) %} {% if tag in tagList %} {% set tagUrl %}/tags/{{ tag }}/{% endset %} <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a> {% endif %} {% endfor %} </li> {% endfor %} </ol>
collections.tagList.indexOf(tag)
استخدمت شرطًا آمنًا: {% set tagList = collections.tagList or [] %}
ثم {% if tag in tagList %}
عشان مايقعّش لو tagList
مش متعرفة.default([])
على post.data.tags
عشان مايبقاش undefined.datetime
و نص التاريخ بيستخدموا الفلاتر اللي ضفناها في .eleventy.js
(htmlDateString
و readableDate
).postslistCounter
مش موجود: بيعتمد على طول الليست.bashcat > _includes/postslist.njk <<'NJK' {# _includes/postslist.njk #} {% set list = postslist or collections.posts or [] %} <ol reversed class="postlist" style="counter-reset: start-from {{ ((postslistCounter or (list | length)) + 1) }}"> {% for post in list | reverse %} <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}"> <a href="{{ post.url | url }}" class="postlist-link"> {% if post.data.title %}{{ post.data.title | safe }}{% else %}{{ post.url }}{% endif %} </a> <time class="postlist-date" datetime="{{ post.date | htmlDateString }}"> {{ post.date | readableDate }} </time> {% set tagList = collections.tagList or [] %} {% for tag in (post.data.tags | default([]) | filterTagList) %} {% if tag in tagList %} {% set tagUrl %}/tags/{{ tag }}/{% endset %} <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a> {% endif %} {% endfor %} </li> {% endfor %} </ol> NJK rm -rf _site .cache npx @11ty/eleventy --serve --port 8087
لو طلع أي Error تاني، ابعته زي ما هو وأنا أظبطهولك.
(base) Yousef@Apples-MacBook-Pro my-portfolio % mkdir -p assets/css
cat > assets/css/overrides.css <<'CSS'
/* إخفاء روابط معينة من الناف */
.site-nav a[href="/posts/"],
.site-nav a[href="/photos/"] { display: none !important; }
/* صور مرنة */
img, picture { max-width: 100%; height: auto; display: block; }
CSS
(base) Yousef@Apples-MacBook-Pro my-portfolio % rm -rf _site .cache
npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./index.njk (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./index.njk (via TemplateContentCompileError)
[11ty] 3. (./index.njk) [Line 10, Column 6]
[11ty] unknown block tag: img (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./index.njk) [Line 10, Column 6]
[11ty] unknown block tag: img
[11ty] at Object._prettifyError (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/lib.js:32:11)
[11ty] at Template.init (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:416:19)
[11ty] at Template.Obj (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/object.js:51:15)
[11ty] at new Template (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:390:18)
[11ty] at Nunjucks.compile (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:406:14)
[11ty] at TemplateRender.getCompiledTemplate (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/TemplateRender.js:278:26)
[11ty] at Template.compile (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/TemplateContent.js:362:42)
[11ty] at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
[11ty] at async Template._render (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/TemplateContent.js:486:16)
[11ty] Copied 1 file / Wrote 0 files in 0.33 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio % >....
</li> {% endfor %} </ol> NJKtext<time class="postlist-date" datetime="{{ post.date | htmlDateString }}"> {{ post.date | readableDate }} </time> {% set tagList = collections.tagList or [] %} {% for tag in (post.data.tags | default([]) | filterTagList) %} {% if tag in tagList %} {% set tagUrl %}/tags/{{ tag }}/{% endset %} <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a> {% endif %} {% endfor %}
rm -rf _site .cache
npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./index.njk (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./index.njk (via TemplateContentCompileError)
[11ty] 3. (./index.njk) [Line 10, Column 6]
[11ty] unknown block tag: img (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./index.njk) [Line 10, Column 6]
[11ty] unknown block tag: img
[11ty] at Object._prettifyError (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/lib.js:32:11)
[11ty] at Template.init (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:416:19)
[11ty] at Template.Obj (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/object.js:51:15)
[11ty] at new Template (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:390:18)
[11ty] at Nunjucks.compile (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:406:14)
[11ty] at TemplateRender.getCompiledTemplate (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/TemplateRender.js:278:26)
[11ty] at Template.compile (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/TemplateContent.js:362:42)
[11ty] at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
[11ty] at async Template._render (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/TemplateContent.js:486:16)
[11ty] Copied 1 file / Wrote 0 files in 0.31 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio %
ده الي ظهر
حصلت لأن index.njk
بيستخدم تاج Nunjucks اسمه img
، وإحنا سجلنا الشورتكود باسم image
في .eleventy.js
. نونچكس بتقول: “unknown block tag: img” = مفيش تاج اسمه img
.
عندك طريقتين—اختار واحدة:
حوّل كل {% img ... %}
إلى {% image ... %}
.
مثال سطر 10 في index.njk
:
diff- {% img "assets/img/hero.jpg", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %} + {% image "assets/img/hero.jpg", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %}
تقدر تعملها آليًا:
bash# بدّل أي تاج img إلى image في كل ملفات njk grep -rl --include="*.njk" "{% img" . | xargs sed -i '' 's/{%[[:space:]]*img[[:space:]]\+/{% image /g'
img
يشتغل كألياس)زود alias في .eleventy.js
عشان img
يبقى نفس شورتكود image
(وكمان لو عندك نسخة paired {% endimg %}
):
js// ... نفس الكود اللي عندك eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode); // ألياس للتاج {% img ... %} eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode); // (اختياري) لو بتستخدم الشكل المزدوج {% img ... %}{% endimg %} eleventyConfig.addPairedNunjucksAsyncShortcode("image", async (content, ...args) => { return await imageShortcode(...args); }); eleventyConfig.addPairedNunjucksAsyncShortcode("img", async (content, ...args) => { return await imageShortcode(...args); });
استخدام الشورتكود الصحيح في Nunjucks بيكون كتاج
{% image "src", "alt", "sizes?" %}
(مش داخل{{ }}
).
نفّذ:
bashrm -rf _site .cache npx @11ty/eleventy --serve --port 8087
لو ظهرت رسالة تانية، ابعِث لي أول 15–20 سطر من index.njk
حوالين السطر 10، وأنا أعدّلها لك فورًا.
(base) Yousef@Apples-MacBook-Pro my-portfolio % npx @11ty/eleventy --serve
[11ty] Eleventy CLI Fatal Error: (more in DEBUG output)
[11ty] 1. Error in your Eleventy config file '.eleventy.js'. (via EleventyConfigError)
[11ty] 2. Invalid or unexpected token (via SyntaxError)
[11ty]
[11ty] Original error stack trace: /Users/Yousef/my-portfolio/.eleventy.js:76
[11ty] async function imageShortcode(src, alt, sizes = "(min-width: 768px) 768px, 100vw", widths = [3
[11ty] ^
[11ty]
[11ty] SyntaxError: Invalid or unexpected token
[11ty] at wrapSafe (node:internal/modules/cjs/loader:1620:18)
[11ty] at Module._compile (node:internal/modules/cjs/loader:1662:20)
[11ty] at Object..js (node:internal/modules/cjs/loader:1820:10)
[11ty] at Module.load (node:internal/modules/cjs/loader:1423:32)
[11ty] at Function._load (node:internal/modules/cjs/loader:1246:12)
[11ty] at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[11ty] at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
[11ty] at Module.require (node:internal/modules/cjs/loader:1445:12)
[11ty] at require (node:internal/modules/helpers:135:16)
[11ty] at requireLocal (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Util/Require.js:6:10)
واضح إن .eleventy.js
اتلوّث/اتقطع سطر عند تعريف الشورتكود — الرسالة بتقول السطر اللي فيه:
async function imageShortcode(src, alt, sizes = "(min-width: 768px) 768px, 100vw", widths = [3$
وده معناه إن فيه محرف غريب/انقصّ السطر بعد [3
(أو اتدخل حرف $
). أسهل حل: نكتب الملف من جديد بنسخة “نضيفة” 100% ASCII وتضم كمان alias لتاج {% img %}
عشان خطأ unknown block tag: img
يختفي.
انسخ الأوامر دي كما هي:
bash# اكتب .eleventy.js من جديد بنسخة سليمة cat > .eleventy.js <<'JS' const { DateTime } = require("luxon"); const Image = require("@11ty/eleventy-img"); function filterTagList(tags = []) { return tags.filter(tag => !["all","nav","post","posts"].includes(tag)); } module.exports = function(eleventyConfig) { // Date filters eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLL yyyy") => { if (!dateObj) return ""; const d = (dateObj instanceof Date) ? dateObj : new Date(dateObj); return DateTime.fromJSDate(d, { zone: "utc" }).toFormat(format); }); eleventyConfig.addFilter("htmlDateString", (dateObj) => { if (!dateObj) return ""; const d = (dateObj instanceof Date) ? dateObj : new Date(dateObj); return DateTime.fromJSDate(d, { zone: "utc" }).toFormat("yyyy-LL-dd"); }); // Tag filter eleventyConfig.addFilter("filterTagList", filterTagList); // tagList collection eleventyConfig.addCollection("tagList", (collectionApi) => { const tagSet = new Set(); collectionApi.getAll().forEach(item => { (item.data.tags || []).forEach(tag => tagSet.add(tag)); }); return filterTagList(Array.from(tagSet)); }); // Responsive image shortcode async function imageShortcode(src, alt, sizes, widths, formats) { const s = sizes || "(min-width: 768px) 768px, 100vw"; const w = widths || [320, 640, 960, 1200]; const f = formats || ["avif","webp","jpeg"]; if (!alt) throw new Error(`Missing alt on responsive image from: ${src}`); const metadata = await Image(src, { widths: w, formats: f, urlPath: "/img/", outputDir: "./_site/img/", }); const imageAttributes = { alt: alt, sizes: s, loading: "lazy", decoding: "async", }; return Image.generateHTML(metadata, imageAttributes); } eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode); // Alias: allow {% img ... %} نفس {% image ... %} eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode); // Passthrough assets (CSS…) eleventyConfig.addPassthroughCopy({ "assets": "assets" }); return { dir: { input: ".", includes: "_includes", data: "_data" }, htmlTemplateEngine: "njk", markdownTemplateEngine: "njk", }; }; JS # أبني من جديد rm -rf _site .cache npx @11ty/eleventy --serve --port 8087
لو لسه فيه خطأ:
index.njk
(حوالي السطر 10) وأول 100 سطر من .eleventy.js
باستخدام:
bashnl -ba .eleventy.js | sed -n '1,120p' nl -ba index.njk | sed -n '1,40p'
وهظبطهم لك فورًا.
(base) Yousef@Apples-MacBook-Pro my-portfolio % rm -rf _site .cache
(base) Yousef@Apples-MacBook-Pro my-portfolio % nl -ba .eleventy.js | sed -n '1,120p'
nl -ba index.njk | sed -n '1,40p'
1 const { DateTime } = require("luxon");
2 const Image = require("@11ty/eleventy-img");
3
4 function filterTagList(tags = []) {
5 return tags.filter(tag => !["all","nav","post","posts"].includes(tag));
6 }
7
8 module.exports = function(eleventyConfig) {
9 // Date filters
10 eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLL yyyy") => {
11 if (!dateObj) return "";
12 const d = (dateObj instanceof Date) ? dateObj : new Date(dateObj);
13 return DateTime.fromJSDate(d, { zone: "utc" }).toFormat(format);
14 });
15 eleventyConfig.addFilter("htmlDateString", (dateObj) => {
16 if (!dateObj) return "";
17 const d = (dateObj instanceof Date) ? dateObj : new Date(dateObj);
18 return DateTime.fromJSDate(d, { zone: "utc" }).toFormat("yyyy-LL-dd");
19 });
20
21 // Tag filter
22 eleventyConfig.addFilter("filterTagList", filterTagList);
23
24 // tagList collection
25 eleventyConfig.addCollection("tagList", (collectionApi) => {
26 const tagSet = new Set();
27 collectionApi.getAll().forEach(item => {
28 (item.data.tags || []).forEach(tag => tagSet.add(tag));
29 });
30 return filterTagList(Array.from(tagSet));
31 });
32
33 // Responsive image shortcode
34 async function imageShortcode(src, alt, sizes, widths, formats) {
35 const s = sizes || "(min-width: 768px) 768px, 100vw";
36 const w = widths || [320, 640, 960, 1200];
37 const f = formats || ["avif","webp","jpeg"];
38 if (!alt) throw new Error(Missing alt on responsive image from: ${src}
);
39 const metadata = await Image(src, {
40 widths: w,
41 formats: f,
42 urlPath: "/img/",
43 outputDir: "./_site/img/",
44 });
45 const imageAttributes = {
46 alt: alt,
47 sizes: s,
48 loading: "lazy",
49 decoding: "async",
50 };
51 return Image.generateHTML(metadata, imageAttributes);
52 }
53 eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
54
55 // Alias: allow {% img ... %} نفس {% image ... %}
56 eleventyConfig.addNunjucksAsyncShortcode("img", imageShortcode);
57
58 // Passthrough assets (CSS…)
59 eleventyConfig.addPassthroughCopy({ "assets": "assets" });
60
61 return {
62 dir: { input: ".", includes: "_includes", data: "_data" },
63 htmlTemplateEngine: "njk",
64 markdownTemplateEngine: "njk",
65 };
66 };
1 ---
2 layout: layouts/home.njk
3 eleventyNavigation:
4 key: Home
5 order: 1
6 ---
7
8 <!-- DEBUG: this is index.njk (must appear in page) -->
9
10 <!-- Header -->
11 <header class="w3-container w3-padding-32 w3-center w3-black" id="home">
12 <h1 class="w3-jumbo">{{ metadata.title }}</h1>
13 <p>{{ metadata.description }}</p>
14
15 <!-- صورتك — بدون أي إطار -->
16 {% img "{{ '/img/w3images/profile/myphoto.jpg' | url }}", "{{ metadata.author.name }}", "(max-width: 900px) 100vw, 900px" %}
17 {% image "assets/img/hero.jpg", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %}
18 </header>
19
20 <!-- About -->
21 <div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">
22 <h2 class="w3-text-light-grey">About Me</h2>
23 <hr style="width:200px" class="w3-opacity">
24 <p>{{ metadata.author.summary }}</p>
25
26 <!-- CV Button -->
27 <p style="margin-top:14px">
28 <a class="w3-button w3-light-grey w3-padding-large w3-round"
29 href="{{ '/files/Yousef%20Mohamed%20-%20Multidisciplinary%20Visual%20Artist%20.pdf' | url }}"
30 target="_blank" rel="noopener">
31 <i class="fa fa-file-pdf-o w3-margin-right" aria-hidden="true"></i> CV
32 </a>
33 </p>
34 </div>
35
36 <!-- Tools / Software Experience -->
37 <!-- Tools / Software Experience -->
38 <div class="w3-padding-64 w3-content" id="tools">
39 <h2 class="w3-text-light-grey">Software Experience</h2>
40 <hr style="width:200px" class="w3-opacity">
(base) Yousef@Apples-MacBook-Pro my-portfolio % npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./index.njk (via TemplateContentRenderError)
[11ty] 2. (./index.njk)
[11ty] EleventyShortcodeError: Error with Nunjucks shortcode img
(via Template render error)
[11ty] 3. ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}' (via Template render error)
[11ty]
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}'
[11ty] at Object.statSync (node:fs:1739:25)
[11ty] at Image.getInMemoryCacheKey (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:140:32)
[11ty] at Image.create (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:872:19)
[11ty] at createImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:84:19)
[11ty] at queueImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:104:13)
[11ty] at Object.imageShortcode (/Users/Yousef/my-portfolio/.eleventy.js:39:28)
[11ty] at Object.<anonymous> (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty] at ShortcodeFunction.run (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:200:14)
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:14:31)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] Copied 1 file / Wrote 0 files in 0.30 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio %
تمام—الخطأ الحالي سببه حاجتين في سطر الصورة داخل index.njk
:
كتبت نونچكس داخل الشورتكود:
"{ { '/img/...jpg' | url } }"
← ده بيتمرِّر حرفيًا لـ eleventy-img
، فيحاول يقرأ ملف اسمه حرفيًا {{ '/img/...
ويفشل (ENOENT
).
استخدمت مسار يبدأ بـ /img/...
ده هو مسار الخرج (urlPath) اللي إحنا بنولّده، مش مسار المصدر على القرص. eleventy-img
لازم ياخد مسار ملف موجود فعلًا في مشروعك (مثلاً داخل assets/img/...
) أو URL كامل https://...
.
خلّيه كده:
index.njk
استبدل السطرين دول:
njk{% img "{{ '/img/w3images/profile/myphoto.jpg' | url }}", "{{ metadata.author.name }}", "(max-width: 900px) 100vw, 900px" %} {% image "assets/img/hero.jpg", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %}
بالصيغ الصحيحة (من غير {{ }}
جوّا الشورتكود، وبمسارات مصدر حقيقية داخل repo):
njk{# صورة البروفايل من ملفات المشروع #} {% img "assets/img/w3images/profile/myphoto.jpg", metadata.author.name, "(max-width: 900px) 100vw, 900px" %} {# صورة الغلاف (تأكد إن الملف موجود) #} {% image "assets/img/hero.jpg", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %}
ملاحظة: لو عايز تستخدم نص ثابت للـ alt، حطّه بين quotes. لو متغيّر زي
metadata.author.name
سيبه من غير{{ }}
.
حط الملفات في نفس المسارات:
textassets/img/w3images/profile/myphoto.jpg assets/img/hero.jpg
لو لسه ماحطّتش الصور، أنشئ المجلدات وانسخ صورك إليهم:
bashmkdir -p assets/img/w3images/profile # انسخ صورك الفعلية للمسارات دي: # cp /path/to/myphoto.jpg assets/img/w3images/profile/myphoto.jpg # cp /path/to/hero.jpg assets/img/hero.jpg
احنا بالفعل عاملين
addPassthroughCopy({ "assets": "assets" })
وeleventy-img
هيكتب الناتج في./_site/img/
واللينكات هتبقى تحت/img/...
تلقائيًا (بفضلurlPath: "/img/"
في.eleventy.js
). المهم إن المصدر يكون موجود فيassets/...
أو أي مسار حقيقي.
bashrm -rf _site .cache npx @11ty/eleventy --serve --port 8087
لو ظهرت رسالة تانية، ابعتلي 15–20 سطر حوالين الموضع اللي بيشاور عليه الخطأ، وأنا هصلّحها لك فورًا.
(base) Yousef@Apples-MacBook-Pro my-portfolio % npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./index.njk (via TemplateContentRenderError)
[11ty] 2. (./index.njk)
[11ty] EleventyShortcodeError: Error with Nunjucks shortcode img
(via Template render error)
[11ty] 3. ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}' (via Template render error)
[11ty]
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}'
[11ty] at Object.statSync (node:fs:1739:25)
[11ty] at Image.getInMemoryCacheKey (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:140:32)
[11ty] at Image.create (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:872:19)
[11ty] at createImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:84:19)
[11ty] at queueImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:104:13)
[11ty] at Object.imageShortcode (/Users/Yousef/my-portfolio/.eleventy.js:39:28)
[11ty] at Object.<anonymous> (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty] at ShortcodeFunction.run (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:200:14)
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:14:31)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] Copied 1 file / Wrote 0 files in 0.30 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio % nano index.njk
(base) Yousef@Apples-MacBook-Pro my-portfolio % assets/img/w3images/profile/myphoto.jpg
assets/img/hero.jpg
zsh: no such file or directory: assets/img/w3images/profile/myphoto.jpg
zsh: no such file or directory: assets/img/hero.jpg
(base) Yousef@Apples-MacBook-Pro my-portfolio % mkdir -p assets/img/w3images/profile
zsh: command not found: #
zsh: command not found: #
zsh: command not found: #
(base) Yousef@Apples-MacBook-Pro my-portfolio % mkdir -p assets/img/w3images/profile
(base) Yousef@Apples-MacBook-Pro my-portfolio % cp /path/to/myphoto.jpg assets/img/w3images/profile/myphoto.jpg
cp: /path/to/myphoto.jpg: No such file or directory
(base) Yousef@Apples-MacBook-Pro my-portfolio % rm -rf _site .cache
npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./index.njk (via TemplateContentRenderError)
[11ty] 2. (./index.njk)
[11ty] EleventyShortcodeError: Error with Nunjucks shortcode img
(via Template render error)
[11ty] 3. ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}' (via Template render error)
[11ty]
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}'
[11ty] at Object.statSync (node:fs:1739:25)
[11ty] at Image.getInMemoryCacheKey (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:140:32)
[11ty] at Image.create (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:872:19)
[11ty] at createImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:84:19)
[11ty] at queueImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:104:13)
[11ty] at Object.imageShortcode (/Users/Yousef/my-portfolio/.eleventy.js:39:28)
[11ty] at Object.<anonymous> (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty] at ShortcodeFunction.run (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:200:14)
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:14:31)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] Copied 1 file / Wrote 0 files in 0.30 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio % nano index.njk
(base) Yousef@Apples-MacBook-Pro my-portfolio % rm -rf _site .cache
npx @11ty/eleventy --serve --port 8087
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./index.njk (via TemplateContentRenderError)
[11ty] 2. (./index.njk)
[11ty] EleventyShortcodeError: Error with Nunjucks shortcode img
(via Template render error)
[11ty] 3. ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}' (via Template render error)
[11ty]
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '{{ '/img/w3images/profile/myphoto.jpg' | url }}'
[11ty] at Object.statSync (node:fs:1739:25)
[11ty] at Image.getInMemoryCacheKey (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:140:32)
[11ty] at Image.create (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/src/image.js:872:19)
[11ty] at createImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:84:19)
[11ty] at queueImage (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy-img/img.js:104:13)
[11ty] at Object.imageShortcode (/Users/Yousef/my-portfolio/.eleventy.js:39:28)
[11ty] at Object.<anonymous> (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty] at ShortcodeFunction.run (/Users/Yousef/my-portfolio/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:200:14)
[11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:14:31)
[11ty] at Template.render (/Users/Yousef/my-portfolio/node_modules/nunjucks/src/environment.js:454:10)
[11ty] Wrote 0 files in 0.26 seconds (v2.0.1)
(base) Yousef@Apples-MacBook-Pro my-portfolio %
كويس — الخطأ الحالي سببه سطر الصورة في index.njk
لسه مكتوب كده:
{% img "{{ '/img/w3images/profile/myphoto.jpg' | url }}", ... %}
ده بيخلّي eleventy-img
يدور على اسم ملف حرفيًا فيه أقواس { { ... } }
— فيفشل بـ ENOENT
. كمان انت ماعندكش الملفات المحليّة (assets/img/...
) لسه.
عندك حلّين، اختار الأسرع ليك:
عدّل مقطع الـ header في index.njk
واستبدل سطري الصور بالكامل بالسطور دي (من غير أقواس {{ }}
جوّا الشورتكود):
njk<!-- Header --> <header class="w3-container w3-padding-32 w3-center w3-black" id="home"> <h1 class="w3-jumbo">{{ metadata.title }}</h1> <p>{{ metadata.description }}</p> {# صورة بروفايل مؤقتة من الويب #} {% img "https://placehold.co/900x900?text=Profile", metadata.author.name, "(max-width: 900px) 100vw, 900px" %} {# صورة غلاف مؤقتة #} {% image "https://placehold.co/1600x900?text=Hero", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %} </header>
بعدها:
bashrm -rf _site .cache npx @11ty/eleventy --serve --port 8087
لو عايز صورك انت:
bashmkdir -p assets/img/w3images/profile # غيّر المسارات حسب مكان صورك الحقيقية cp ~/Pictures/myphoto.jpg assets/img/w3images/profile/myphoto.jpg cp ~/Downloads/hero.jpg assets/img/hero.jpg
index.njk
(بدون أقواس نونچكس داخل الشورتكود):njk{% img "assets/img/w3images/profile/myphoto.jpg", metadata.author.name, "(max-width: 900px) 100vw, 900px" %} {% image "assets/img/hero.jpg", "صورة الغلاف", "(min-width: 768px) 768px, 100vw" %}
bashrm -rf _site .cache npx @11ty/eleventy --serve --port 8087
{{ ... | url }}
جوّا شورتكود {% img %}
أو {% image %}
. الشورتكود عايز مسار مصدر فعلي (ملف محلي أو URL كامل).#
في الشِل هتتفسّر كأوامر وتديك command not found
—خلي التعليقات جوّا الملفات بس.لو حابب، ابعتلي أول 25 سطر من index.njk
بعد التعديل ونتأكد سوا قبل ما تبني.