javascript - Is it possible to automatically have the last updated date on my website changed to the current date whenever I pus

admin管理员组

文章数量:1291517

I would like to have the last updated date on my website, but I want the date information to be automatically updated every time I push my changes to GitHub, rather than remembering to manually change it.

Right now my site only uses HTML, CSS, and JavaScript. I don't know if the problem can be solved using these technologies, or if it's possible for a Git mit or push to trigger something.

UPDATE:

Solved by @k3llydev using GitHub API. Codepen example with updates to achieve what I'm looking for.

const desiredRepo = "seachel.github.io";
const dateTagClass = ".date";

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
  if (this.readyState == 4 && this.status == 200)
  {
    let repos = JSON.parse(this.responseText);

    repos.forEach((repo)=>{
      if (repo.name == desiredRepo)
      {
        var lastUpdated = new Date(repo.updated_at);
        var day = lastUpdated.getUTCDate();
        var month = lastUpdated.getUTCMonth();
        var year = lastUpdated.getUTCFullYear();
        $(dateTagClass).text(`Last updated: ${year}-${month}-${day}`);
      }
    });
  }
};
xhttp.open("GET", "", true);
xhttp.send();

I would like to have the last updated date on my website, but I want the date information to be automatically updated every time I push my changes to GitHub, rather than remembering to manually change it.

Right now my site only uses HTML, CSS, and JavaScript. I don't know if the problem can be solved using these technologies, or if it's possible for a Git mit or push to trigger something.

UPDATE:

Solved by @k3llydev using GitHub API. Codepen example with updates to achieve what I'm looking for.

const desiredRepo = "seachel.github.io";
const dateTagClass = ".date";

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
  if (this.readyState == 4 && this.status == 200)
  {
    let repos = JSON.parse(this.responseText);

    repos.forEach((repo)=>{
      if (repo.name == desiredRepo)
      {
        var lastUpdated = new Date(repo.updated_at);
        var day = lastUpdated.getUTCDate();
        var month = lastUpdated.getUTCMonth();
        var year = lastUpdated.getUTCFullYear();
        $(dateTagClass).text(`Last updated: ${year}-${month}-${day}`);
      }
    });
  }
};
xhttp.open("GET", "https://api.github./users/seachel/repos", true);
xhttp.send();

• javascript
• html
• css
• git

Share Improve this question Follow edited May 23, 2019 at 22:15 lady.corvus asked May 23, 2019 at 16:51 lady.corvuslady.corvus 10577 bronze badges 4

• How do you deploy your site? – Arian Faurtosh Commented May 23, 2019 at 16:56
• 1 Maybe with connecting to the Github API? With an ajax call? – l-portet Commented May 23, 2019 at 17:13
• @ArianFaurtosh I use GitHub Pages – lady.corvus Commented May 23, 2019 at 22:21
• 1 @l-portet that worked! I didn't really know how to use it but the answer below provided guidance. – lady.corvus Commented May 23, 2019 at 22:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The quick answer is yes. It is possible. You can view how to use the official GitHub API and create an AJAX request with vanilla JavaScript to this API, then all you have left to do is to handle which data you want.

How?

Look at an example, I am calling with JavaScript trough AJAX the GitHub API and specifying that I want all repos for user k3llydev. Then I just print the repository name and its last update time.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let repos = JSON.parse(this.responseText);
    document.write("<h3>k3llydev github repositories w/last updated</h3>");
    repos.forEach((repo)=>{
      document.write(`<code>${repo.name}</code>: <em>${new Date(repo.updated_at)}</em><br>`);
    });
  }
};
xhttp.open("GET", "https://api.github./users/k3llydev/repos", true);
xhttp.send();

Note: If you use the API like this, the repo last update time that you want to implement on your website will update automatically, since every time your website is loaded, the GitHub API is called and will retrieve newer and updated data about your public repos.

The JS answer is nice, but you can also do this with a Bash script in the root of your site:

#!/bin/bash

git_last_mit_date="$(git log -1 --format=%cd)"
echo "Git last mit date: $git_last_mit_date"

html_files="$(find . -type f -name "*.html")"

for file in $html_files; do 
  echo "Inserting date into: $file" 
  sed -i "" "s|<span id=\"git-last-mit-date\">*</span>|<span id=\"git-last-mit-date\">$git_last_mit_date</span>|g" "$file"
done 

Then have this <span> element in pages you want it to update:

<span id="git-last-mit-date"></span>

本文标签：