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

Question

我想使用此工具制作简历：

http://registry.jsonresume.org/

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

此外，我直接复制了代码并粘贴到 dreamweaver 中并另存为 html，但它无法正确显示，我如何使用此资源？

Answer 1

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

下面是一个使用AngularJS的示例 - 您可以检查此 JS 小提琴，其中显示了呈现的一些简历字段。

.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": "[e-mail]",
"phone": "[phone]",
"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 文件中提供的数据。