如何将其嵌入我的网站或将其保存为 HTML 文件？

Question

我想用这个工具做一份简历：

http://registry.jsonresume.org/

它只给了我一个Json文件供我下载，但我不知道如何使用它！

另外，我直接复制代码粘贴到dreamweaver中保存为html，但是显示不正常，请问如何使用这个资源？

Answer 1

该网站提供的 JSON 文件包含您需要用来呈现简历的数据。您仍然需要创建站点并将每个字段中的数据绑定到它们对应的元素。

这是一个使用 AngularJS 的示例 - 您可以查看此 JS Fiddle，它显示了一些呈现的简历字段。

HTML

<div id="myApp" ng-app="app">
  <div id="resume" ng-controller="ResumeController">
    <header id="header">
      <div class="container">
        <div class="row">
          <div class="col-sm-9 col-sm-push-3">
            <h1>
            {{resume.basics.name}}
            </h1>
            <h2>
            {{resume.basics.label}}
            </h2>
          </div>
        </div>
      </div>
    </header>
  <div id="content" class="container">
    <section id="contact" class="row">
      <aside class="col-sm-3">
        <h3>Contact</h3>
      </aside>
      <div class="col-sm-9">
        <div class="row">
          <div class="col-sm-6">
            <strong>Email</strong>
            <div class="email">{{resume.basics.email}}</div>
          </div>
          <div class="col-sm-6">
            <strong>Phone</strong>
            <div class="phone">{{resume.basics.phone}}</div>
          </div>
          <div class="col-sm-6">
            <strong>Website</strong>
            <div class="website">
              <a href="https://richardhendricks.com">{{resume.basics.website}}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ResumeController', ['$scope', function($scope) {
    $scope.resume = {
  "basics": {
    "name": "Richard Hendriks",
    "label": "Programmer",
    "picture": "",
    "email": "richard.hendriks@gmail.com",
    "phone": "(912) 555-4321",
    "website": "https://richardhendricks.com",
    "summary": "Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!",
    "location": {
      "address": "2712 Broadway St",
      "postalCode": "CA 94115",
      "city": "San Francisco",
      "countryCode": "US",
      "region": "California"
    },
    "profiles": [
      {
        "network": "Twitter",
        "username": "neutralthoughts",
        "url": ""
      },
      {
        "network": "SoundCloud",
        "username": "dandymusicnl",
        "url": "https://soundcloud.com/dandymusicnl"
      }
    ]
  },
  "work": [
    {
      "company": "Pied Piper",
      "position": "CEO/President",
      "website": "https://piedpiper.com",
      "startDate": "2013-12-01",
      "endDate": "2014-12-01",
      "summary": "Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.",
      "highlights": [
        "Build an algorithm for artist to detect if their music was violating copy right infringement laws",
        "Successfully won Techcrunch Disrupt",
        "Optimized an algorithm that holds the current world record for Weisman Scores"
      ]
    }
  ],
  "volunteer": [
    {
      "organization": "CoderDojo",
      "position": "Teacher",
      "website": "https://coderdojo.com/",
      "startDate": "2012-01-01",
      "endDate": "2013-01-01",
      "summary": "Global movement of free coding clubs for young people.",
      "highlights": [
        "Awarded 'Teacher of the Month'"
      ]
    }
  ],
  "education": [
    {
      "institution": "University of Oklahoma",
      "area": "Information Technology",
      "studyType": "Bachelor",
      "startDate": "2011-06-01",
      "endDate": "2014-01-01",
      "gpa": "4.0",
      "courses": [
        "DB1101 - Basic SQL",
        "CS2011 - Java Introduction"
      ]
    }
  ],
  "awards": [
    {
      "title": "Digital Compression Pioneer Award",
      "date": "2014-11-01",
      "awarder": "Techcrunch",
      "summary": "There is no spoon."
    }
  ],
  "publications": [
    {
      "name": "Video compression for 3d media",
      "publisher": "Hooli",
      "releaseDate": "2014-10-01",
      "website": "https://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)",
      "summary": "Innovative middle-out compression algorithm that changes the way we store data."
    }
  ],
  "skills": [
    {
      "name": "Web Development",
      "level": "Master",
      "keywords": [
        "HTML",
        "CSS",
        "Javascript"
      ]
    },
    {
      "name": "Compression",
      "level": "Master",
      "keywords": [
        "Mpeg",
        "MP4",
        "GIF"
      ]
    }
  ],
  "languages": [
    {
      "language": "English",
      "fluency": "Native speaker"
    }
  ],
  "interests": [
    {
      "name": "Wildlife",
      "keywords": [
        "Ferrets",
        "Unicorns"
      ]
    }
  ],
  "references": [
    {
      "name": "Erlich Bachman",
      "reference": "It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company."
    }
  ]
};
}]);

---

基本上，您需要将 HTML 页面放在一起，然后绑定该 JSON 文件中提供的数据。