I am using vuepress to build a personal notes.
I put some html, javascript demo files inside .vuepress/public/demo/javascript/01/.
When I writing my note using in .md file, I create a link by [demo](/demo/javascript/01/)
this seems not work well cause such relative path, vuepress will treat it as a .md file and try to look for the path and result as 404
(Although do a refresh on the 404 page, it works well..)
What is the better way to link files under public which I can use in .md and make vuepress treat it as normal external link without hardcoding the domain in the link.
here is the code
https://gitlab.com/changsijay/vuepress01
and here is the deployment result:
https://changsijay.gitlab.io/vuepress01/
I would move your code from index.html to a .vue-file and add the vue file to your index.html (except, I would name it README.md, since that is what VuePress looks for in every sub-directory) with the basic vue syntax <IndexCode />.
Then just link with [demo](/demo/javascript/01/) and it should automatically load the README.md
If for some reason you want to use the index.html, you can always link it with [demo](/demo/javascript/01/index.html)
Related
I am using laravel 5.3 with angular 2 for my project and using webpack for compilation of the assets including js and css.
I am trying to use same font awesome and bootstrap for the client and admin area.
I have the folder structure of laravel with everything inside js directory.
|-public
|-js
|-assets
|-fontawesome-webfonts.woff
|-image1.png
|-vendor.bundle.js
|-polyfill.bundle.js
For Angular 2 routes we need to add the base href to the main template which i have also added.
<base href="/">
Admin url is localhost:8000/admin
and user url is localhost:8000
I have included the bundles like
{!! Html::script('js/vendor.bundle.js') !!}
and the vendor have imported the less files as:
vendor.bundle.js
import 'admin-lte/build/less/AdminLTE.less';
import 'font-awesome/less/font-awesome.less';
The main issue is that when i use the same vendor.bundle.js to both user and admin pages the user page works fine since it loads the fonts from js/assets/fontawesome-webfonts.woff but when i load the admin page it couldn't load the fonts as it searches from admin/js/assets/fontawesome-webfonts.woff which is not the correct directory.
How could i make Angular search into js/assets/fontawesome-webfonts.woff for both url?
The issue is displayed in the image too.
I just figured it out by myself using the url-loader webpack plugin.
You should leave the base href to as it is and configure the assets.
I just needed to add a new test only for the fonts
{
test: /\.(svg|woff|woff2|ttf|eot)$/,
loader: 'url-loader?limit=10000&name=assets/[hash].[ext]&publicPath=/js/'
}
You need to specify the publicPath and add the other directories to name.
That's all. Hope it will save someone's precious time.
Note: don't forget the '/' at the front of the public path
It appears that this question is asked often and answered the same way: store the css files outside of the application directory and then use base_url() . "path/to/file".
However, I want to keep my css files and js files inside my application/views/ directory, because the views directory is effectively the html space, and css and js belong to that space (in my opinion).
Below is the structure that I wish for:
root
- application
-- views
--- assets
---- css
---- js
- system
When I attempt to load css files from within this directory structure, I get a NetworkError: 403 Forbidden, which makes sense because of CI's framework protocol.
But I am guessing that there is a way.
Publicly reachable files like CSSes images and JS files need to be in public directory next to index.php file. So hierarchy would be:
root
- application
- system
- assets
-- css
-- js
You can aproach to those files with hard coded
Link
or using (loaded) url helper with it's function base_url() or site_url(). Don't forget to fill correct URL into application config file.
Link
Docs.
Hey i'm going to politely push back on this idea :-)
Your application and system folders should be ABOVE the root, so they are not publicly accessible. (Unless this is a really simple application and you are not doing any database interaction, etc). They should not be considered part of the HTML or public space because you do not want the public accessing them. Set the path for them once in the main index.php file and its done.
Also i suggest renaming your system and application folders, like "system302". Over the long term it makes versioning and upgrading (and reverting if needed) much easier.
I'm building a website using Middleman. There are source files placed like the following.
source/index.html.md
source/errors/404.html
source/docs/foo.html.md
source/docs/bar.html.md
By default, when I build static html files, the generated files are placed following to the original directory structure (with directory indexes).
build/index.html
build/errors/404/index.html
build/docs/foo/index.html
build/docs/bar/index.html
However, I want all html files to be served directly under /, so that they can be accessed like http://example.com/foo/ and http://example.com/404/.
How do you change the paths for generated html files?
You can use proxies to create duplicate pages, and then ignore the original pages.
https://middlemanapp.com/basics/dynamic-pages/
But the simplest way is, of course, to adjust the source structure to match the desired structure.
I think this part of Middleman doc could help you .
All you need is to activate directory indexes and configure it properly, and it should work.
I'm building a Jekyll site made of static pages (e.g. nothing in the _posts directory), and rather than keeping each page in the root directory, I'd like to keep it in a custom pages directory (for organization's sake).
However, I don't want this structure reflected in my URLs, so in my _config.yml I have:
permalink: /:title
With this configuration, my desired URL would be site.com/pagename, but I don't get a rendered page unless I hit site.com/pages/pagename.html.
Could anyone help me configure my build to achieve the former? Thanks!
Have you tried adding YAML Front Matter to these static pages? For example:
---
title: "pagetitle"
---
This way, Jekyll should recognize it as a Page (instead of a StaticPage) and would use your permalink configuration.
These are static pages so the entry in _config.yml is going to be ignored.
From the sounds of it you will need to create a URL rewrite rule. How to do this will depend on the web server that is servering up the pages.
I've seen this question come up a lot;
How do I put images on my Meteor website?
How do I host "standard" web content with Meteor?
I tried adding a <img src="img/myimage.png"> tag but no image shows!
How can I host some files on a Meteor site?
Put the content in a folder named "public" in your project root.
You do not need to include /public in your URLs.
Any additional folder structure within public is supported.
NodeJS routing plugins are not required, as other answers have supplied.
Place external library's javascript files in /lib. They will be automatically included.
Explanation
In Meteor, you can host "standard" web content by creating a "public" directory in the root of your project. Any images, files, or data you place in this folder will be served as normal by the NodeJS server, as if they were in the root of the server.
Example
Structure within project: /public/test/img.png
Corresponding image URL: /test/img.png
Example HTML tag: <img src="/test/img.png"/>
Create a new folder public inside the project directory. Add a new folder img (or any other name of your choice) inside the public folder. Copy all the images that you require to be added in to your HTML into this folder.
Now you can use it like - <img src="img/myimage.png">
You don't need to include /public in the in the URL.