基于 Hugo 的网站搭建日志 02

本章主要围绕 hugo stack 主题进行一些个性化设计，你也可以按照自己的需求进行设计~

完成效果

全局设置

在themes/hugo-theme-stack/assets/scss/custom.scss文件中加入以下代码

/*---------------全局设置-------------*/
:root {
  --card-border-radius: 20px; //小卡片圆角
  --article-font-size: 1.7rem; // 全局字体大小
  //--card-background: #ffffff;//小卡片背景颜色
  //--body-text-color: rgba(171, 169, 169, 0.58);//字体颜色


}


/*选中文字颜色*/
::selection {
  color: #fff;
  background: #557697;
}


/*滚动条样式*/
html {
  ::-webkit-scrollbar {
    width: 18px;
    //display: none; //隐藏滚动条
  }

  ::-webkit-scrollbar-track {
    //background-color: #fff; //滚动条背景颜色
  }

  ::-webkit-scrollbar-thumb {
    //鼠标移动上去前的滚动条颜色
    background-color: rgba(111, 114, 115, 0.65); 
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    //鼠标移动上去时的滚动条颜色
    background-color: #232525; 
  }
}

首页欢迎栏

要修改的地方

HTML 文件修改

首先找到layouts/index.html文件，在第二行插入以下代码：

<!--首页欢迎横幅-->
<div class="welcome">
    <p style="font-size: 2rem; text-align: center; font-weight: bold;">
        <span class="jump-text1">👋 Welcome</span>
        <span class="jump-text2"> To </span>
        <span class="jump-text3">L</span><span class="jump-text4">o</span><span class="jump-text5">v</span><span class="jump-text6">i</span><span class="jump-text7">r</span>
        <span class="jump-text8">'s</span>
        <span class="jump-text9">Blog</span>
    </p>
</div>

完成图

我这里把每个文字拆开放入<span>元素内是为了实现动画效果，你要是不需要动画可以直接写成

<div class="welcome">
        <p style="font-size: 2rem;text-align: center;font-weight: bolder;">👋Welcome To <span style="color:#e99312">my Blog</span></p>
    </div>

CSS 文件修改

在themes/hugo-theme-stack/assets/scss/custom.scss文件中加入以下代码

.welcome {
  color: var(--card-text-color-main);
  background: var(--card-background);
  box-shadow: var(--shadow-l2);
  border-radius: 30px;
  display: inline-block;
}

如果你想要实现文字跳动效果，则继续加入

.jump-text1 {
  display: inline-block;
  animation: jump 0.5s 1;
}

.jump-text2 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.1s
}

.jump-text3 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.2s
}

.jump-text4 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.3s
}

.jump-text5 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.4s
}

.jump-text6 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.5s
}

.jump-text7 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.6s
}

.jump-text8 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.7s
}

.jump-text9 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.9s
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

由于我比较笨，不会使用Javascript，所以这里只能一下子加9个延迟动画来代替

主页文章相关设置

主页布局

在themes/hugo-theme-stack/assets/scss/custom.scss文件中加入以下代码

/*主页布局间距调整*/
.main-container {
  gap: 50px; //文章宽度

  @include respond(md) {
    padding: 0 30px;
    gap: 40px; //中等屏幕时的文章宽度
  }
}

.related-contents {
  overflow-x: visible; //显示隐藏的图标
  padding-bottom: 15px;
}

主页文章样式

要修改的地方

/*主页文章图片样式*/
$image-scale: 1.2;
.article-list article .article-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  //不同显示器（手机，小屏幕电脑，大屏幕电脑）显示的图片高度大小
  @include respond(sm) {
    height: 305px;
  }

  @include respond(md) {
    height: 305px;
  }
  @include respond(xl) {
    height: 325px;
  }
}

/*主页文章图片圆角*/
.article-list article {
  --card-border-radius: 24px;
}

/*文章标签圆角*/
.article-category a, .article-tags a {
  border-radius: 11px;
}


/*鼠标移动到文章图片放大*/
.article-list article .article-image {
  position: relative;
  overflow: hidden; //不显示超出的部分
}

.article-list article .article-image img:hover {
  transform: scale($image-scale); //放大尺寸
}

.article-list article .article-image img {
  transition: transform 0.85s ease-in-out;//持续时间
}

文章内部

左侧导航栏

/*--------------------左侧导航栏---------------*/
.left-sidebar {
  --sidebar-avatar-size: 115px; //左侧头像大小
  --sidebar-element-separation: 15px; //头像下方间距
  --emoji-size: 40px; //emoji容器大小
  --emoji-font-size: 25px; //emoji字体大小
}



/*头像旋转动画*/
.sidebar header .site-avatar .site-logo {
  transition: transform 1.65s ease-in-out; //旋转时间

}

.sidebar header .site-avatar .site-logo:hover {
  transform: rotate(360deg); //旋转角度为360度
}


/*社交菜单居中*/
.social-menu svg {
  gap: 15px;
  justify-content: center;
  width: 30px;
  height: 30px; //社交菜单大小
  stroke: var(--body-text-color);
  stroke-width: 1.33;
}


/*暗色模式按钮距离上边按钮边距调整*/
.menu .menu-bottom-section {
  margin-top: 70px;
}

#dark-mode-toggle {
  gap: 30px; //暗色模式横向长度
}


/*下拉菜单美化*/
.menu {
  list-style: none;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll; //搭配菜单滚动条美化使用
  flex-grow: 1;
  font-size: 1.7rem;
  //background-color: rgb(252, 252, 252);

  box-shadow: var(--shadow-l2); //改个阴影
  display: none;
  margin: 0; //改为0
  border-radius: 20px; //加个圆角
  padding: 30px 30px;

  @include respond(xl) {
    padding: 15px 0;
  }

  &,
  .menu-bottom-section {
    gap: 30px;

    @include respond(xl) {
      gap: 25px;
    }
  }

  &.show {
    display: flex;
  }

  @include respond(md) {
    align-items: flex-end;
    display: flex;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    margin: 0;
  }

  li {
    position: relative;
    vertical-align: middle;
    padding: 0;

    @include respond(md) {
      width: 100%;
    }

    svg {
      stroke-width: 1.33;

      width: 20px;
      height: 20px;
    }

    a {
      height: 100%;
      display: inline-flex;
      align-items: center;
      color: var(--body-text-color);
      gap: var(--menu-icon-separation);
    }

    span {
      flex: 1;
    }

    &.current {
      a {
        color: var(--accent-color);
        font-weight: bold;
      }
    }
  }
}


/*手机模式下的菜单滚动条美化*/
.menu::-webkit-scrollbar {
  display: none; //防止大屏幕时出现滚动条
}

.sidebar header .site-name {
  margin: 8px;
  font-size: 2rem; //字体大小
}

右侧导航栏

/*------------------右侧导航栏--------------*/
/*搜索菜单动画*/
.search-form.widget {
  transition: transform 0.6s ease;
}

.search-form.widget:hover {
  transform: scale(1.1, 1.1);
}


/*归档小图标放大动画*/
.widget.archives .widget-archive--list {
  transition: transform .3s ease;
}

.widget.archives .widget-archive--list:hover {
  transform: scale(1.05, 1.05);
}


/*右侧标签放大动画*/
.tagCloud .tagCloud-tags a {
  border-radius: 10px;
  font-size: 1.4rem;
  transition: transform .3s ease;
}

.tagCloud .tagCloud-tags a:hover {
  transform: scale(1.1, 1.1);
}

归档页面

/*----------------归档页面---------------*/
/*归档页面卡片缩放*/
.article-list--tile article {
  transition: .6s ease;
}

.article-list--tile article:hover {
  transform: scale(1.03, 1.03);
}

链接页面

/*--------------*-链接页面-----------------*/
/*友情链接设置成三栏样式*/
@media (min-width: 1024px) {
  .article-list--compact.links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: none;
    box-shadow: none;
    gap: 1rem;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px;
      border-radius: var(--card-border-radius);

      &:nth-child(odd) {
        margin-right: 8px;
      }
    }
  }
}