首页 资讯频道 互联频道 智能频道 网络 数据频道 安全频道 服务器频道 存储频道

如何用一个JSON文件创建一个网站?JSONsite 运作方式介绍

2020-12-08 08:43:58 来源 : 杭州程序员小张头条号

我做了一个东西,可以让你用一个JSON文件创建一个网站。

做一个fork,添加你的URL,然后咣当一声,一个好看的网站就用JSON文件做出来了。而且所有的网站都是由Vercel托管的,他们有惊人的正常运行时间和CDN。

听起来不错,但是如何运作?

JSONsite将从提供的URL中获取JSON文件

然后,JSONsite将开始解析这些数据,并将其传递给nunjucks。

从nunjucks输出的HTML将被最小化

您的网站将在您选择的Slug时准备好!

所以基本上这样:

{

"title":"我的网站",

"description":"TheamazingwebsiteofJohnDoe",

"image":"https://cdn.glitch.com/1788ed8a-5cc6-45e9-a3b6-18d6457af699%2Fundraw_profile_pic_ic5t.png?v=1606325421049",

"author":"ZhangZhang",

"theme":{

"navbar_color":"dark",

"jumbotron_color":"light",

"footer_color":"light"

},

"pages":[

{

"title":"主页",

"id":"main",

"content":"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Auctorurnanuncidcursus.Maecenasultriciesmiegetmaurispharetraetultrices.Nuncconsequatinterdumvariussit.Suspendissesednisilacussed.Temporideunislnuncmiipsumfaucibusvitae.Urnanectinciduntpraesentsemperfeugiatnibhsedpulvinar.Euismodquisviverranibhcraspulvinarmattisnuncsedblandit.Sitametconsecteturadipiscingelitutaliquampurussitamet.Plateadictumstquisquesagittispurussitametvolutpatconsequat.Interdumvelitlaoreetiddonecultricestinciduntarcunon.Etnetusetmalesuadafames.Ipsumfaucibusvitaealiquetnecullamcorpersit.Ultriciesmiegetmaurispharetraet.Etiamtempororcieulobortiselementumnibhtellusmolestie.Dolorsitametconsecteturadipiscing.Sedtempusurnaetpharetrapharetramassamassaultriciesmi.Actinciduntvitaesemperquislectusnullaat.Odioutsemnullapharetradiamsitamet.Viverraadipiscingatintellus."

},

{

"title":"关于",

"id":"about",

"content":"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Luctusaccumsantortorposuereacutconsequatsemperviverra.Pharetramagnaacplaceratvestibulumlectusmauris.Scelerisqueindictumnonconsecteturaeratnamatlectus.Velpharetravelturpisnuncegetloremdolorsedviverra.Duisultricieslacussedturpistinciduntidaliquetrisusfeugiat.Gravidainfermentumetsollicitudin.Quamvulputatedignissimsuspendisseinestanteinnibhmauris.Sitametmauriscommodoquis.Bibendumenimfacilisisgravidanequeconvallisa.Quisimperdietmassatinciduntnuncpulvinar.Leoadiamsollicitudintemporid.Sitametfacilisismagnaetiam.Pharetrasitametaliquamiddiammaecenasultricies.Nullaatvolutpatdiamutvenenatistellus.Egetloremdolorsedviverraipsumnunc.Lobortisscelerisquefermentumduifaucibusin.Ametcursussitametdictumsitametjustodonecenim.Posuereurnanectinciduntpraesentsemperfeugiat."

},

{

"title":"联系",

"id":"contact",

"content":"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Augueutlectusarcubibendumatvarius.Hachabitasseplateadictumstvestibulumrhoncusest.Tinciduntvitaesemperquislectusnullaatvolutpatdiam.Eunondiamphasellusvestibulumloremsedrisusultricies.Posuereloremipsumdolorsitametconsectetur.Maurissitametmassavitaetortor.Malesuadafamesacturpisegestasmaecenaspharetraconvallisposuere.Diamvolutpatcommodosedegestasegestas.Orcisagittiseuvolutpatodiofacilisis.Duiutornarelectussitamet.Nislvelpretiumlectusquamidleoinvitaeturpis.Pharetraetultricesnequeornareaeneaneuismodelementumnisiquis.Arcunonsodalesnequesodalesutetiamsitamet.Scelerisquepurussemperegetduisat.Acturpisegestassedtempusurnaetpharetra.Plateadictumstquisquesagittispurus."

}

],

"footer":"©2020JohnDoe.AllRightsReserved.",

"javascript":"console.log('Ooohlook,customJavaScript!')",

"css":"/*YoucanputcustomCSShere!*/"

}

会变成这样:

JSONsite:使用JSON文件创建SPA页面

全部集中在一页,一个站点上。 “页面”是用JavaScript切换的,但是由于它们都在一页上,因此速度非常快。

从Github下载项目,通过运行 yarn start 启动项目,但是他需要加载远程的json文件,从这里配置:

JSONsite:使用JSON文件创建SPA页面

我在本机上通过 http-server node包快速启动了一个HTTP服务,在启动的时候它就会加载这个json。

关键词: JSONsite
相关文章