Categoria de postagem no blog e muito mais

 { { 'componente-artigo-cartão.css' | URL_do_asset | folha_de_estilo } }
 { { 'component-cartão.css' | URL_do_asset | folha_de_estilo } } 
{ { 'seção-principal-blog.css' | URL_do_asset | folha_de_estilo } }
 { %- estilo -% }
 . seção - { { seção. id } } - preenchimento { 
preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; 
preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ;
 }
 @media screen e ( largura mínima : 750px ) { 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . padding_top } } px ; 
preenchimento - inferior : { { seção. configurações . padding_bottom } } px ;
 }
 }
 { %- estilo final -% }
 < menu - blog > 
< div class = "seção de largura da página do blog principal- {{ section.id }} -padding" >
 < h1 class = "title--primary" > { { blog. título | escapar } } </ h1 > 
< div class = "menuBlog" >
 { %- para bloco na seção. blocos -% }
 { % bloco de casos . tipo % }
 { % quando 'categoria' % } 
<h2> { { bloco . configurações . categoria_título | escapar } } </ h2 >
 { % quando 'opção' % }
 < rótulo > 
< tipo de entrada = "caixa de seleção" valor = " {{ block.settings.option_value }} " class = "blogCheckbox" > 
< svg width = "1.6rem" height = "1.6rem" viewBox = "0 0 16 16" ária - oculto = "true" focusable = "false" > 
< rect largura = "16" altura = "16" traço = "currentColor" fill = "none" traço - largura = "1" </ rect >
 < path class = "verificação de entrada"
 d = "M1,5 3,5L2.83333 4,75L4.16667 6L9,5 1" 
preencher = "nenhum"
 acidente vascular cerebral = "CorAtual"
 traço - largura = "1,75"
 traço - linecap = "redondo"
 acidente vascular cerebral - linejoin = "redondo" />
 </svg> _ 
{ { bloquear. configurações . opção_título | escapar } }
 </ rótulo >
 { % final % }
 { % fim para % }
 </div> _ _ 
< div class = "artigos de blog {% if section.settings.layout == 'collage' %} artigos de blog - colagem {% endif %} " >
 { %- para artigo no blog. artigos -% }
 { % atribuir artigo marcado = '' % } 
{ % para tag no artigo. Tag % }
 { % atribuir rawTag = tag | acrescentar : ',' % }
 { % atribuir artigomarcado = artigomarcado | acrescentar : rawTag % } 
{ % fim para % }
 < div class = "blog-articles__article article" dados - blog = " {{ taggedArticle }} " >
 { %- renderizar 'cartão de artigo' ,
 artigo : artigo , 
media_height : seção. configurações . Altura da imagem ,
 media_aspect_ratio : artigo. imagem . proporção da tela ,
 show_image : seção. configurações . mostrar_imagem ,
 show_date : seção. configurações . data_de_show ,
 mostrar_autor : seção. configurações . mostrar_autor , 
show_excerpt : verdadeiro
 -% }
 </div> _ _
 { %- fim para -% }
 </div> _ _
 </div> _ _
 </ menu - blog >
 <estilo> _ 
. principal - blog {
 exibição : grade ;
 grid - template - colunas : 250px 1fr ;
 grid - template - rows : 100px 1fr ;
 lacuna : 1rem ;
 }
 . principal - blog . título -- primário { 
área da grade : 1 / span 2 ;
 }
 . menuBlog {
 área da grade : 2/1 ;
 exibição : flexível ;
 flex - direction : coluna ;
 } 
Tela @media somente e ( largura máxima : 750px ) {
 . principal - blog {
 exibição : flexível ;
 flex - direction : coluna ;
 }
 . título -- primário {
 margem : 0 ;
 }
 } 
. menuBlog h2 {
 margem : 1,5rem 0 1rem 0 ;
 }
 . menuBlog li {
 estilo de lista : nenhum ;
 margem - esquerda : 1rem ;
 }
 . menuRótulo do blog {
 posição : relativa ;
 exibição : flexível ; 
alinhar - conteúdo : centro ;
 alinhar - itens : centro ;
 lacuna : 10px ;
 }
 . menuBlog . blogCheckbox {
 cursor : ponteiro ;
 opacidade : 0,7 ;
 posição : absoluta ;
 opacidade : 1 ; 
largura : 1,6rem ;
 altura : 1,6rem ;
 superior : 0,7rem ;
 esquerda : - 0,4rem ;
 z - índice : -1 ;
 aparência : nenhuma ;
 -webkit -aparência : nenhum ;
 } 
. entrada do menuBlog : hover {
 opacidade : 1 ;
 }
 . blogCheckbox : verificado ~svg > . entrada - verifique {
 opacidade : 1 ! importante ;
 }
 . menuBlog svg {
 posição : relativa ;
 } 
. menuBlog . entrada - verifique {
 posição : absoluta ;
 opacidade : 0 ;
 transformar : traduzir ( 15 %, 30 % ) ;
 largura : 100 %;
 altura : 100 %;
 } 
. blog - artigos {
 área da grade : 2/2 ;
 }
 . ocultar - blog {
 Mostrar nenhum ! importante ;
 }
 </ estilo >
 <roteiro> _
 classe MenuBlog estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . t = isso . querySelectorAll ( "span" ) ; 
esse . t . forEach ( ( s ) = > s.addEventListener ( "clique" , isto.i.ligar ( este ) ) ) ; 
esse . h = isso . querySelectorAll ( ".blog-articles__article" ) ; 
esse . addEventListener ( " alterar " , isto.i.ligar ( isto ) ) ;
 }
 é ) {
 deixe eu = [ ] ; 
esse . querySelectorAll ( "entrada" ) . forEach ( ( s ) => {
 if ( s. verificado ) {
 eu. empurrar ( s. valor ) ;
 } 
} ) ;
 if ( ou seja, comprimento > 0 ) {
 esse . h . forEach ( ( s ) => { 
S. lista de classes . add ( "ocultar-blog" ) ;
 } ) ;
 } outro {
 esse . h . forEach ( ( s ) => { 
S. lista de classes . remover ( "ocultar-blog" ) ;
 } ) ;
 }
 esse . h . forEach ( ( t ) => { 
const s = t. conjunto de dados . eu . dividir ( "," ) ;
 S. mapa ( ( s ) => {
 if ( ou seja, inclui ( s ) ) { 
esse . querySelectorAll ( ` [ data - blog = "${t.dataset.l}" ] ` ) . forEach ( ( s ) =>
 S. lista de classes . remover ( “ocultar blog” )
 ) ;
 } 
} ) ;
 } ) ;
 }
 }
 elementos personalizados. define ( "menu-blog" , MenuBlog ) ;
 </roteiro> _
 { % esquema % }
 { 
"name" : "Blog com categoria" ,
 "tag" : "seção" ,
 "classe" : "seção" ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" , 
"content" : "t:sections.main-blog.settings.header.content"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "layout" ,
 "opções" : [
 {
 "valor" : "grade" , 
"label" : "t:sections.main-blog.settings.layout.options__1.label"
 } ,
 {
 "valor" : "colagem" ,
 "label" : "t:sections.main-blog.settings.layout.options__2.label"
 }
 ] ,
 "default" : "colagem" , 
"label" : "t:sections.main-blog.settings.layout.label" ,
 "info" : "t:sections.main-blog.settings.layout.info"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_image" ,
 "padrão" : verdadeiro , 
"label" : "t:sections.main-blog.settings.show_image.label"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "altura_da imagem" ,
 "opções" : [
 {
 "valor" : "adaptar" , 
"label" : "t:sections.main-blog.settings.image_height.options__1.label"
 } ,
 {
 "valor" : "pequeno" ,
 "label" : "t:sections.main-blog.settings.image_height.options__2.label"
 } ,
 {
 "valor" : "médio" , 
"label" : "t:sections.main-blog.settings.image_height.options__3.label"
 } ,
 {
 "valor" : "grande" ,
 "label" : "t:sections.main-blog.settings.image_height.options__4.label"
 }
 ] ,
 "padrão" : "médio" , 
"label" : "t:sections.main-blog.settings.image_height.label" ,
 "info" : "t:sections.main-blog.settings.image_height.info"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "data_show" , 
"padrão" : verdadeiro ,
 "label" : "t:sections.main-blog.settings.show_date.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_autor" ,
 "padrão" : falso , 
"label" : "t:sections.main-blog.settings.show_author.label"
 } ,
 {
 "tipo" : "parágrafo" ,
 "content" : "t:sections.main-blog.settings.paragraph.content"
 } ,
 {
 "tipo" : "cabeçalho" , 
"content" : "t:sections.all.padding.section_padding_heading"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 , 
" Passo 4 ,
 "unidade" : "px" ,
 "label" : "t:sections.all.padding.padding_top" ,
 "padrão" : 36
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" , 
"label" : "t:sections.all.padding.padding_bottom" ,
 "padrão" : 36
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "categoria" ,
 "nome" : "Título da categoria" , 
"configurações" : [
 {
 "tipo" : "texto" ,
 "label" : "Título da categoria" ,
 "id" : "category_title" ,
 "padrão" : "Categoria"
 }
 ] 
} ,
 {
 "tipo" : "opção" ,
 "nome" : "Opção" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "label" : "Título da opção" , 
"id" : "option_title" ,
 "default" : "Tema do amanhecer"
 } ,
 {
 "tipo" : "texto" ,
 "label" : "Valor da opção" ,
 "id" : "option_value" , 
"padrão" : "amanhecer" ,
 "info" : "Forneça a tag aqui. NOTA: Isso diferencia maiúsculas de minúsculas."
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Blog com categoria" , 
"blocos" : [
 {
 "tipo" : "categoria"
 } ,
 {
 "tipo" : "opção"
 } ,
 {
 "tipo" : "opção"
 }
 ]
 }
 ] 
}
 { % termina o esquema % } 

 {
 "Seções" : {
 "principal" : {
 "type" : "menu do blog" ,
 "configurações" : { 
"layout" : "grade" ,
 "show_image" : verdadeiro ,
 "image_height" : "adaptar" ,
 "show_date" : verdadeiro ,
 "show_autor" : falso , 
"padding_top" : 36 ,
 "padding_bottom" : 36
 }
 }
 } ,
 "ordem" : [
 "principal"
 ]
 }