marinaaisa / nuxt-markdown-blog-starter Goto Github PK
View Code? Open in Web Editor NEWNuxt + Markdown blog starter
Home Page: https://nuxt-markdown-blog-starter.netlify.com/
License: MIT License
Nuxt + Markdown blog starter
Home Page: https://nuxt-markdown-blog-starter.netlify.com/
License: MIT License
How to change URL Structure For Example
http://localhost:3000/blog/bacon-ipsum/
to http://localhost:3000/bacon-ipsum/
I realized that the blog didn't have heading anchors, so I thought it'll be a good idea to add to the example.
The markdown-it-anchor plugin can be used.
In nuxt.config.js
, add:
import mia from 'markdown-it-anchor';
...
md.use(mia, {
permalink: true,
});
...
export default {
...
router: {
scrollBehavior: async (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
}
const findEl = (hash, x = 0) => {
return (
document.querySelector(hash) ||
new Promise((resolve) => {
if (x > 50) {
return resolve(document.querySelector('#app'));
}
setTimeout(() => {
resolve(findEl(hash, ++x || 1));
}, 100);
})
);
};
if (to.hash) {
const el = await findEl(to.hash);
if ('scrollBehavior' in document.documentElement.style) {
return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' });
} else {
return window.scrollTo(0, el.offsetTop);
}
}
return { x: 0, y: 0 };
}
}
};
Anchors seem to be broken in Nuxt, so you need to add the scrollBehavior
function. Check this issue: #5359
Another reason why this might be a good idea to add is because anchors don't work in Nuxt. This may help beginners.
Apart from this, I'd also like to thank you for creating this example! It's perfect!
Awesome work with this! The way you're handling everything is pretty straight forward and works great, so thanks for sharing.
I'm running into an issue though: What if you have multiple post types, like "blog" and "projects" and want to load both in the same page? I can't figure it out.
Here's what I've tried (that doesn't work):
import blog from "~/pages/blog/list.js";
import projects from "~/pages/projects/list.js";
export default {
async asyncData({ app }) {
async function asyncImportBlog(postName) {
const wholeMD = await import(`~/pages/blog/${postName}.md`);
return wholeMD.attributes;
}
async function asyncImportProjects(projectName) {
const wholeMD = await import(`~/pages/projects/${projectName}.md`);
return wholeMD.attributes;
}
return Promise.all([
blog.map(post => asyncImportBlog(post)),
projects.map(post => asyncImportProjects(post))
]).then(res => {
return {
blog: res[0],
projects: res[1]
};
});
},
And here's a CodeSandbox with that running: https://codesandbox.io/s/nuxt-markdown-blog-starter-g83c5
I'm trying to import the markdown files into the main index page. Any ideas?
It's possible to do this with the markdown plugin. How would you go about implementing this? Do we have to make a Vue component for each blog post?
In the example they gave, you are required to make the component extend from the markdown file like this:
<script>
import readme from "../../README.md"
import NpmOrYarn from "./NpmOrYarn.vue" // <-- including this component in markdown
export default {
extends: readme.vue.component,
components: { NpmOrYarn }
}
</script>
For me
node -v
v12.6.0
npm -v
6.10.3
Installing packages finished with error.
npm install
> [email protected] install /home/daniel/pro/nuxt-markdown-blog-starter/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-72_binding.node":
HTTP error 404 Not Found
Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.
export HTTP_PROXY=http://example.com:1234
or configure npm proxy via
npm config set proxy http://example.com:8080
> [email protected] install /home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-linux-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=12.6.0 runtime=node arch=x64 libc= platform=linux)
make: Entering directory '/home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp/build'
TOUCH Release/obj.target/libvips-cpp.stamp
CXX(target) Release/obj.target/sharp/src/common.o
In file included from ../src/common.cc:27:0:
../src/common.h:80:20: error: ‘Handle’ is not a member of ‘v8’
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
^~~~~~
../src/common.h:80:37: error: expected primary-expression before ‘>’ token
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
^
../src/common.h:80:39: error: ‘obj’ was not declared in this scope
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
^~~
../src/common.h:80:56: error: expected primary-expression before ‘attr’
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
^~~~
../src/common.h:80:60: error: expression list treated as compound expression in initializer [-fpermissive]
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
^
../src/common.h:81:29: error: ‘Handle’ is not a member of ‘v8’
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
^~~~~~
../src/common.h:81:46: error: expected primary-expression before ‘>’ token
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
^
../src/common.h:81:48: error: ‘obj’ was not declared in this scope
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
^~~
../src/common.h:81:65: error: expected primary-expression before ‘attr’
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
^~~~
../src/common.h:82:38: error: ‘Handle’ is not a member of ‘v8’
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
^~~~~~
../src/common.h:82:55: error: expected primary-expression before ‘>’ token
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
^
../src/common.h:82:57: error: ‘obj’ was not declared in this scope
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
^~~
../src/common.h:82:74: error: expected primary-expression before ‘attr’
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
^~~~
../src/common.h:83:48: error: ‘Handle’ is not a member of ‘v8’
template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.h:83:65: error: expected primary-expression before ‘>’ token
template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.h:83:67: error: ‘obj’ was not declared in this scope
template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
^~~
../src/common.h:83:84: error: expected primary-expression before ‘attr’
template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
^~~~
../src/common.h:83:37: warning: variable templates only available with -std=c++14 or -std=gnu++14
template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.h:83:90: error: expected ‘;’ before ‘{’ token
template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.h:86:37: error: ‘Handle’ is not a member of ‘v8’
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.h:86:54: error: expected primary-expression before ‘>’ token
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.h:86:56: error: ‘obj’ was not declared in this scope
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^~~
../src/common.h:86:73: error: expected primary-expression before ‘attr’
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^~~~
../src/common.h:86:26: warning: variable templates only available with -std=c++14 or -std=gnu++14
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.h:86:79: error: expected ‘;’ before ‘{’ token
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.h:89:37: error: ‘Handle’ is not a member of ‘v8’
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
^~~~~~
../src/common.h:89:54: error: expected primary-expression before ‘>’ token
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
^
../src/common.h:89:56: error: ‘obj’ was not declared in this scope
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
^~~
../src/common.h:89:61: error: expected primary-expression before ‘int’
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
^~~
../src/common.h:86:26: warning: variable templates only available with -std=c++14 or -std=gnu++14
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.h:89:71: error: expected ‘;’ before ‘{’ token
template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
^
../src/common.h:95:9: error: ‘Handle’ is not a member of ‘v8’
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^~~~~~
../src/common.h:95:26: error: expected primary-expression before ‘>’ token
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^
../src/common.h:95:28: error: ‘input’ was not declared in this scope
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^~~~~
../src/common.h:95:28: note: suggested alternative: ‘ino_t’
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^~~~~
ino_t
../src/common.h:95:70: error: expected primary-expression before ‘&’ token
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^
../src/common.h:95:71: error: ‘buffersToPersist’ was not declared in this scope
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^~~~~~~~~~~~~~~~
../src/common.h:95:87: error: expression list treated as compound expression in initializer [-fpermissive]
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
^
../src/common.cc:34:20: error: redefinition of ‘bool sharp::HasAttr’
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:80:8: note: ‘bool sharp::HasAttr’ previously defined here
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
^~~~~~~
../src/common.cc:34:20: error: ‘Handle’ is not a member of ‘v8’
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.cc:34:37: error: expected primary-expression before ‘>’ token
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.cc:34:39: error: ‘obj’ was not declared in this scope
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
^~~
../src/common.cc:34:56: error: expected primary-expression before ‘attr’
bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
^~~~
../src/common.cc:37:29: error: redefinition of ‘std::string sharp::AttrAsStr’
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:81:15: note: ‘std::string sharp::AttrAsStr’ previously declared here
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
^~~~~~~~~
../src/common.cc:37:29: error: ‘Handle’ is not a member of ‘v8’
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.cc:37:46: error: expected primary-expression before ‘>’ token
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.cc:37:48: error: ‘obj’ was not declared in this scope
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
^~~
../src/common.cc:37:65: error: expected primary-expression before ‘attr’
std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
^~~~
../src/common.cc:40:38: error: redefinition of ‘std::vector<double> sharp::AttrAsRgba’
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:82:23: note: ‘std::vector<double> sharp::AttrAsRgba’ previously declared here
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
^~~~~~~~~~
../src/common.cc:40:38: error: ‘Handle’ is not a member of ‘v8’
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
^~~~~~
../src/common.cc:40:55: error: expected primary-expression before ‘>’ token
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
^
../src/common.cc:40:57: error: ‘obj’ was not declared in this scope
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
^~~
../src/common.cc:40:74: error: expected primary-expression before ‘attr’
std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
^~~~
../src/common.cc:51:9: error: redefinition of ‘sharp::InputDescriptor* sharp::CreateInputDescriptor’
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:94:20: note: ‘sharp::InputDescriptor* sharp::CreateInputDescriptor’ previously defined here
InputDescriptor* CreateInputDescriptor(
^~~~~~~~~~~~~~~~~~~~~
../src/common.cc:51:9: error: ‘Handle’ is not a member of ‘v8’
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^~~~~~
../src/common.cc:51:26: error: expected primary-expression before ‘>’ token
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^
../src/common.cc:51:28: error: ‘input’ was not declared in this scope
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^~~~~
../src/common.cc:51:28: note: suggested alternative: ‘ino_t’
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^~~~~
ino_t
../src/common.cc:51:70: error: expected primary-expression before ‘&’ token
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^
../src/common.cc:51:71: error: ‘buffersToPersist’ was not declared in this scope
v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
^~~~~~~~~~~~~~~~
cc1plus: warning: unrecognized command line option ‘-Wno-cast-function-type’
sharp.target.mk:134: recipe for target 'Release/obj.target/sharp/src/common.o' failed
make: *** [Release/obj.target/sharp/src/common.o] Error 1
make: Leaving directory '/home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/home/daniel/.nvm/versions/node/v12.6.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:196:23)
gyp ERR! stack at ChildProcess.emit (events.js:203:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Linux 4.15.0-58-generic
gyp ERR! command "/home/daniel/.nvm/versions/node/v12.6.0/bin/node" "/home/daniel/.nvm/versions/node/v12.6.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp
gyp ERR! node -v v12.6.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/daniel/.npm/_logs/2019-08-20T18_54_54_385Z-debug.log
如题,自己也尝试做了一些修改,但是没成功。主要是遇到了这个问题,导致我无法在页面刷新时获得Cookie中的language来初始化设置语言 :
If the page is refreshed after switching the new language, the language displayed on the page will be changed back to the default language .
I also tried to make some modifications, but it was useless . Mainly because of this problem, I was unable to get the language in the Cookie to initialize the setting language when the page was refreshed:
求解惑,十万分感谢!
It would be very kind of you to help me!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.