Story
Story er redigeringsverktøyet du bruker til å bygge Pages og gjenbrukbare Components i Datavju. Legg elementer i et tre, angi innhold og utseende, og forhåndsvis hvordan andre skal bruke resultatet.
Slik fungerer Story
Treet til venstre viser elementene i utformingen. Når du velger et element, vises innstillingene til høyre. Arbeidsflaten viser resultatet. En Page starter med Body. En gjenbrukbar Component starter med elementet du velger, for eksempel Div for et produktkort.
Struktur, egenskaper, tekst, Styles, States og hendelser lagres automatisk. Dataset-innstillingene kobler utformingen til en Table eller et lagret resultat. Preview kjører utkastet. Prerender lager en egen HTML-forhåndsvisning. Publish gjør en versjon tilgjengelig gjennom siden eller nettstedet.
Bygg ditt første oppsett
Bygg strukturen på en side før du legger til delte Styles eller data.
- Åpne en Page i Organizer. For en ny side åpner du menyen på mappen den skal ligge i, og velger Create → Page. Følg Component-artikkelen hvis du vil starte med en gjenbrukbar del.
- Velg Components i Story-verktøylinjen. Velg Body i treet.
- Åpne Insert og velg Div. Gi elementet et beskrivende Name, for eksempel Product grid.
- Med dette Div-elementet valgt setter du inn Heading (H1 to H6). Sett inn Plain Text under overskriften og skriv Northstar lighting i Plain Text.
- Velg Div igjen og sett inn Paragraph med et eget Plain Text-element under. Skriv en kort innledning.
- Velg hvert element og bruk Add property for å legge til innstillingene. Legg for eksempel Padding på Body og skriv 32px.
- Lukk utforskeren for å kontrollere arbeidsflaten. Åpne Preview for å kontrollere siden uten markeringsrammene fra redigeringsverktøyet.
Finn riktig panel
I Components redigerer du synlig innhold. I Head redigerer du dokumentets metadata, som følger med i HTML-en.
- Components: Velg, gi nytt navn til, sett inn, kopier, flytt eller slett synlige elementer. Utvid en rad for å se elementene under den. Velg riktig overordnet element før du setter inn noe.
- Head: Rediger nettlesertittel, metadata, dokumentlenker, stiler og skript. Start med Add Head Component når siden ikke har Head.
- Styles: Lag innstillinger for utseende som du kan bruke på flere elementer.
- Variables: Lag midlertidige verdier, som menuOpen. Bruk dem i egenskaper, States og hendelser.
- Functions: Konfigurer Observe Visibility, Scroll Position eller Update at Intervals for handlinger som fortsetter mens siden er åpen.
- Datasets: Velg Page Dataset for sider basert på poster, og se komponentenes datatilkoblinger.
- Settings: Konfigurer sidens tilgjengelige innstillinger for autentisering og publisering.
Rediger egenskaper og verdier
Velg et element for å se innstillingene det allerede har. Bruk Add property for å bla eller søke etter en ny innstilling. All viser de vanlige valgene. Kategorien Attributes inneholder HTML-attributter, som Name for et Meta-element. Den vanlige listen viser bare valg som støttes av elementet du har valgt.
En ny, valgfri CSS-egenskap starter tom. Nettleseren bruker sitt vanlige resultat til du skriver en verdi. Bruk enheter der CSS krever det: 24px for Padding, 100% for Width eller 1.4 for Line Height. Noen obligatoriske egenskaper har allerede en startverdi. Velg typen for Heading før du velger tekststørrelse. Overskriftsnivået beskriver strukturen i innholdet.
Teksten ligger vanligvis i et underliggende Plain Text-element. Heading gir overskriftselementet og formateringen, mens Plain Text inneholder ordene. Velg Button eller Link når du legger til Click Event, og velg deretter Plain Text-elementet under for å redigere knappeteksten eller lenketeksten.
Koble en utforming til data
Velg datakilden på et overordnet element. Velg deretter feltene fra kilden i elementene under.
Et Dataset er en Table eller et lagret resultat som utformingen leser fra. Når du kobler et element til et Dataset, kan elementet gjentas for de valgte radene. Index Query velger én rad. Page Dataset lager egne sider basert på poster. Page-artikkelen forklarer adressene til disse sidene.
- Velg elementet som skal gi data til elementene under det.
- Velg Show Data Settings. Bruk Add Dataset for å velge den lagrede kilden du trenger.
- Velg egenskapen på et underliggende element som skal vise et felt. Åpne kontrollen for dataverdi og velg Dataset-kolonnen.
- For en verdi i et Object bruker du Select Path for å velge delen du trenger.
- Kontroller mer enn én post og et tomt resultat. Hvis et underliggende element trenger data fra elementet over, må du beholde det overordnede elementet når du kopierer hele utformingen.
Vis strukturert artikkelinnhold
Bruk Parser → JSON to Elements når et Dataset inneholder et strukturert artikkeltre. Velg Add Dataset og velg denne kilden. Vent til Saving selection… er ferdig. Kontroller deretter arbeidsflaten og Preview. Overskrifter blir overskriftselementer, pre/code bevarer koden som ren tekst, og bilder bruker bildeadressen og alternativteksten som følger med.
Velg dette for innhold som allerede er lagret som strukturert JSON. På en vanlig side du bygger selv, setter du inn Heading, Paragraph og andre elementer gjennom Components. Angi tilgangen til innholdets Dataset før publisering.
Visningsstørrelse, kontroll og lagring
Når du endrer visningsstørrelsen i redigeringsverktøyet, forhåndsviser du en størrelse. Responsive Styles bestemmer oppsettet de besøkende får.
- Kontrollen for visningsstørrelse starter på Laptop 1280x800. Velg en forhåndsinnstilt størrelse eller Custom Size for å endre arbeidsflaten. Bruk den til å kontrollere oppsettet. Angi responsiv oppførsel i Styles.
- Markeringsrammene i Components hjelper deg å finne elementer. Kontroller vanlige lenker, fokus og kontroller i Preview.
- Preview åpner et kjørende utkast i en annen fane. Prerender åpner generert HTML. Bruk begge når du kontrollerer data, metadata eller samhandling som også må fungere etter publisering.
- Vent til lagringen er ferdig før du lukker. Hvis lagringen melder en konflikt, åpner du siden på nytt for å laste den lagrede versjonen. Legg deretter inn endringen du fortsatt trenger.
- AI og Assistant hjelper med støttede endringer og spørsmål om den åpne utformingen. Kontroller resultatet på arbeidsflaten og i Preview.
Eksempler
Katalogen bruker fast tekst. Den samme strukturen kan senere vise felt fra et Dataset.
Eksempel: en kataloginnledning
Lag Body → Heading → Plain Text med Northstar lighting. Legg til Body → Paragraph → Plain Text med Desk lamps and pendants for work and home. Gi Body Padding 32px og Font Family Arial, sans-serif. Du får en lesbar overskrift og innledning med plass rundt.
Eksempel: et produktgitter med to kort
Lag en Div som heter Product grid. Sett Display til grid, Grid Template Columns til repeat(2, minmax(0, 1fr)) og Gap til 24px. Sett inn to Div-elementer som produktkort, med Heading og Paragraph under hvert kort. Skriv Desk lamp / €40.00 og Pendant lamp / €75.00. Gi hvert kort Padding 24px, Border 1px solid #cbd5e1 og Border Radius 12px. Du får to like brede kolonner. Responsive-artikkelen viser hvordan du plasserer kortene under hverandre på mobil.
Begrensninger og vanlige feil
Kontroller først hvilket element du har valgt, CSS-verdiene og hvor dataene kommer fra når oppsettet blir uventet.
- Velg det omsluttende elementet for oppsett og hendelser, og Plain Text-elementet under for ordene. Kontroller først valget ditt hvis en innstilling mangler.
- Bruk en fullstendig CSS-verdi med enhet der det trengs. Kontroller arbeidsflaten etter at du endrer Display, Width eller Overflow.
- Behold elementet som gir data til de andre, når du lagrer en selvstendig Component. Koble til eventuelle utilgjengelige data før du bruker resultatet.
- Endringer lagres i utkastet. Publiser siden eller nettstedet når det kontrollerte utkastet skal erstatte den offentlige versjonen.
Relaterte artikler
Page · Component · Styles · States · Responsiv utforming · Interactions · Metadata for siden