Jinsi ya kutengeneza Instant view

# This sample template explores how we can turn the Telegram blog post on the left into an Instant View page as shown on the right — in several simple steps. If you're unsure what some of the elements used here do, check out the full documentation here: https://instantview.telegram.org/docs

# Place the version at the beginning of template. We recommend always using the latest available version of Instant View.

~version: "2.0"

### STEP 1: Define which pages get Instant View and which don't

# That's easy because we only need IV pages for posts on the Telegram blog.

# This *condition* does the trick.

?path: /blog/.+

### STEP 2: Define the essential elements

# Now we'll start filling up the IV page.

# To make things easier, we'll begin by storing the actual body of the post in a *variable* before we start our manipulations.

$main: //div[@id="dev_page_content_wrap"]

# The 'title' and 'body' *properties* are required for an Instant View page to work, so we'll define those two. 

title:  $main//h1[1]

body:  //div[@id="dev_page_content"]

# While we're at it, we'll move the signature to the top of the page.

author: "Telegram"

### Now to set the cover image. This isn't required, but we need a cover image if we want our Instant view page to look cool.

# Telegram blog posts always have their cover in a div of the "blog_wide_image" class, so we'll look for that one.

cover: $main//*[has-class("blog_wide_image")]//img

# Note that 'cover:' is a *property*, so by default it will not be overwritten after we've assigned a value to it for the first time. This means that the rule below will not be applied if the first one already hit the target.

# Read more about properties here: https://instantview.telegram.org/docs#properties

cover: $main//img[has-class("blog_wide_image")]

### Set the link preview image. Links shared via Telegram will show an extended preview with a small picture. We'll also use the cover as the image in those previews.

image_url:   $cover/self::img/@src

# But we've only introduced covers to our blog posts in the Fall of 2016.

# So for any old posts that don't have a cover, we'll use the smaller monochromatic image for link previews (but not for the cover, they're too small).

$side_image: $main//img[has-class("blog_side_image")]

image_url:   $side_image/@src

# Regardless of whether we're using a cover image or not, there's no proper space for the small monochromatic image on the IV page.

# So we'll just get rid of it using the '@remove' *function*.

@remove:     $side_image

# Properly display media and the respective captions.

# Replace //div tags with <figcaption> and <figure> tags.

<figcaption>: $body//div[has-class("blog_image_wrap")]/p

<figure>:     $body//div[has-class("blog_image_wrap")]

<figure>:     $body//div[has-class("blog_side_image_wrap")]

<figure>:     $body//div[has-class("smartphone_video_player_wrap")]

## STEP 3: Cleanup

@remove: $body//*[has-class("twitter_timeline_wrap")]

@remove: $body/div/center[.//img]/br

# Remove "The Telegram Team" italic footer with the date from the page. We already have this info on the Instant View page, just below the title, no need to repeat it at the bottom.

$footer: $body/p[./em[contains(., "The Telegram Team")]]

@remove: $footer/prev-sibling::*[./br][not(normalize-space())]

@remove: $footer/next-sibling::*[./br][not(normalize-space())]

@remove: $footer

### STEP 4: Further refinements

### Telegram blog posts have a 'Recent News' section at the bottom (on the right on desktops) that features earlier blog posts. We'll make some changes to this block so that it looks better on the IV page.

$related:  //div[has-class("tl_blog_bottom_blog")]

<h4>:      $related//a[has-class("side_blog_header")]

<related>: $related

@append_to($body)

### And that's it, we're done. Now the rules from the '..after' block will be applied and the Instant View page is ready. Feel free to click on the panel below to see what exactly is done in the '..after' section.

# Kiolezo hiki cha mfano kinachunguza jinsi tunaweza kugeuza chapisho la blogi ya Telegraph upande wa kushoto kuwa ukurasa wa Angalia mara moja kama inavyoonekana upande wa kulia - katika hatua kadhaa rahisi. Ikiwa hauna hakika ni nini baadhi ya vitu vilivyotumiwa hapa hufanya, angalia hati kamili hapa: https://instantview.telegram.org/docs

# Weka toleo mwanzoni mwa template. Tunapendekeza kila wakati kutumia toleo la hivi karibuni la Maonekano ya Papo hapo.

~ toleo: "2.0"

# 1

# Hiyo ni rahisi kwa sababu tunahitaji kurasa za IV tu kwa machapisho kwenye blogi ya Telegraph.

# Hali * hii * hufanya hila.

? njia: /blog/.+

# # 1 # 1: Fafanua vitu muhimu

# Sasa tutaanza kujaza ukurasa wa IV.

# Ili kufanya mambo rahisi, tutaanza kwa kuweka mwili halisi wa chapisho katika * kutofautisha * kabla ya kuanza kudanganywa kwetu.

$ kuu: // div [@ id = "dev_page_content_wrap"]

# Mali ya 'kichwa' na 'mwili' * inahitajika ili ukurasa wa Tazama Mara ufanyie kazi, kwa hivyo tutafafanua hizo mbili.

kichwa: $ main // h1 [1]

mwili: // div [@ id = "dev_page_content"]

# Wakati tunako, tutahamisha saini hiyo juu ya ukurasa.

Mwandishi: "Telegraph"

# # 1 Sasa kuweka picha ya jalada. Hii haihitajiki, lakini tunahitaji picha ya kifuniko ikiwa tunataka ukurasa wetu wa mtazamo wa Papo hapo uwe mzuri.

Machapisho ya blogi ya # Telegraph huwa na jalada lao kila wakati kwenye darasa la "blog_wide_image", kwa hivyo tutatafuta hiyo.

kifuniko: $ main // * [ina-darasa ("blog_wide_image")] // img

# Kumbuka kuwa 'kifuniko:' ni * mali *, kwa hivyo kwa msingi haitaorodheshwa baada ya kuiweka thamani kwake kwa mara ya kwanza. Hii inamaanisha kuwa sheria hapa chini haitatumika ikiwa ya kwanza imeshapata lengo.

# Soma zaidi juu ya mali hapa: https://instantview.telegraph.org/docs #properties

jalada: $ main // img [ina-darasa ("blog_wide_image")]

# # # Weka picha ya hakiki ya kiungo. Viunga vilivyoshirikiwa kupitia Telegraph vitaonyesha hakiki iliyoongezwa na picha ndogo. Tutatumia pia kifuniko kama picha katika hakiki hizo.

picha_url: $ bima / binafsi :: img / @ src

# Lakini tumeanzisha tu vifuniko kwa machapisho yetu ya blogi katika Kuanguka kwa 2016.

# Kwa hivyo kwa machapisho yoyote ya zamani ambayo hayana kifuniko, tutatumia picha ndogo ya monochromatic kwa hakiki za kiungo (lakini sio kwa kifuniko, ni ndogo sana).

$ side_image: $ main // img [ina-darasa ("blog_ide_image")]

picha_url: $ side_image / @ src

# Haijalishi ikiwa tunatumia picha ya jalada au la, hakuna nafasi sahihi kwa picha ndogo ya monochromatic kwenye ukurasa wa IV.

# Kwa hivyo tutaiondoa tu kwa kutumia kazi ya '@remove' *.

@remove: $ side_image

# Onyesha vyema media na maelezo mafupi.

# Badilisha / div vitambulisho na vitambulisho vya <figcaption> na <figure>

<figcaption>: $ body // div [ina-darasa ("blog_image_wrap")] / p

<figure>: $ body // div [ina-class ("blog_image_wrap")]

<figure>: $ body // div [ina-darasa ("blog_ide_image_wrap")

<figure>: $ body // div [ina- darasa ("smartphone_video_player_wrap")]

## STEPI 3: Kusafisha

@remove: $ body // * [ina darasa ("twitter_timeline_wrap")]

@remove: $ mwili / div / kituo [.67 img] / br

# Ondoa "Timu ya Telegraph" barua italic na tarehe kutoka ukurasa. Tayari tunayo habari hii kwenye ukurasa wa Angalia Papo hapo, chini ya kichwa, hakuna haja ya kuirudia chini.

$ footer: $ body / p [./ em [ina (., "Timu ya Telegramu")]

@remove: $ footer / prev-sibling :: * [./ br] [sio (kurekebisha nafasi ())]

@remove: $ footer / ndugu wa pili :: * [./ br] [sio (kurekebisha nafasi ())]

@remove: $ footer

# # 1 #KIZA YA 4: Marekebisho zaidi

Machapisho ya blogi ya ### Telegraph yana sehemu ya 'Habari za Hivi Punde' chini (upande wa kulia kwenye dawati) ambayo ina chapisho za blogi za mapema. Tutafanya mabadiliko kadhaa kwenye bloku hii ili ionekane bora kwenye ukurasa wa IV.

inayohusiana na: // div [ina-darasa ("tl_blog_bottom_blog")]

<h4>: $ inayohusiana = a [ina-darasa ("side_blog_header")]

<related>: $ inayohusiana

@append_to ($ mwili)

### Na ndio, tumekamilika. Sasa sheria kutoka kwa block ya .. .. baadaye zitatumika na ukurasa wa Angalia Papo tayari. Jisikie huru kubonyeza kwenye paneli hapa chini kuona ni nini hasa hufanywa katika sehemu ya '..all'