ghost 样式相关改动记录

首页标签改动

   <div style="display:flex;justify-content:center;padding-bottom:1em;padding-top:2em">
        <div style="display:flex;column-gap: 10px;justify-content:center;">
            {{#get "tags" limit="6" include="count.posts" order="count.posts desc"}}
                {{#foreach tags}}
                    <a href="{{url}}">
                        <div class="tag-item" style="background:url({{img_url feature_image size="s"}}) no-repeat center / cover;width:220px;height:150px;display: flex;justify-content: center;align-items: center;border-radius:10px;">
                            <span style="color:#fff;">{{name}}</span>
                        </div>
                    </a>
                {{/foreach}}
            {{/get}}
        </div>
    </div>

post.hb 内容排版改动

<article class="single {{post_class}}">

    <header class="single-header gh-canvas" style="display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;flex-direction: column-reverse;">
        {{#is "post"}}
        <div class="single-meta">
            <span class="single-meta-item single-meta-date">
                <time datetime="{{date format="YYYY-MM-DD"}}">
                    {{date published_at}}
                </time>
            </span>
            <span class="single-meta-item single-meta-length">
                {{reading_time}}
            </span>
            {{#primary_tag}}
                <span class="single-meta-item single-meta-tag">
                    <a class="post-tag post-tag-{{slug}}" href="{{url}}">{{name}}</a>
                </span>
            {{/primary_tag}}

            {{#if @custom.show_author}}
            <div class="single-footer-top">
                
                <div class="author-list">
                    {{#foreach authors}}
                        <div class="author-image-placeholder u-placeholder square">
                            <a href="{{url}}" title="{{name}}">
                                {{#if profile_image}}
                                    <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
                                {{else}}
                                    <span class="u-object-fit">{{> "icons/avatar"}}</span>
                                {{/if}}
                            </a>
                        </div>
                    {{/foreach}}
                </div>
            </div>
            {{/if}}
        </div>
        {{/is}}

        <h1 class="single-title">{{title}}</h1>

        {{#if custom_excerpt}}
            <div class="single-excerpt">
                {{custom_excerpt}}
            </div>
        {{/if}}

        {{#if feature_image}}
        {{#unless no_image}}
                <div style="height: 400px;width: 1070px; padding-top: 120px;padding-left :50px;padding-right:50px">
                <img src="{{img_url feature_image}}" style="width: 100%;height:100%;border-radius:10px; object-fit:cover;" >
               
                 </div>
        {{/unless}}
        {{/if}}
    </header>

    <div class="single-content gh-content gh-canvas">
        {{content}}
    </div>

    {{#is "post"}}
    <div class="gh-canvas">
    <footer class="single-footer">

        <div class="single-footer-left">
            {{#prev_post}}
            <div class="navigation navigation-previous">
                <a class="navigation-link" href="{{url}}" aria-label="Previous post">
                    <span class="navigation-icon">{{> "icons/arrow-left"}}</span>
                    <img src="{{img_url prev_post.feature_image}}">
                </a>
            </div>
            {{/prev_post}}
        </div>

        <div class="single-footer-middle">
            
        </div>

        <div class="single-footer-right">
            {{#next_post}}
            <div class="navigation navigation-next">
                <a class="navigation-link" href="{{url}}" aria-label="Next post">
                    <span class="navigation-icon">{{> "icons/arrow-right"}}</span>
                </a>
            </div>
            {{/next_post}}
        </div>

    </footer>
    </div>
    {{/is}}

</article>

{{!-- The template below includes the markup for each post --}}



{{#foreach posts}}
{{#is "post"}}
<div class="m-recommended-slider__item swiper-slide">
  {{/is}}
  <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}"  style="height: 320px; width: 370px;">
    <div class="m-article-card__picture">
      <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
      {{#if feature_image}}
      <img class="m-article-card__picture-background" src="{{img_url feature_image size=" m"}}" loading="lazy" alt="">
      {{/if}}
      <a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="{{primary_author.name}}"
        data-tippy-content="{{t " Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2"
        prefix=(t "Among with" ) separator=" , " }}">
        {{#if primary_author.profile_image}}
        <div style="background-image: url({{img_url primary_author.profile_image size=" xs"}});"></div>
        {{else}}
        <div style="background-image: url({{asset " images/default-avatar-square-small.jpg"}});"></div>
        {{/if}}
      </a>
      {{#if featured}}
      <a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="{{t " Featured"}}"
        aria-label="{{t " Featured"}}">
        <span class="icon-star" aria-hidden="true"></span>
      </a>
      {{/if}}
    </div>
    {{#if primary_tag}}
    <div class="m-article-card__info">
  
      {{else}}
      <div class="m-article-card__info no-tag">
        {{/if}}
        <a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
          <div>
            <h2
              class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}"
              title="{{title}}">
              {{title}}
            </h2>
          </div>
          <div class="m-article-card__timestamp">
            <span>{{date published_at timeago="true"}}</span>
            {{!-- <span>&bull;</span>
            <span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span> --}}
          </div>
        </a>
      </div>
  </article>
  {{#is "post"}}
</div>
{{/is}}
{{else}}
<div class="m-recommended-slider__item swiper-slide">
  <div class="m-heading no-margin">
    <h3>{{t "No posts found"}}</h3>
    <p>
      {{t "Apparently there are no posts at the moment, check again later."}}
    </p>
  </div>
</div>
{{/foreach}}
<div class="about">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>
<style>
  .m-article-card {
    background-color: var(--background-color);
    border: 1px solid var(--secondary-border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 400px;
    margin-bottom: 20px;
    position: relative;
    transition: all .25s cubic-bezier(.02, .01, .47, 1);
    z-index: 1
  }

  .m-article-card:hover {
    transform: translateY(-5px)
  }

  .m-article-card:hover:before {
    box-shadow: var(--article-shadow-hover), 0 0 0 transparent
  }

  .m-article-card:hover .m-article-card__author {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3), 0 0 0 transparent
  }

  @media only screen and (min-width:48rem) {
    .m-article-card {
      height: 420px;
      margin-bottom: 20px;
      margin-left: 10px;
      margin-right: 10px;
      width: calc(50% - 20px)
    }
  }

  @media only screen and (min-width:64rem) {
    .m-article-card {
      margin-bottom: 40px;
      margin-left: 20px;
      margin-right: 20px;
      width: calc(33.33333% - 40px)
    }
  }

  .m-article-card.no-picture .m-article-card__picture {
    height: 85px !important
  }

  .m-article-card.no-picture .m-article-card__info {
    background-color: var(--secondary-subtle-color)
  }

  .m-article-card.no-picture .m-article-card__title {
    font-size: 1.625rem;
    line-height: 1.4
  }

  .m-article-card.as-author .m-article-card__picture {
    background-color: #000
  }

  .m-article-card.as-author .m-article-card__picture-link {
    z-index: 2
  }

  .m-article-card.as-author .m-article-card__picture-background {
    opacity: .75
  }

  .m-article-card.as-author .m-article-card__info {
    padding: 0
  }

  .m-article-card.as-author .m-article-card__info-link {
    padding: 20px 20px 60px
  }

  .m-article-card:before {
    border-radius: 10px;
    bottom: 0;
    box-shadow: var(--article-shadow-normal), 0 0 0 transparent;
    content: "";
    left: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all .25s cubic-bezier(.02, .01, .47, 1)
  }

  .m-article-card__picture {
    background-color: var(--secondary-subtle-color);
    border-radius: 10px 10px 0 0;
    height: 200px;
    overflow: hidden;
    position: relative;
    transform: translateZ(0)
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__picture {
      height: 220px
    }
  }

  .m-article-card__picture-link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
  }

  .m-article-card__picture-background {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
  }

  .m-article-card__name {
    bottom: 20px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    left: 20px;
    letter-spacing: .4px;
    line-height: 1.3;
    margin: 0;
    position: absolute;
    right: 20px;
    z-index: 1
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__name {
      bottom: 25px;
      left: 25px
    }
  }

  .m-article-card__author {
    border-radius: 50%;
    height: 35px;
    left: 20px;
    position: absolute;
    top: 20px;
    transition: all .25s cubic-bezier(.02, .01, .47, 1);
    width: 35px;
    z-index: 2
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__author {
      left: 25px;
      top: 25px
    }
  }

  .m-article-card__author div {
    background-color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #fff;
    border-radius: 50%;
    height: 100%;
    width: 100%
  }

  .m-article-card__featured {
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    color: #000;
    display: flex;
    height: 24px;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 26px;
    width: 24px;
    z-index: 2
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__featured {
      right: 25px;
      top: 31px
    }
  }

  .m-article-card__featured span {
    color: inherit;
    font-size: .75rem
  }

  .m-article-card__info {
    background-color: var(--background-color);
    border-radius: 0 0 10px 10px;
    flex: 1;
    height: 200px;
    overflow: hidden;
    padding-top: 48px;
    position: relative
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__info {
      padding-top: 53px
    }
  }

  .m-article-card__info.no-tag {
    padding-top: 0 !important
  }

  .m-article-card__info.no-tag .m-article-card__info-link {
    padding-top: 48px
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__info.no-tag .m-article-card__info-link {
      padding-top: 53px
    }
  }

  .m-article-card__tag {
    color: var(--link-color);
    font-size: .875rem;
    font-weight: 600;
    left: 20px;
    letter-spacing: .2px;
    line-height: 1.3;
    position: absolute;
    right: 20px;
    top: 20px
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__tag {
      left: 25px;
      top: 25px
    }
  }

  .m-article-card__info-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 0 20px 20px;
    width: 100%
  }

  @media only screen and (min-width:48rem) {
    .m-article-card__info-link {
      padding: 0 25px 25px
    }
  }

  .m-article-card__title {
    color: var(--titles-color);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .4px;
    line-height: 1.3;
    margin: 0
  }

  .m-article-card__excerpt {
    color: var(--titles-color);
    display: block;
    font-size: 1rem;
    height: 100%;
    letter-spacing: .3px;
    line-height: 1.5;
    overflow: hidden;
    position: relative
  }

  .m-article-card__author-stats,
  .m-article-card__timestamp {
    align-items: center;
    color: var(--titles-color);
    display: flex;
    font-size: .875rem;
    letter-spacing: .2px
  }

  .m-article-card__author-stats span:nth-child(2),
  .m-article-card__timestamp span:nth-child(2) {
    padding: 0 10px
  }

  .m-article-card__author-stats {
    bottom: 20px;
    justify-content: space-between;
    left: 20px;
    position: absolute;
    right: 20px
  }

  .m-article-card__author-stats span {
    padding: 0 !important
  }

  .m-article-card__social {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0
  }

  .m-article-card__social li {
    display: inline-block;
    margin-left: 22px
  }

  .m-article-card__social li a {
    color: var(--primary-foreground-color);
    font-size: .938rem
  }

  .m-article-card__social li a span {
    color: inherit
  }

  .rtl .m-article-card__social {
    direction: ltr
  }

  .m-search {
    -webkit-overflow-scrolling: touch;
    background-color: var(--transparent-background-color);
    height: 100%;
    left: 0;
    opacity: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: scale(1.2);
    transition: all .4s cubic-bezier(.165, .84, .44, 1);
    visibility: hidden;
    width: 100%;
    z-index: 2
  }
</style>

index.html

{{!< default}}

<main class="site-main">

    <header class="feed-header gh-canvas">
        {{#if @custom.feed_title}}
            <div class="feed-header-wrapper">
                <h2 class="feed-header-title">{{@custom.feed_title}}</h2>
            </div>
        {{/if}}
    </header>

     <div style="display:flex;justify-content:center;padding-bottom:1em;padding-top:2em" id="targetElement">
        <div style="display:flex;column-gap: 10px;justify-content:center;">
            {{#get "tags" limit="7"}}
                {{#foreach tags}}
                    <a href="{{url}}">
                        <div class="tag-item" style="background:url({{img_url feature_image size="s"}}) no-repeat center / cover;width:220px;height:150px;display: flex;justify-content: center;align-items: center;border-radius:10px;">
                            <span style="color:#fff;">{{name}}</span>
                        </div>
                    </a>
                {{/foreach}}
            {{/get}}
        </div>
    </div>

    <div class="post-feed{{#match @custom.feed_layout "!=" "Minimal"}} expanded{{/match}}{{#match @custom.feed_layout "Right thumbnail"}} right-thumbnail{{/match}}{{#match @custom.feed_layout "Text-only"}} text-only{{/match}} gh-feed gh-canvas" style="display: flex; flex-wrap: wrap; margin-top:50px;justify-content: center; align-items: center;">
     
            {{> "loop"}}
    
    </div>

    {{pagination}}

</main>

{{#contentFor "body_class"}}{{#if @site.cover_image}} with-full-cover is-head-transparent{{/if}}{{#if @member}} logged-in{{/if}}{{/contentFor}}