Say I have a large number of HTML and CSS files, and I need to re-organize their folder structure. Are there any shortcuts (in VS Code preferably) to changing the links to stylesheets and hypertext links that the HTML files contain?
Or would I have to do it all manually (restructure the folders and then manually copy each individual file path into it's respective point in each HTML file?)
If the links to the files are within HTML or any other file, VS Code offers feature called "find and replace"
First one is what you want to change, second one is to what you want to change it to.
Search menu > Replace. And then you can either select "replace" or "replace all".
https://code.visualstudio.com/docs/editor/codebasics
Related
I was wondering if there is a file format around where I can put (one or multiple) .css and (one or multiple) .html files, for example as a .zip (or similar) file AND your favourite browser can recognize it and opens it as a sort of static local "web page".
My use case would be to create html reports of some program execution, style it with a standardized css file and upload it on a cloud service, such that anyone with access can view it direcly in the browser.
I know a litte about html and css, but not enough to answer this question myself.
And "combine html and css" is not searchable on the web, so I'm asking you.
I'm not looking for a solution which bakes everything into one file.
I'm also not looking for an unzipped version of this (a folder), since that is not uploadable to most cloud storages I am aiming for.
Thank you.
AFAIK, there is no file format for that, but what you can do is create a folder in your htdocs or public folder and add all your .css and .html files in there. Then access it in localhost/yourfolder or if you are using a host http://yourdomain.com/yourfolder. For your HTML files to display the style correctly, they should be linked with the .css files or with the style inside each .html file between <style></style> tags in the <head> section.
You will see something like this, where you and others can preview and navigate through all HTML and CSS files.
Note: I've never done this on a host only on localhost, if you are using a host you will probably need to create permisions to access this folder, in that case contact your host so they can explain.
I have multiple language versions of my website from the root folder as
en-ca/*
fr-ca/*
en-us/*
etc.
I have created a _resources folder that contains css common to all sites.
I would like to copy the content of the _resources folder into en-ca/*, fr-ca/*, en-us/*, etc. at build time.
Hmmmm.... Are you sure you want to do that? That doesn't seem like a good idea.
If the CSS is identical across the different languages, why would you make the end-users download the same file again when switching to a different language, if they already have the same file cached in their browser?
It would be better to have the common CSS in a single place, and have your HTML templates reference that instead, and leverage the browser cache, etc.
Anyway, to answer your question, if you want to use pure Jekyll (without a plugin), you can create empty common.css files inside each language folder, and use the tag include_relative to copy the contents of the common.css to it.
Jekyll Includes / include_relative
https://jekyllrb.com/docs/includes/#including-files-relative-to-another-file
Alternatively, you can write a plugin that copies the file to the folders you want. In the answer below there's a small example of a plugin that renames files... You can adapt it to copy files instead:
https://stackoverflow.com/a/48600246/211672
I can use image to embed an image in my scribble document, and the render function will copy it to the target destination. Now, I would also like to include files with my document that is not an image, such as an MP3 or PDF file that can be downloaded.
Additionally, I can't just include the file in the source folder and link to it, because if I render the document into a different target folder, it does not get copied.
Finally, I know I can just create the target directory by hand, and paste the file there. Or I can modify whatever file I'm using to build my document to copy the file. This is not satisfying though because now I have to track the image in two places. The .scrbl source file, and either the target directory or the build file.
So, is there a way in scribble that I can include a non scribble (or image) file such as an MP3 or PDF such that the render function knows to grab it and include it with the document?
Although it is a bit of a kludge, you can combine image with hyperlink to get your desired result. You use the image function to get the render function to copy the file, and hyperlink to add a link to it. Your document will look something like:
Here is a #image{file.mp3}#hyperlink["file.mp3"]{file}.
This works because the image function also expects a list of extensions to try to embed, but this list defaults to the empty list, and such it won't embed the file, but only copy it into the destination. You can then use hyperlink to link to the now copied file.mp3 file.
You can combine this into one operation with the following function:
(define (embed-file file . content)
(list
(image file)
(apply hyperlink file content)))
And now you can use embed-file in your own document with:
Here is a #embed-file["file.mp3"]{file}.
(I should note that this idea came from Ben Lerner.)
I took over somebody's code base and they had solved this issue using the solution above/below mine provided by Leif Andersen. However, this caused problems when linking to files that were part of subfolders in the source directory. The file in question was moved to the root of the output directory, while the hyperlink did not correctly update. Instead, I found the following less hack-y solution.
You can make use of the link-resource structure of the scribble/html-properties module. This expects the path of the original file. You place this link-resource into a style struct of the scribble/core module. Finally, this style is passed as an argument to hyperlink.
Putting it all together, the embed-file function instead becomes
(define (embed-file file . content)
(apply hyperlink
file
content
#:style (style "place-resources-in-output-folder" ; name
(list (link-resource file)))))
Where the "place-resources-in-output-folder" is just a name I give to the style.
This ensures the files are both moved to the root output folder and correctly linked.
I'm using Doxygen to create html output.
I'd like to customize the output so that the index.html file could be more noticeable, since at the moment it is buried half way down a huge list of files in the html output folder.
For example, if it were moved up one directory to be outside of the 'bits and pieces' html files then it would be much more accessible for others who will be looking for it. However, I can't just ass a line of script to copy it to that location, since all of the links it has would break.
If I could configure Doxygen to have the index file go to a different location, or if you can think of another solution to my problem, I'd be grateful for your response.
Thanks
I would leave the documentation in its place and instead use the meta refresh option of the HTML language. Place a file, for instance called, "Documentation.html" in any folder you want with the following content
<meta http-equiv="REFRESH" content="0;URL=RELATIVE/PATH/TO/index.html">
As I mention in comments to the OP the easiest solution is probably to create a symbolic link or shortcut to the index.html file generated by doxygen, rather than trying to get doxygen to change the layout of it's output files. This symlink/shortcut can then be placed in the root directory of your project (or elsewhere), pointing to ./html/index/html, and named anything you like to make it obvious to your users what it is.
My html folder contains many html files automatically generated, linked and named by a program. Example: AbcXyzPage1.html, AbcXyzPage2.html, ..., AbcXyzPage100.html, etc.
What is the simplest way to make a particular html file (AbcXyzPage1.html), the equivalent of default.html? So that a user just need to type http://mysite.com/myfolder/ and has that particular page loaded.
Renaming that starting page is NOT an option because all other pages in the folder link to it.
I don't want to use the meta refresh tag.
Add a file named .htaccess to myfolder/ with the following content:
DirectoryIndex AbcXyzPage1.html
If server is Linux, you can link (actually soft link is OK, too).
ln AbcXyzPage1.html index.html
Now you have created index.html - the standard default. Any changes to AbcXyzPage1 will always be "seen" in index.html (since they are the same file).