如何将其嵌入我的网站或将其另存为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文件中提供的数据。