Update html file content

Question

I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?

My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:

|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc

|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta

When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.

I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.

I think your question may be to broad for this site, when it actually is "what is an efficient way to create a html page from my input format". But I am not sure if I am just missing the concrete question or problem you're having. The QA format here is more for concrete questions like "When I do so and so, why isn't the last link included in the generated html?" and similar questions which can have an clear answer like "your loop runs to size-1 instead of size". — allo, Mar 29 '18 at 14:14

marcel.js · Answer 1 · 2018-03-29T13:59:55.317

You don't have to update the index.html file. You can create dynamic content.

You can use PHP:

You can learn it here: https://www.w3schools.com/php/default.asp
And here is how to read a file http://php.net/manual/en/function.fread.php

Or if you cant use PHP you can use Javascript:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
  $.ajax({
    url:'your-config-file.xt',
    success: function (data){
      console.log(data); //this is the config file. just for loop it and modify the dom
    }
  });
});
</script>

But your config file must contains the string how the links should be shown.

For example:

|catergory one
yt: https://www.youtube.com

Update html file content

1 Answers1