Comments (9)
this.ctx
does not exist in Lume. Where did you see it?
Lume has a url
filter to generate urls including the domain or only the path. For example, with nunjucks, you could do:
<img href="{{ 'assets/x.png' | url }}">
from lume.
url
doesn't work for this case, because it assumes that it's being served on the root of the domain.
this.ctx
comes from Nunjucks filters.
from lume.
url
use the location
configuration as base. If the location is, for example, https://mysite.com/subdirectory
, the prefix /subdirectory
is prepended to the returned path.
For example: <img src="{{ 'assets/x.png' | url }}">
returns <img src="/subdirectory/assets/x.png">
.
Does it work for you?
from lume.
Not really, I'd still have to do one build for each location. Maybe a relative_path
or relative_url
filter?
But mostly, how do you feel about a preprocess
plugin entry that happens before rendering?
from lume.
Ok, got it.
Processors are executed after rendering. I think it's good because doing so, they are independent of the template engine used.
There is a inline
processor here to inline automatically all css, javascript, images, etc, by searching in the html code all elements with the inline
attribute.
I think we can do something similar for your use case, a processor to search all elements using an absolute path in the href/src attributes and convert them to relative. In fact, I have done something like that in another ssg I've created some years ago
from lume.
Ahnnn. That could totally work. Good point.
I made a quick implementation of preprocess. But I'd defer to you if you think it's a good idea for this to exist at all.
from lume.
Also, for future reference, here are the 3 implementations of rootPath
that I ended up trying:
with a tag, abusing Nunchukjs. Use with {{ rootPath() }}/image.png
:
site.data("rootPath", function() {
return this.ctx.url.split('/').filter(x => x).map(_ => '..').join('/') || '.';
});
with a processor doing string substitution. Use with @ROOT@/image.png
:
site.process([".njk", ".md", ".html"], (page) => {
const root = page.data.url.split('/').filter(x => x).map(_ => '..').join('/') || '.';
page.content = page.content.replaceAll("@ROOT@", root);
});
With a preprocessor (not supported). Use with {{ rootPath }}/image.png
:
site.preprocess([".njk", ".md", ".html"], (page) => {
page.data.rootPath = page.data.url.split('/').filter(x => x).map(_ => '..').join('/') || '.';
});
from lume.
I've created a plugin to convert all urls to relative: https://github.com/lumeland/lume/blob/master/plugins/relative_urls.js
You only have to import to your _config.js
file:
import relative from "https://raw.githubusercontent.com/lumeland/lume/master/plugins/relative_urls.js";
site.use(relative())
I have tested it and seems to work fine. Could you check it?
from lume.
It works perfectly. Thanks! :)
from lume.
Related Issues (20)
- Support for removal of trailing slash in URL HOT 2
- Plugin Nav: Cannot access 'item' before initialization HOT 3
- Minify <style> CSS from UnoCSS, when using `cssFile: false` HOT 2
- Use local version of Decap CMS script instead of unpkg.com HOT 2
- Search plugin seems to be missing pages generated by the multilanguage plugin HOT 6
- .well-known support HOT 3
- Filter Pages plugin removes asset files (arguably unexpected -- documentation issue?) HOT 2
- page does not refresh when _components/XXX.tsx is modified HOT 6
- esbuild plugin: timeout after 10 second on `deno task build` HOT 6
- Question: how to support both rendering .html from a file and also copying the raw file HOT 1
- esbuild: `.ts` imports aren't transformed into `.js` HOT 4
- `deno task lume` fails directly after init HOT 2
- Add image support in feeds. HOT 1
- Can't loop through search.pages() using Liquid HOT 2
- Add support for author in the feed plugin
- Lume failse to build/serve with atypical Linux directory structure. HOT 6
- Better path naming convension HOT 8
- Lume serve: expected to respect ServerOptions for location HOT 2
- @std/log not found in registry-staging.deno.com HOT 2
- lume().copy() is a no-op when lume({src: "docs" }) is set HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lume.