Comments (20)
It would also be useful under such cases (blog post):
the yaml front matter of the README.md
would expected to be:
# README.md
---
avatar: ./path1/image.png # relative to README.md
background: ./path2/image.png
layout: Post
---
And the Post.vue
would be like:
<template>
<div>
<img :src="data.avatar">
<Content/>
<div>
</template>
from vuepress.
For now you can put it in .vuepress/public
and reference it using absolute paths.
from vuepress.
This would also allow us to add a particular image as meta data for SEO purposes.
# In an article/page
---
image: ./cover.jpg
---
// In a plugin
const image = $page.frontmatter.image
$page.frontmatter.meta.push({ name: 'og:image', content: image })
$page.frontmatter.meta.push({ name: 'twitter:image', content: image })
from vuepress.
I just started migrating from Hugo to Vuepress as I'm turning my previously 100% static site into a Vue SPA and have hit this stumbling block.
My layouts include images in certain locations such as a hero banner and others which are outside the scope of the <Content/>
so I can't put them in the markdown body of the page. I expected to be able to specify the images in the frontmatter.
I only want images that are actually referenced by a page (or style) to be included in the output and I want my images processed by webpack (resizing etc), so putting them in .vuepress/public
isn't an option.
from vuepress.
It works but it feels a little bit clunky. had some trouble figuring out how all the paths behave.
from vuepress.
For now you can put it in
.vuepress/public
and reference it using absolute paths.This is a good hack. But not a good solution I guess. 😞
Most headless CMS do it that way actually nowadays.
ForestryCMS is putting everything in the public path.
from vuepress.
I spent the weekend trying to get this functionality...
After MANY atempts, and a lot of time reading source code, I couldn't find a way to do this externally via plugin.
I had to write a webpack loader which parses the frontmatter and emits the file to the dist folder, and rewrites the frontmatter to the path of the asset.
The issue is that at the time of webpack bundling the frontmatter data is already loaded and it is being used by the client code. So the only way I found was to hackly duplicate the code there, I used the extendPageData
hook, (I'm not sure if this is available without @vuepress/blog).
fm-loader.js
const fs = require('fs');
const path = require('path');
const loaderUtils = require('loader-utils');
module.exports = function (source, map) {
const callback = this.async();
(async () => {
const {
resourcePath,
resourceQuery
} = this;
const options = loaderUtils.getOptions(this);
const requireRE = /require\((.+)\)/g;
source = source.replace(requireRE, (m, req) => {
req = req.replace(/["']/g, '');
let filePath = path.resolve(path.dirname(this.resourcePath), req);
const file = fs.readFileSync(filePath);
const filename = loaderUtils.interpolateName(this, `assets/img/${path.parse(filePath).name}.[hash:8]${path.extname(filePath)}`, {content: file});
this.emitFile(filename, file);
return filename;
});
source = source.replace(/Table/g, 'HAAAAAA');
return source;
})().then((res) => callback(undefined, res), (err) => callback(err));
};
add the loader like
config.module
.rule('foo-bar')
.test(/\.md$/)
// .before('images')
.use('custom-loader')
.loader(require.resolve('./myloader/loader'))
This module is used to modify pageCtx inside the extendPage(pageCtx) hook
const fs = require('fs')
const path = require('path')
const loaderUtils = require('loader-utils')
module.exports = function(pageCtx, ctx) {
const requireRE = /require\(["'](.+)["']\)/g
if (pageCtx.frontmatter.image) {
const r = requireRE.exec(pageCtx.frontmatter.image)
if (r) {
let requirePath = r[1]
let filePath = path.resolve(path.dirname(pageCtx._filePath), requirePath)
const file = fs.readFileSync(filePath)
const filename = loaderUtils.interpolateName(
this,
`assets/img/${path.parse(filePath).name}.[hash:8]${path.extname(filePath)}`,
{ content: file }
)
// this.emitFile(filename, file);
fs.writeFileSync(path.join(pageCtx._context.outDir, filename), file)
pageCtx.frontmatter.image = filename
}
}
}
from vuepress.
Do you mean to add a picture to the top of a specific page?
Another question, why do you need to specify an image path via frontmatter? Since frontmatter is always for this page's metadata. if you just want to show an image, you can directly use ![]()
where you want to.
from vuepress.
Another question, why do you need to specify an image path via frontmatter?
I want to use custom layouts @ulivz . I want to build something similar to a blog ( #36 ). Most of the functionality I need is already done via frontmatter properties. E.g. teaserText etc.
But I would also like to define images that I can access via the custom layout and use for e.g. background image for the header.
To create something similar like this: https://happy-css.com/talks/
Vuepress or a static site generator is a perfect fit for this kind of website :) I just need to define a few properties I can re-use.
If Vuepress homepage "features" would also include preview images, they would have to include that in frontmatter as well.
https://raw.githubusercontent.com/vuejs/vuepress/master/docs/README.md
from vuepress.
Also, when using base: '/repo-name/'
config option, the paths provided in docs seems to not work.
from vuepress.
@rafalolszewski94 please open a separate issue with more details. It doesn't help to just mention it here.
from vuepress.
Hello there!
how to make the css property - "background-img" can be set from the " front matter"??
from vuepress.
Hi mates, I've a workaround for SFC as Pages. I could not find a valid require URI for SFC inside .vuepress/theme
created() {
this.allProjects = this.$site.pages
.filter(page => page.frontmatter.isProject)
.map(page => {
let thumb = null;
if (page.frontmatter.Thumb) {
let base = page.path.replace('/Projekte', '.');
if (base.endsWith('.html')) {
base = base.split('/').slice(0, -1).join('/') + '/';
}
// Works only with '' + ... dont know why
page.frontmatter.Thumb = require('' + base + page.frontmatter.Thumb);
}
});
}
I also stumbled about #1110
from vuepress.
Hello there!
how to make the css property - "background-img" can be set from the " front matter"??
<div :style="{ backgroundImg: $frontmatter.avatar }">
from vuepress.
has any update?
from vuepress.
Im having the same problem with the frontmatter.
from vuepress.
We hit the same problem. We want to use urls in the frontmatter for use in custom components like image sliders. Is there any workaround for this except putting assets in the public folder?
The use of the public folder is problematic for us for the following reasons
- the typical maintainer should have no access to the hidden public folder
- most images are localized and should be near their corresponding markdown pages
from vuepress.
For now you can put it in
.vuepress/public
and reference it using absolute paths.
This is a good hack. But not a good solution I guess. 😞
from vuepress.
I think we should have a way of using loaders in the frontmatter, like:
---
title: Lorem Ipsum
thumbnail: require('./thumb.jpg')
asset: require('./asset.ext')
---
# content
That way we can keep all the assets inside the post directory, and not have it scattered around, and we can have the benefits of loaders like image optimization, etc...
Those assets would become available to pages like, rendering a list with a thumbnail, like:
<li v-for="post in posts">
<img :src="post.thumbnail"> {{post.title}}
from vuepress.
Is there any way I could add a rule that I can postProcess all the *.html files being emited?
I tried creating many rules, but it seems that the html files are not being emitted by webpack and are being copied using fs or something similar.
from vuepress.
Related Issues (20)
- -
- Uncaught (in promise) Error: pageData() is called without provider. HOT 2
- Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
- copy code 无法在微信H5中使用
- 迁移@vuepress/client到vuepress/client导致三方插件未适配新版本的全部无法使用
- Emoji link has been changed.
- The auto-sidebar config can not generate multi first-level headings but only one.
- VuePress compilation error HOT 4
- The home page repeat render twice HOT 2
- How can I get md data in my vue components?
- module.experts support footer includes
- The documentation should start with a tutorial that covers most use cases
- 我需要自定义 webSocketURL HOT 2
- [mobile bug] Search bar causes content bleed
- [bug] Incorrect next and previous anchoring HOT 2
- Google analytics plugin is not working with Google Analytics 4 HOT 1
- The deployed web didn't change at all and suddenly couldn't be built
- Cant use tooltip help
- SyntaxError: The requested module 'node:events' does not provide an export named 'addAbortListener' HOT 3
- Using vuepress1.9.10 in an existing project in vue2.6.6, the console reports an error: Cannot create property 'top' on boolean 'true'
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 vuepress.