[Feature]: 新增文章默认布局配置选项: horizontalOrVertical

[ultravires]

想要的功能 | What feature do you want?

新增功能：

_config.butterfly.yml:

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: false
  archives_enable: false
  # the position of cover in home page (封面顯示的位置)
  # top/left/right/both
  position: top
  # horizontal/vertical (文章封面与内容的布局)
  direction: vertical
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    - https://source.unsplash.com/random/1126x260

post-ui.pug:

mixin postUI(posts)
  each article , index in page.posts.data
  - const direction = theme.cover.direction
  - let horizontalOrVertical = direction === 'vertical' ? 'vertical' : 'horizontal'
      .recent-post-item(class=horizontalOrVertical)

css/_page/homepage.styl:

#recent-posts
  & > .recent-post-item:not(:first-child)
    margin-top: 20px

  & > .recent-post-item
    @extend .cardHover
    display: flex
    flex-direction: row
    align-items: center
    overflow: hidden
    height: 16.8em

    &.vertical
      flex-direction: column
      height: auto

    +maxWidth768()
      flex-direction: column
      height: auto

    &:hover
      img.post-bg
        transform: scale(1.1)

    &.ads-wrap
      display: block !important
      height: auto !important

    .post_cover
      overflow: hidden
      width: 42%
      height: 100%

      +maxWidth768()
        width: 100%
        height: 230px

      .post-bg
        @extend .imgHover

      &.right
        order: 1

        +maxWidth768()
          order: 0

    &.vertical .post_cover
      width: 100%
      height: 260px

      +maxWidth768()
        height: 230px

    & >.recent-post-info
      padding: 0 40px
      width: 58%

      +maxWidth768()
        padding: 20px 20px 30px
        width: 100%

      &.no-cover
        width: 100%

        +maxWidth768()
          padding: 30px 20px

      & > .article-title
        @extend .limit-more-line
        margin-bottom: 20px
        color: var(--text-highlight-color)
        font-size: 1.55em
        line-height: 1.4
        transition: all .2s ease-in-out
        -webkit-line-clamp: 2

        .sticky
          margin-right: 10px
          color: $sticky-color
          transform: rotate(45deg)

        +maxWidth768()
          font-size: 1.43em

        &:hover
          color: $text-hover

      & > .article-meta-wrap
        margin: 6px 0
        color: $theme-meta-color
        font-size: .9em

        & > .post-meta-date
          cursor: default

        i
          margin: 0 4px 0 0

        .fa-spinner
          margin: 0

        .article-meta-label
          if hexo-config('post_meta.page.label')
            padding-right: 4px
          else
            display: none

        .article-meta-separator
          margin: 0 6px

        .article-meta-link
          margin: 0 4px

        if hexo-config('post_meta.page.date_format') == 'relative'
          time
            display: none

        a
          color: $theme-meta-color

          &:hover
            color: $text-hover
            text-decoration: underline

      & > .content
        @extend .limit-more-line
        -webkit-line-clamp: 2
        margin-bottom: 20px

    &.vertical >.recent-post-info
      width: 100%
      padding: 30px 20px

Preview: https://ultravires.github.io/

[jerryc127]

后续版本应该会添加

[ultravires]

如果上述代码可行的话，我愿意提交一下 Merge Request。