“操纵” html文件（服务器端），并将其内容插入html主页（*无* PHP）

Question

Context : I'm working on a site that runs on my university's server (IIS, not Apache), no way to use PHP.

I want the site to be so simple that people with very little HTML/CSS/js knowledge can put new content when I'll be done with it. I'm a grad student in health sciences and I've learned HTML, CSS, etc. by myself since a few years (so I'm definitely not a pro), so pardon me if my question is a little naive.

I'd really need some script/tool that would allow me to :

• Get content from an external file (blog post) on the server (let's say a list of ".html" files located in a folder on the server, let's say the folder "/blog-posts/", containing a bunch of files named "jan-15.html", "feb-15.html", etc.)
• Pick the last 4 files (4 most recent)
• Insert this content at a precise point in a html file
• (Optional, but it would really be nice) Pull the date the file was last edited, put it in a string and insert said string before the blog post, in the home page

So :

• Do anyone know if anything like this already exists ?
• If not, do you guys think it's possible with some js/jQuery to "manipulate" external files like that ?
• If it's possible, any hints how :) ?

Thanks a million times, I know I'm asking a lot, but I've been searching for a viable solution for this for the last few months... It's my first time writing here but I've been an avid reader since a very long time.

Have a great day !

Answer 1

You can store a simple blog configuration as a JSON object and update it as you add new posts. Let's say you have the files jan.html and feb.html in your blog-posts folder.

Now in the main folder, create a file content.json as follows this:

{
    "posts": [
        { "uri": "feb.html", "date": "2/12/15" },
        { "uri": "jan.html", "date": "1/3/15" }
    ]
}

Now you can get the blog content with AJAX requests from JavaScript. Example:

 <script> function Init(posts) { var e = document.getElementById('content'); var s = ''; posts.forEach(function(post) { console.log(post.content); s += '<div><h2>Date: ' + post.date + '</h2><p>' + post.content + '</p></div>'; }); e.innerHTML = s; } function LoadContent(config) { var remain = config.posts.length; var posts = []; config.posts.forEach(function(post) { var req = new XMLHttpRequest(); req.open('GET', 'blog-posts/' + post.uri, true); req.onload = function() { remain--; posts.push({ content: req.responseText, date: post.date }); if(remain === 0) { Init(posts); } }; req.send(null); }); } function LoadConfig() { var req = new XMLHttpRequest(); req.open('GET', 'content.json', true); req.onload = function() { LoadContent(JSON.parse(req.responseText)); }; req.send(null); } window.addEventListener('load', LoadConfig); </script> <div id="content"></div>