xkcd api，如何阅读说明？

Question

xkcd漫画有一个json API，可读取有关一个特殊漫画/条带的元数据。

例如要获取json数据，我可以使用： https://xkcd.com/json.html

https://xkcd.com/2173/info.0.json

但是它不包含xkcd的说明。可以在另一页上找到它：

https://www.explainxkcd.com/wiki/index.php?title=2173:_Trainea_Neural_Net&oldid=176507

我如何也可以通过api获得解释，这可能吗？ （我不想使用curl刮擦整个HTML页面。）

Answer 1

如果经过解释，则表示当您将鼠标悬停在漫画上时出现的文本，称为alt文本。在返回的JSON中可用：

{
    "month": "7",
    "num": 2173,
    "link": "",
    "year": "2019",
    "news": "",
    "safe_title": "Trained a Neural Net",
    "transcript": "",
    "alt": "It also works for anything you teach someone else to do. \"Oh yeah, I trained a pair of neural nets, Emily and Kevin, to respond to support tickets.\"",
    "img": "https://imgs.xkcd.com/comics/trained_a_neural_net.png",
    "title": "Trained a Neural Net",
    "day": "8"
}

如果您的意思是来自explainxkcd.com的说明，则它是不同的API。它使用mediawiki平台（与Wikipedia相同）。您可以在他们的网站including an example on how to parse text上找到API文档。

最终结果是此URL：https://www.explainxkcd.com/wiki/api.php?action=parse&page=2172:_Lunar_Cycles&prop=wikitext&sectiontitle=Explanation&format=json

示例输出：

{
    "parse": {
        "title": "2172: Lunar Cycles",
        "pageid": 22099,
        "wikitext": {
            "*": "{{comic\n| number    = 2172\n| date      = July 5, 2019\n| title     = Lunar Cycles\n| image     = lunar_cycles.png\n| titletext = The Antikythera mechanism had a whole set of gears specifically to track the cyclic popularity of skinny jeans and low-rise waists.\n}}\n\n==Explanation==\n{{incomplete|Created by a MOONBOT. Joke cycle explanations need to be expanded and title text needs to be explained. Do NOT delete this tag too soon.}}\n\nThis comic shows a mixture of real, scientific lunar cycles and cycles that are comedic or fictional in nature.\n\n*'''Nodal precession:''' The Moon's orbital plane is tilted slightly compared to the Earth's orbital plane around the sun (the {{w|ecliptic}}). This tilt is why we don't constantly see eclipses; most of the time, the Moon's orbital plane is tilted higher or lower than the Sun, so they generally don't cross each other. The two points at which these planes ''do'' cross are called {{w|lunar nodes}}. {{w|Nodal precession}} is the gradual rotation of these nodes over time, which for the Moon follows an 18.6 year cycle.\n\n*'''Apsidal precession:''' All orbits have two points where the orbiting body is either closest to, or furthest away from, the thing they are orbiting. These points are called {{w|apsides}}, and the imaginary line between them is called the ''line of apsides''. {{w|Apsidal precession}} is the gradual rotation of this line over time, which occurs in cycles of around 8.9 years for the Moon.\n\n*'''Phase:''' {{w|Lunar phase}} describes the change in shape of the sunlit side of the Moon as viewed from the Earth's surface, which is caused by the changing angle between Moon and Sun as the Moon revolves around the Earth. The cycle of lunar phases takes 29.5 days, a figure referred to as the ''synodic month''.\n\n*'''Distance:''' Because the Moon's orbit around the Earth is elliptical, its distance from the Earth varies slightly over the course of an orbit. This means that the moon's distance also follows a cycle which is the same as the length of one lunar orbit: approximately 27.5 days. This figure is referred to as the ''anomalistic month''. Note that the synodic month is (perhaps counterintuituvely) two days ''longer'' than the sidereal month - or to put it another way, it takes 2 more days for the Moon's phases to cycle than it does for the Moon to go around the Earth. This is due to the fact that the Earth is also moving ''around'' the Sun while the phases are going on, which means that the Moon has to spend 2 extra days \"catching up\" to the point at which the lunar phase cycle can restart.\n\n*'''Earth-Moon relative size''': This is a joke cycle; the Earth and Moon do not physically change size, nor does the Moon ever become larger than the Earth. This may be playing on the idea that the Moon often ''appears'' to change size to viewers on Earth, due to various factors; most commonly, this is due to the {{w|Moon illusion}}, which tricks the brain into perceiving the Moon as much larger than it really is. There are also so-called {{w|supermoon}}s, which occur when the full moon coincides with the Moon's closest approach to Earth; these actually do increase the Moon's apparent size, although by a relatively insignificant amount.\n\n*'''Lunar shape:''' Again, this is a joke cycle; the Moon does not actually change shape. A shape intermediate between circle and square is known as a {{w|squircle}}, a subclass of the {{w|superellipse}}.\n\n*'''Lunar mood:''' The moon does not have a mood, although humans can have moods that fluctuate over time, sometimes with a regularity akin to a cycle. Ironically, the section of the graph that shows a good (i.e. happy) mood has the graph line curving up then down like the mouth of a frown, and for the bad (unhappy) mood it curves down and then up, as in the mouth of a smile.\n\n* The final diagram shows many different cycles superimposed on each other, highlighting areas where several cycles are coinciding. This is likely satirizing the media trend of overhyping astronomical coincidences and giving them grand-sounding names:\n:*The light gray \"phase \u00d7 distance\" plot does not correspond to the product of periods given for phase and distance, which [https://i.imgur.com/0i0mcPn.png look like this] instead.\n:*A [[wikipedia:harvest moon|harvest moon]] is the traditional name for the full moon closest to the autumnal equinox, but there is nothing astronomically significant about it.\n:*A [[wikipedia:Supermoon|supermoon]] is a full or new moon when the Moon is closest to the Earth, resulting in a slightly larger-than-usual apparent size. A full supermoon is roughly 14% larger in diameter than when the Moon is furthest away. See also [[1394: Superm*n]].\n:*A [[wikipedia:blue moon|blue moon]] is the extra full moon in years with 13 full moons, which happens once every two or three years (hence the phrase \"once in a blue moon\"). Blue moons don't look any different from regular full moons.\n:*{{w|Astrology}} is a pseudoscience which claims that the positions of the celestial bodies can be used to predict human affairs. The chart jokingly suggests that astrology actually ''does'' work, but only within a very specific two-week timeframe.\n:*The [[wikipedia:Golden Age of Television|Golden Age of Television]] is said to have occurred in the 1940s and 50s, and the 2000s.\n:*There are no occurrences of '''dire moon''' or '''pork moon''' in the Google Books N-Gram viewer, which includes many works from the 1800s through 2008. A [[wikipedia:blood moon|blood moon]] refers to the moon during a lunar eclipse.\n:*While the popularity of '''skinny jeans''' ([[wikipedia:Slim-fit pants|slim-fit pants]]) does change over time, the idea that this is connected to a lunar cycle is also a joke.\n:*Finally, while the idea of a '''total eclipse of the sea''' seems absurd, [https://www.deepseanews.com/2017/08/what-happens-in-the-sea-during-a-solar-eclipse/ an eclipse was famously used to explain the migration of maritime animals]:\n:::''biologists were beginning to unravel the mystery of this \u2018false bottom\u2019\u2013a layer in the ocean that looks the the sea floor on the sounder but isn\u2019t\u2013which covered much of the ocean. This false bottom rises in up at night and sinks down during the day. This rising and falling is in fact caused by the largest migration of animal on Earth\u2013everything from fish, shrimp and jellyfish, moving hundreds of meters in unison up and down each day.... the moon moved into its place in front of the sun, daylight rapidly faded, and the scientists solved the migration mystery: the deep layer of animals began to rise. Bioluminescent creatures started to shine, and nocturnal creatures started a frantic upward thrust. As the world grew darker, they swam upward nearly 80 meters. But this frantic migration didn\u2019t last long. As the moon receded and the sun revealed itself, the massive animal layer did an about-face, scrambling back into the safety of the darkness.''\n:: (Backus, Clark, and Wing (1965) [https://sci-hub.tw/10.1038/205989a0 \"Behaviour of certain marine organisms during the solar eclipse of July 20, 1963\"] ''Nature'' '''4975:'''989-91.)\nThe '''{{w|Antikythera_mechanism|Antikythera mechanism}}''' mentioned in the title text is an ancient Greek machine, rediscovered in 1901, designed to calculate astronomical positions. The title text jokes that there is a set of gears on said mechanism that is used to predict the popularity of \"skinny jeans\" and \"low-rise waists.\"  Since it was likely created in the 1st or 2nd century B.C., it is impossible for the creators to have had any knowledge of skinny jeans or low-rise waists - both are modern-day clothing fashions.\n\n==Transcript==\n{{incomplete transcript|Do NOT delete this tag too soon.}}\n\n:Understanding lunar cycles\n\n:Nodal precession\n:[A diagram showing a broad cosine-like wave with wavelength labelled as 18.6 years. To the right are two diagrams showing an orbital cycle moving in and out of plane.]\n\n:Apsidal precession\n:[A diagram similar to the one above but with a slightly shorter wavelength, labelled as 8.9 years. To the right are two diagrams showing an elliptical orbit around a planet and the same orbit rotated.]\n\n:Phase\n:[A diagram similar to those above with a shorter wavelength, labelled as 29.5 days. To the right is a diagram showing four phases of the moon: New, Waxing crescent, Waxinf gibbos, Full.]\n\n:Distance\n:[A diagram similar to those above with a shorter wavelength, labelled as 27.5 days. To the right is a diagram showing the distance of the moon from the Earth over time, with distances marked by arrows.]\n\n:Earth-Moon relative size\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Earth bigger' and an arrow pointing to the maximum labelled 'Moon bigger'. To the right are two diagrams of the moon and Earth, one showing the Earth bigger than the Moon and the other showing the Moon bigger than the Earth.]\n\n:Lunar shape\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Circle' and an arrow pointing to the maximum labelled 'Square'. To the right is a diagram showing a circle, a circle transforming into a square with outward arrows at each corner and a square transforming into a circle with inward arrows.]\n\n:Lunar mood\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Bad' and an arrow pointing to the maximum labelled 'Good'. To the right are four emojis: :), :|, :(, :|]\n\n:[A superimposed graph of all the above waves. Different points on the graph are labelled: Harvest moon, Supermoon, Blue moon, Skinny Jeans popular, Super blood moon, Golden age of TV, Dire moon, Pork moon, Two week window in which astrology works, Total eclipse of the sea.]\n\n\n\n{{comic discussion}}"
        }
    }
}

Answer 2

我今天自己在想这个问题，不足为奇，有人以xkcd explainer Chrome extension的形式为我们完成了大部分艰苦的工作。具体来说，存放扩展代码的the repository有一个parser.js文件（即为我们完成的辛苦工作）和一个main.js文件，该文件是考虑到浏览器而构建的，但是可以轻松抽象其逻辑和功能，以仍然尊重其主要目标，并且可以在不同的环境（例如Node.js）中：以易于使用的方式获得XKCD漫画的解释。

下面的代码段包含了我对上面链接的parser.js和main.js文件的重做/合并。可以在浏览器控制台中直接复制并粘贴适当的代码块以查看效果：

上面的示例是由loadExplain(74)在以下代码中给出的comic 74。只需将num中的loadExplain(num)更改为您想要其解释HTML的漫画编号，或将loadExplain()更改为最新的漫画。

// parser.js
let comicid = 0;
let refNum = 0;
let refs = [];

function wikiparse(wikitext, num){
  comicid = num;

  let lines = wikitext.split(/\r?\n/);
  let html = "";

  let bulletLevel = 0; //level of bullet points
  let quotes = 0; //previous line was quote

  let tablerow = false; //true if currently in table row

  for(let i = 0; i < lines.length; i++){
    let line = lines[i];
    if(line !== ""){
      line = convertLine(line); //perform simple inline parsing

      if(line[0] === "*"){ //bullet points
        let bulletNum = line.match(/^\*+/)[0].length; //number of * in front of string
        line = "<li>" + line.replace(/^\*+ */, "") + "</li>";

        if(bulletLevel < bulletNum){ //start of new level of bulleting
          line = "<ul>" + line;
          bulletLevel++;
        }
        else if(bulletLevel > bulletNum){ //end of level
          line = "</ul>" + line;
          bulletLevel--;
        }
      }
      else if(bulletLevel > 0){ //end of bulleting
        line = "</ul><p>" + line + "</p>";
        bulletLevel--;
      }

      else if(line[0] === ":"){ //quotes
        line = "<dd>" + line.substring(1) + "</dd>";

      	if(!quotes){ //start of quote
        	line = "<dl>" + line;
          quotes = 1;
        }
      }
      else if(quotes){ //end of quote
      	line = "</dl><p>" + line + "</p>";
        quotes = 0;
      }

      else if(line[0] === '{' && line[1] === '|'){ //tables
        line = "<table " + line.substring(2) + ">";
      }
      else if(line[0] === '|' && line[1] == '-'){ //start of table row
        line = "";
        tablerow = true;
      }
      else if(line[0] === '|' && line[1] === '}'){ //end of table
        line = "</table>"; //no rows?
        tablerow = false;
      }
      else if(line[0] === '!'){ //table heading
        line = "<th>" + line.substring(1).replace(/!!/g, "</th><th>") + "</th>";
        if(tablerow){
          line = "<tr>" + line + "</tr>";
          tablerow = false;
        }
      }
      else if(line[0] === '|'){ //table cell
        line = "<td>" + line.substring(1).replace(/\|\|/g, "</td><td>") + "</td>";
        if(tablerow){
          line = "<tr>" + line + "</tr>";
          tablerow = false;
        }
      }

      else line = "<p>" + line + "</p>"; //regular text


      html += line;
    }
  }

  if(refNum > 0) {
    let refFormatted = "<div class='references'><ol>";
    for(let i = 0; i < refs.length; i++) {
      refFormatted += "<li id='note-" + i + "'><a href='#ref-" + i + "'>↑</a><span>" + refs[i] + "</span></li>";
    }
    refFormatted += "</ol></div>";
    html += refFormatted;
  }
  return html;
}


function convertLine(line){ //replace simple inline wiki markup
  //headings and subheadings
  //format ==<text>== -> <h2>, ===<text>=== -> h3, etc.
  if(line[0] === '=' && line[line.length - 1] === '='){
    let headingLeft = line.match(/^=+/)[0].length; //number of '='s on the left
    let headingRight = line.match(/=+$/)[0].length; //number of '='s on the right
    let headingNum = Math.min(headingLeft, headingRight);
    if(headingNum >= 1 && headingNum <= 6){
      line = "<h" + headingNum + ">" + line.substring(headingNum, line.length - headingNum) + "</h" + headingNum + ">";
    }
  }

  //link to another xkcd comic
  //format: [[<id>: <title]] or [[<id>: <title>|<id>]]
  line = line.replace(/\[\[([0-9]+): [^\]]+(|\1)?\]\]/g, convertComicLink);

  //link to within explain page
  //format: [[#<heading>|<display>]]
  line = line.replace(/\[\[#[^\]]+\]\]/g, convertHeadingLink);

  //internal links
  //format: [[<target>]] or [[<target>|<display>]]
  line = line.replace(/\[\[[^\]]+\]\]/g, convertInternalLink);

  // citation needed
  //format: {{Citation needed}}
  line = line.replace(/{{Citation needed}}/g, convertCitationLink);

  //what if links
  //format: {{what if|<id>|<title>}}
  line = line.replace(/{{what if(\|[^\|]+){1,2}}}/g, convertWhatIfLink);

  //wikipedia links
  //format: {{w|<target>}} or {{w|<target>|<display>}} (or W)
  line = line.replace(/{{[wW](\|[^}]+){1,2}}}/g, convertWikiLink);

  //tvtropes links
  //format: {{tvtropes|<target>|<display>}}
  line = line.replace(/{{tvtropes(\|[^}]+){2}}}/g, convertTropesLink);

  //other external links
  //format: [http://<url>] or [http://<url> <display>] (includes https)
  line = line.replace(/\[((http|https):)?\/\/([^\]])+]/g, convertOtherLink);

  //references
  line = line.replace(/<ref>.+<\/ref>/g, convertRefLink);

  //bold
  //format: '''<text>'''
  line = line.replace(/'''(?:(?!''').)+'''/g, convertBold);

  //italics
  //format: ''<text>'' or ''<text>
  line = line.replace(/''[^('')\n]+''/g, convertItalics)
             .replace(/''.+/g, convertItalics);
  return line;
}

function convertComicLink(link){
  let firstSep = link.indexOf(":");
  let secondSep = link.indexOf("|");
  let id = link.substring(2, firstSep);
  let display = "";
  if(secondSep === -1) {
    let title = link.substring(firstSep + 2, link.length - 2);
    display = id + ": " + title;
  }
  else {
    display = link.substring(secondSep + 1, link.length - 2);
  }
  return '<a href="https://xkcd.com/' + id + '">' + display + '</a>';
}

function convertHeadingLink(link){
  let target = link.substring(3, link.length-2);
  let display = "";
  let separator = target.indexOf("|");
  if(separator === -1){
    display = target;
  }
  else{
    display = target.substring(separator + 1);
    target = target.substring(0, separator);
  }
  return '<a href="http://www.explainxkcd.com/' + comicid + '#' + encodeURIComponent(target) + '" title="' + target + '">' + display + '</a>';
}

function convertInternalLink(link){
  let target = link.substring(2, link.length-2);
  let display = "";
  let separator = target.indexOf("|");
  if(separator === -1){
    display = target;
  }
  else{
    display = target.substring(separator + 1);
    target = target.substring(0, separator);
  }
  return '<a href="http://www.explainxkcd.com/wiki/index.php/' + encodeURIComponent(target) + '" title="' + target + '">' + display + '</a>';
}

function convertCitationLink(){
  return '<sup>[<a href="/285" title="285" class="mw-redirect"><i>citation needed</i></a>]</sup>';
}

function convertWhatIfLink(link){
  let firstSep = link.indexOf("|") + 1;
  let secondSep = link.indexOf("|", firstSep);

  let id = link.substring(firstSep, secondSep);
  let title = link.substring(secondSep + 1, link.length - 2);

  return '<a rel="nofollow" href="http://what-if.xkcd.com/' + id + '">' + title + '</a>';
}

function convertWikiLink(link){
  let target = link.substring(4, link.length-2);
  let display = "";
  let separator = target.indexOf("|");
  if(separator === -1){
    display = target;
  }
  else{
    display = target.substring(separator + 1);
    target = target.substring(0, separator);
  }
  return '<a href="http://en.wikipedia.org/wiki/' + encodeURIComponent(target) + '" title="wikipedia:' +  target + '">' + display + '</a>';
}

function convertTropesLink(link){
  let firstSep = link.indexOf("|") + 1;
  let secondSep = link.indexOf("|", firstSep);

  let target = link.substring(firstSep, secondSep);
  let display = link.substring(secondSep + 1, link.length - 2);

  return '<a rel="nofollow" class="external text" href="http://tvtropes.org/pmwiki/pmwiki.php/Main/' + target + '">' +
           '<span style="background: #eef;" title="Warning: TV Tropes. See comic 609.">' + display + '</span>' +
         '</a>';
}

function convertOtherLink(link){
  let separator = link.indexOf(" ");
  let target = "";
  let display = "";
  if(separator === -1){
    target = link.substring(1, link.length - 1);
    display = "[X]";
  }
  else{
    target = link.substring(1, separator);
    display = link.substring(separator + 1, link.length - 1);
  }
  return '<a rel="nofollow" href="' + encodeURI(target) + '">' + display + '</a>';
}

function convertRefLink(link) {
  let display = link.substring(5, link.length - 6);
  refNum++;
  refs.push(display);
  return "<sup id='ref-" + (refNum - 1) + "'><a href='#note-" + (refNum - 1) + "'>[" + refNum + "]</a></sup>";
}

function convertBold(text){
  return "<b>" + text.substring(3, text.length - 3) + "</b>";
}

function convertItalics(text){
  if(text.substr(-2) === "''") {
    return "<i>" + text.substring(2, text.length - 2) + "</i>";
  }
  return "<i>" + text.substring(2) + "</i>";
}

// main.js
async function getJSON(url, callback){
  const response = await fetch(url);
  const responseJSON = await response.json()
  callback(responseJSON);
}

async function loadExplain(comic = ''){ 
  if (comic === '') {
    let latestComic = await fetch("https://explainxkcd.com/wiki/api.php?action=expandtemplates&format=json&origin=*&text={{LATESTCOMIC}}");
    latestComicJSON = await latestComic.json();
    comic = +latestComicJSON.expandtemplates['*'];
  }

  getJSON("https://explainxkcd.com/wiki/api.php?action=query&prop=revisions&rvprop=content&format=json&origin=*&redirects=1&titles=" + comic, function(obj){
    let pages = obj.query.pages;
    let page = pages[Object.keys(pages)[0]].revisions[0]["*"];

    let start = page.indexOf("{{incomplete|");
    if(start === -1){ //incomplete tag at the beginning of explanation
      start = page.indexOf("== Explanation ==") + 18;
      if(start === -1 + 18){
        start = page.indexOf("==Explanation==") + 16;
      }
      if(page[start] == "\n") start++;
    }
    else{ //complete explanation
      start = page.indexOf("\n", start) + 1;
    }
    let end = page.indexOf("==Transcript==") - 1;
    if(end === -1 - 1){
      end = page.indexOf("== Transcript ==") - 1;
    }

    let rawExplain = page.substring(start, end);
    let explanation = wikiparse(rawExplain, comic);
    let readMore = '<p><b>Read more at the <a href="http://explainxkcd.com/' + comic + '">explain xkcd wiki</a>.</b></p>';
    console.log(explanation, readMore);
  });
}

// get parsed explanation HTML
// loadExplain();     // for most recent comic
loadExplain(74)    // for custom comic (1 - 2296 as of this answer posting)