archives文章归档美化-四次元拾光

AI智能摘要

The article details the process of enhancing the visual style of Hexo blog archive, tag, and category pages by implementing custom CSS and PUG code. It describes color customizations for dark mode, adjustments for layout and hover effects, and dimensions for image and text elements. The code replaces the default `article-sort.pug` and `archives.styl` files to give a polished appearance with interactive transitions. Recommended for the 'Anzhiyu' theme, it also involves executing the hexo clean, generate, and server commands for the changes to take effect.

— 此摘要由AI分析文章内容生成，仅供参考。

添加CSS样式

颜色可改为自己喜欢的样式

:root {
  --icedream-color: #49A6E9;
  --icedream-hover-color: #ECAFFF;
  --icedream-widget-hover: #CFF0FF;
  --icedream-font-white: #FDFDFD;
  --icedream-light-green: #B2FFCA;
  --icedream-light-purple: #F6B9FF;
  --icedream-green: #11D991;
  --icedream-purple: #E764FF;
  --icedream-light-grey: #F2F2F2;
  --icedream-card-bg: rgba(255,255,255,0.45);
  --icedream-emphasis-color: #F7F81A;
  --icedream-bgblur: blur(10px);
  --icedream-footer-bg: linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.7) 40%);
  --icedream-font-grey: #888888;
  --icedream-categorycard-bg: linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,1))
}

[data-theme='dark'] {
  --global-bg:black;
  --icedream-color: #1688C9;
  --icedream-widget-hover: #1B6587;
  --icedream-card-bg: rgba(0,0,0,0.7);
  --icedream-footer-bg: linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.7) 40%);
  --icedream-font-grey: #BBBBBB;
  --icedream-categorycard-bg:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,1))
}

/* 归档、标签、分类页 */
.layout.hide-aside{
  max-width:1200px;
}

#archive,#tag,#category {
  background: var(--icedream-card-bg);
  padding: 25px 10px;
}

.article-sort-title{
  margin-top:30px;
  margin-bottom:20px;
}

.article-sort-item::before, .article-sort-title::before, .article-sort-title::after {
  content: none;
}

.article-sort .year{
  width:100%!important;
  border-bottom:dashed 5px var(--icedream-color);
  font-size:26px;
  margin-top:20px;
}

.article-sort{
  border:none;
  display:flex;
  flex-wrap:wrap;
  margin:20px 20px;
  padding:0;
}

.article-sort-item:not(.year){
  padding:8px 10px;
  width:calc(50% - 0.8rem);
  margin:0.4rem;
  border:2px solid var(--icedream-color);
  border-radius:15px;
  background:var(--card-bg);
  transition:0.5s;
  height:120px;
}

.article-sort-item-a{
  position:absolute;
  width:100%;
  height:100%;
}

.article-sort-item-img{
  transition:0.5s;
  height:90px;
  width:140px;
}

.article-sort-item > a >img{
  border-radius:15px;
}

.article-sort-item-title {
  font-size: 15px;
  padding-left: 10px;
  margin: 10px 0;
  line-height:25px;
  text-overflow:ellipsis;
}

.article-sort-item-title:hover{
  transform:none;
}

.article-sort-meta{
  height: min-content;
  position: relative;
}

.article-sort-meta > .article-meta-wrap{
  float:left;
  position: absolute;
}

.article-sort-meta > .article-sort-item-time{
  opacity: 0;
  float: right;
  color:var(--icedream-light-grey)!important;
}

.article-sort-item-categories,.article-sort-item-tags{
  margin:0 3px;
  padding:5px 8px;
  border-radius:25px;
  border:1px solid var(--dark-grey);
  font-size:12px;
  transition:0.5s;
}

.article-sort-item-info > div:not(.article-sort-meta){
  display:flex;
}

.article-sort-description,.article-sort-item > i{
  width:0;
  opacity:0;
  overflow:hidden;
  transition:0.5s;
}

.article-sort-description {
  width: 0;
  height: 59px;
  vertical-align: middle;
  margin: 0px 0px 0 10px;
  text-overflow:ellipsis;
}

.article-sort-item:hover:not(.year){
  background-color:var(--icedream-color);
  box-shadow: 0 0 10px var(--icedream-color);
}

.article-sort-item:hover:not(.year){
  background-color:var(--icedream-color);
  box-shadow: 0 0 10px var(--icedream-color);
}

.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) > i{
  width:auto;
  opacity:1;
}

.article-sort-item:hover:not(.year)  .article-sort-meta > .article-sort-item-time:not(.year) {
  opacity: 1;
}

.article-sort-item:hover:not(.year) .article-sort-description{
  width:auto;
}

.article-sort-item:hover:not(.year) .article-sort-item-img{
  transition:0.5s;
  width:0;
}

.article-sort-item:hover:not(.year) .article-sort-item-title{
  color:var(--icedream-font-white)!important;
}

.article-sort-item:hover:not(.year) .article-meta-wrap a,.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) .article-sort-item-time:hover:not(.year){
  color:var(--icedream-light-grey)!important;
}

.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) > i{
  width:auto;
}

.article-sort-item:hover(.year).article-sort-item:hover:not(.year) .article-sort-item-info:hover:not(.year) .article-sort-item-time:hover:not(.year) > i {
  color:var(--icedream-light-grey)!important;
}

.article-sort-item:hover:not(.year) .article-sort-item-categories{
  border:1.5px solid var(--icedream-green);
}

.article-sort-item:hover:not(.year) .article-sort-item-tags{
  border:1.5px solid var(--icedream-purple);
}

.article-sort-item:hover:not(.year) .article-sort-item-categories:hover{
  background:var(--icedream-green);
  box-shadow:0 0 5px var(--icedream-green);
}

.article-sort-item:hover:not(.year) .article-sort-item-tags:hover{
  background:var(--icedream-purple);
  box-shadow:0 0 5px var(--icedream-purple);
}

@media screen and (max-width:768px) {
  .article-sort-item:not(.year) {
      width: 100%;
  }

  .article-sort-meta > .article-meta-wrap {
      display: none;
  }

  .article-sort-item-title {
      font-size: 16px;
  }

  .article-sort-item-img{
      width:90px;
  }
}

将主题目录下的 /layout/includes/mixins/article-sort.pug文件全部替换为以下内容

mixin articleSort(posts)
  .article-sort
    - var year
    - posts.each(function (article) {
      - let tempYear = date(article.date, 'YYYY')
      - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
      - let title = article.title || _p('no_title')
      if tempYear !== year
        - year = tempYear
        .article-sort-item.year= year
      .article-sort-item(class=no_cover)
        a.article-sort-item-a(href=url_for(article.path) title=title)
        if article.cover && theme.cover.archives_enable
          a.article-sort-item-img(href=url_for(article.path) title=title)
            img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
        .article-sort-item-info
          div
            a.article-sort-item-title(href=url_for(article.path) title=title)= title
            .article-sort-description= article.description
          .article-sort-meta
            .article-meta-wrap
              if (theme.post_meta.page.categories && article.categories.data.length > 0)
                span.article-sort-item-categories
                  each item, index in article.categories.data
                    a(href=url_for(item.path)).article-meta__categories #[=item.name]
                    if (index < article.categories.data.length - 1)
                      i.fas.fa-angle-right
              if (theme.post_meta.page.tags && article.tags.data.length > 0)
                span.article-sort-item-tags
                  each item, index in article.tags.data
                    a(href=url_for(item.path)).article-meta__tags #[=item.name]
                    if (index < article.tags.data.length - 1)
                      span.article-meta__link #[=' ']
            .article-sort-item-time
              i.far.fa-calendar-alt
              time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
        i.fas.fa-chevron-right
    - })

!如果使用的是安知鱼主题，还需要将 themes/anzhiyu/source/css/_page/archives.styl文件全部替换为以下内容

.article-sort
  margin-left: 10px
  padding-left: 20px
  border-left: 2px solid lighten($light-blue, 20)

  &-title
    position: relative
    margin-left: 10px
    padding-bottom: 20px
    padding-left: 20px
    font-size: 1.72em
    margin: 0.25rem;
    padding: 0;
    border: none;
    font-weight: bold;
    font-size: 2em;

    &:hover
      &:before
        border-color: var(--pseudo-hover)

    &:before
      position: absolute
      top: calc(((100% - 36px) / 2))
      left: -9px
      z-index: 1
      width: w = 10px
      height: h = w
      border: .5 * w solid $light-blue
      border-radius: w
      background: var(--card-bg)
      content: ''
      line-height: h
      transition: all .2s ease-in-out

    &:after
      position: absolute
      bottom: 0
      left: 0
      z-index: 0
      width: 2px
      height: 1.5em
      background: lighten($light-blue, 20)
      content: ''

  &-item
    position: relative
    display: flex
    align-items: center
    margin: 0 0 20px 10px
    transition: all .2s ease-in-out

    &:hover
      &:before
        border-color: var(--pseudo-hover)

    &:before
      $w = 6px
      position: absolute
      left: calc(-20px - 17px)
      width: w = $w
      height: h = w
      border: .5 * w solid $light-blue
      border-radius: w
      background: var(--card-bg)
      content: ''
      transition: all .2s ease-in-out

    &.no-article-cover
      height: 80px

      .article-sort-item-info
        padding: 0

    &.year
      font-size: 1.43em

      &:hover
        &:before
          border-color: $light-blue

      &:before
        border-color: var(--pseudo-hover)

    &-time
      color: $theme-meta-color
      font-size: 95%

      time
        padding-left: 6px
        cursor: default

    &-title
      @extend .limit-more-line
      color: var(--font-color)
      font-size: 1.1em
      transition: all .3s
      -webkit-line-clamp: 2

      &:hover
        color: $text-hover
        transform: translateX(10px)

    &-img
      overflow: hidden
      width: 80px
      height: 80px

      :first-child
        @extend .imgHover

    &-info
      flex: 1
      padding: 0 0 0 16px

执行 hexo三连

版权声明 1 本网站名称：四次元拾光
2 本站永久网址： https://yuika.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
5 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

THE END