Using an HTML template across multiple subdirectories - html

I run a website for my photography where I have a stories page (http://www.traumantic.com/stories.htm) that is a long list of choices that lead to a sub folder and a gallery of images for that session.
I have an index.htm file in each of those folders that displays the gallery chosen.
I am trying to develop a new format for my pages, and putting it in place means replacing dozens of index.htm files and editing each one for that new format. A boatload of work.
I have noted that a lot of news sites seems to have a method of using a single template for the main body of the page and the elements of the news story are pulled in from another source.
I figured I could do this with XML like I did with my galleries, but I am lost.
I tried creating an XML file in a couple of text folders and then reading that form an HTM file two levels up. Didn't work.
Currently when you click on a link on my stories page, it opens the index.htm file in a sub-folder.
What I want to happen is this.
Clicking on a choice on my stories page launches an html template that reads the details from the folder.
The one html template would be used for all of the different story folders below. Making it far easier to modify the look of my web site quickly.
I'd rather put a ton a of work into designing this system that doing a mass replace and edit project on hundreds of files.
I hope this makes sense to some of you and that you can guide me to some study topics that will help me learn how to do this.
I am seeking advice on places where I can see example of this process.

The simplest option is to use an iframe
https://www.w3schools.com/tags/tag_iframe.asp
<iframe src="/path/to/file.html"></iframe>
Searching "html include" will yield a few guides that have various JavaScript implementations. (e.g., https://www.w3schools.com/howto/howto_html_include.asp)
If you're able to run php, you could use include
https://www.w3schools.com/php/php_includes.asp
But at that point, you might want to consider installing some sort of template engine like twig https://twig.symfony.com/doc/2.x/intro.html

Related

Changing html content for local application only

I want to organize my notes (on scientific articles).
I want to be able save text and images notes for each article
Save the pdf file
Organize it into a hierarchy with a document somewhere with a content table containing the hierarchy of thematics and link to all articles
I want to be able to move fast between articles (open note on an article fast)
Add tags to filter the articles
Add an importance level to filter articles
There is many softawre for that kind of thing but it's often difficult to combine pdf file and notes containing text and images and hierarchy and tags
And they are often not really customizable.
The best solution I can think of is to use html files to put the article contents, and other html files with links to the articles pages.
I currently use a python script that I call from command line with pdf download link and article name as argument
The script creates an empty html page for the article at the good place in the hierarchy, add link in the table of content html page, and the article link with his tags in a seperate file
What I would like to do is to have a button in my table of content html page which would allow me to add an article and so add and modify some files.
t's seems that a very specific case because I'm using web like technologies only to organize local files.
But I don't know how to do that and I don't know where to look. Could it be done with javascript or php ? Or may be use something like python dash to display the html page and run some python script in the background
Sorry for my english I'm not a native speaker
I found some app on github that did almost what I want: trilium and pervane
But I didn't use them because they were to complicated for me to customize them to add new functionalities
I finally find a solution by using flask to render my local notes that are stores as html.

How can I access/edit the HTML file on Shopify?

I know this is probably a very basic/obvious thing, but I'm new to Shopify and trying to assist a client while a colleague is on vacation. I know what I need to change and how to change it, but not how to access it. When I go to Online Store and click Edit Code, I see all the Liquid, JSON, and even CSS files, but I can't find the HTML file I need to edit, nor can I find any of the HTML I need to edit within the theme.liquid file. The resources I'm finding are all either outdated (there is no "Edit HTML/CSS" option on the dropdown anymore) or unhelpful (like this). I can see the HTML in the console and upon clicking View Page Source, but I don't know how to get to it through Shopify. I feel like I'm losing my mind because this HAS to be very simple and obvious. If someone could please tell me how to access and edit the HTML file on Shopify I would be VERY grateful!
The html files are the liquid files.
There are no actual HTML files since this is a Shopify theme.
Depending on your theme, your files are located in:
theme.liquid - here are the header and footer
templates/*.liquid - all liquid files here are the main templates for the different pages
sections/*.liquid - the files here are usually used on the homepage and other pages as well
snippets/*.liquid - these are the reusable code snippets
So depending on your changes you will need to go through these files and update them for the specific changes.
Please have in mind that these files may be used on multiply pages and if you change one of them there is a possibility that this will affect other pages as well.

Sitemap for site with few dynamic HTML files and many possible URLs

I'm nearing the end of my first web development project and I'm looking to build a sitemap for our website as part of Search Engine Optimalisation. If I understand correctly a sitemap, when done correctly, is a file that shows a content tree (similar to paths in windows explorer) to all the public pages of my website.
For the purpose of my question you're going to need some background information on the site and how it works. The site is about bird migration, a user enters the site on a homepage that holds a searchbox, he or she is able to search for a species of birds and if we have data on it the user is able to go to a seperate page with information on this bird. From there the user can access statistical data about this species. The page will look something like below, filled with content that we get from a database.
The URL will look something like http://domain.com/searchbird.html?bird=Sedge%20Warbler?lang=1 for the informational page, and http://domain.com/statistics.html?bird=Sedge%20Warbler?lang=1 for the statistical page.
Every bird species uses the same base HTML file (searchbird.html) that is filled with data based on the ?bird="" parameter. I have about four HTML files in my webroot (lets call them: index.html, searchbird.html, statistics.html, about.html).
So when I go to create a sitemap using some sort of sitemap generation tool, I get a sitemap that contains those 4 .html files, which is great! Yet I'm missing the 500 bird species that users are going to be able to find.
Is there a way for me to include every possible URL in the sitemap automatically, and how would I go about doing such a thing? I've used HTML, CSS and Javascript in the past. but I'm only a beginner. If an executable tool exists for this that'd be great, but my Google searches haven't been successful yet.
You have to generate the list of URLs for your existing pages.
So dig into your data source (database or whatever you use), find all existing bird species, and generate the two URLs per species.
Directory for users/bots
It would probably be a good idea (for visitors as well as for bots) to output these links on your website, too. Visitors would have two ways to find a species (search for it or browse the directory), and as most bots don’t use search functions, they wouldn’t be able to find the links on your site otherwise (they would have to use your sitemap, which not all bots do, or they would have to hope to find the links from some other external website).
(If you do this, you could also use a sitemap generator service; but it’s usually better do generate it yourself.)
URL design
By the way, you might want to consider changing your URL design to a more human-friendly one. Instead of
http://example.com/searchbird.html?bird=Sedge%20Warbler?lang=1
http://example.com/statistics.html?bird=Sedge%20Warbler?lang=1
you could use something like
http://example.com/en/birds/sedge-warbler
http://example.com/en/birds/sedge-warbler/statistics
where en is the language code for "English" (these are standardized, and users have a chance to understand them, contrary to lang=1), and where http://example.com/en/birds could lead to the page listing all species. For other languages, you would of course ideally translate "birds" and "statistics".
Changing the URL design is possible with URL rewriting.
U can use sitemap generator. U can use https://www.xml-sitemaps.com/. U only need put url index. That website will search all link and generate sitemap automatically.
If u use wordpress u can use plugin wordpress like https://wordpress.org/plugins/google-sitemap-generator/.
Hope that help

live content from html to html

I'm using UIWebView to display data from my organization data (publicize and legal), however, for instance, I would only want to pull specific data from the html file rather than pulling the whole URL. e.g. I want to pull the "News" section of the html and I want the user to only stay in that page, not enabling them to go into other parts of the website (e.g. home page, contact us) and allowing them to view the PDF article on the HTML file.
I've asked around and read up on DOM and screen scraping, but it seem that the data pulled are stored in a database instead.
Is there any way that I can pull just the HTML "News" section with the PDF URL into my customized HTML file and that it will be updated live (maybe every 30second it will refresh and pull information from the website so that the content and list of PDF are up to date)(e.g. added in 3new article into the main website, my customize HTML file will also refresh and pull information from website and update my article list)
If anyone can point to me a specific method that allow HTML to HTML data passing (live), that will be great and I can go do more research on it. Currently very lost and confuse as it is my first time doing this. Any help/feedback will be very much appreciated :)
EDIT: For example, google map or google search. I don't want to use the whole google webpage, just taking the important thing that i want like the search result or map display.
This will involve quite a lot of learning on your part - you'll have to learn HTML / the DOM / JavaScript and iOS/UIWebVIew.
Lets leave the live refresh part for now, I'll post another answer or edit to that later on.
That's not going to easy either (check out my earlier posting today on background execution issues that will affect you, unless the update is only to take place in the foreground
iOS Run Code Once a Day)
You will have to do something like this. And note that I've never tried this, nor seen posting of people who have on here, but in theory it should work, but there will be a lot of learning as I've said, and lots of trial and error. Its a big task when you're not familiar with these things.
1) Download the html page and load it in a UIWebView, but that UIWebView is hidden so the user's can't see it.
2) When the page has loaded its dom will be accessable.
3) You can use Javascript to access the DOM and look for the parts you want.
How you inject and run the Javascript in UIWebView can be answered in a separate question (this answer will get too long if all the exact details are included).
4) Remove the parts of the dom you are not interested in. Or use use events to make only those parts you are interested in appear, jQuery can probably help here.
5) Display the UIWebView
Alternatively the HTML could be saved to a file and string parsing could be used to search for the bits you are looking for and create a new text html file from it. I think this would get very messy, better to take advantage of the fact that UIWebView will parse the HTML page and create the dom for you.

Linking Menu Panel in Dreameaver for easy updating

I'm fairly new to Dreamweaver, I've been working on a website that contains a bunch of pages that need to be edited. Mainly, the menu/drop down menu tabs need to be updated with new links and or names/etc. Is there a way to link the menu bar with the rest of the pages so I don't have to manually edit each and every piece of code on every other page?
There are a couple of Dreamweaver specific ways (Templates and Library items), and a better way (server include).
Dreamweaver Templates:
This requires that you have all of your pages based on Dreamweaver templates and you have you menu in a non-editable region. Once you edit the menu in the template and save your template, Dreamweaver will ask if you want to update all the pages in the site. If you do so, then Dreamweaver will go through your site and update all pages based on the template and update the menu code in those pages. This method will require that you upload all of the changed files in order to see the new menu on all of your pages. For more on templates:
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7acda.html
Dreamweaver Library Items:
Library items are similar to templates in that there is a code block that you can update and when saved the update gets cascaded into every instance in the site. Library items are unique in that they are focused on smaller blocks of code that get added to your page. Again, as with Dreamweaver templates, if you make a change, you'll have to upload all of the changed files in order to see the changes on your site. For more on Dreamweaver library items:
http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7e49a.html
Server Include:
This option is "better" in that if you make a change to the include file, once you upload only that file, then all pages that reference the include file will automatically display the updated menu. How to implement this option will depend on the specific server language(s) you have available on your remote site. For example, PHP has at least 4 ways to include an external file (such as your menu): include, include_once, require and require_once.
If you search google or the search engine of your choice for the language name you have available plus include, you'll get a number of results of how to implement an include for your page.
With this option, you'll need to update all pages that have the menu to reference the include file and upload the changed files, but going forward, changes to the menu will only require uploading the include file in order to update your site.
One word of caution with includes is that you need to be careful with the paths in your include files, specifically if you have pages with the menu on it that are in multiple folders throughout your site. Search for relative and absolute paths for more info.