纸糖织猫

更新日志

v1.3.6

  • 添加折叠功能
    参考
    增加两种样式，一种没有文本提示，另一种有文本提示
    在/layouts/shortcodes中,新建 spoiler.html，并在其中添加

    有文本提示 
    <details>
  <summary>
      {{ with .Get 0}}{{.}}{{else}}click to expand{{ end }}
  </summary>
  {{.Inner}}
</details>

无文本提示

<details>
  <summary>
  </summary>
  {{.Inner}}
</details>
v1.3.5
  • 将友链样式从单列改成双列
    在/assets/scss/custom/_custom.scss中将之前的友链样式删去，并添加 
    // 友链
@import "friends";
    之后在同一目录下添加_friends.scss文件，在其中写入 
    .friends-link::after {
    content: " ";
    display: block;
    clear: both;
}

.friends-link {
    display: grid;
    grid-gap: 0 1.5em;
    grid-template-columns: 1fr 1fr;
}

.friends {
    padding: 1em 0;
    border-bottom: 1px dashed var(--color-contrast-low);
    display: flex;
    transition: all .5s;
    text-decoration: none !important;
    overflow: hidden;
    .friend {
        text-decoration: none;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .name {
        font-weight: bold;
        margin: 0.375em 0;
    }
    .excerpt {
        font-size: 0.8em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .avatar {
        width: 4em !important;
        height: 4em !important;
        margin: 0 1em 0 0 !important;
        z-index: 0;
    }
}

@media (max-width: $maxWidth) {
    .friends-link {
        grid-template-columns: 1fr;
    }
}
v1.3.1

  • 修改图片大小
    在/assets/scss/layout/_single.scss中

    .post {
    img {
         max-width: 80%;
        }

  • 新增图片轮播短代码

    {使用时将这段话删除{< imgloop "URL1,URL2,URL3,URL4,URL5" >}}

    参考1，参考2
    在/layouts/shortcodes中,新建 imgloop.html，并在其中添加

    {{ if .Site.Params.enableimgloop }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
  <!-- Swiper -->
  <div class="swiper-container">
      <div class="swiper-wrapper">
          {{$itItems := split (.Get 0) ","}}
          {{range $itItems }}
          <div class="swiper-slide">
              <img src="{{.}}" alt="">
          </div>
          {{end}}
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
   <!-- Initialize Swiper -->
   <script>
      var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
      //自动调节高度
      autoHeight: true,
      //键盘左右方向键控制
      keyboardControl : true,
      //鼠标滑轮控制
      mousewheelControl : true,
      //自动切换
      //autoplay : 5000,
      //懒加载
      lazyLoading : true,
  	lazyLoadingInPrevNext : true,
  	//无限循环
  	loop : true,
      });
      </script>
{{ end }}

    在/assets/scss/custom/_custom.scss中添加

    //图片轮播
.swiper-container {
  max-width: 820px;
  margin: 2em auto;

}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background-color: #f3f0f0;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  img {
      margin: 0 !important;
  }
}

    在config.toml中添加

    # 是否开启轮播图
enableimgloop = true
v1.3.0
  • 添加首页图片
    通过config.toml中的“poetry 诗意人生”添加图片，如果是"page"模式要么会产生标题影响观感，要么会导致首页的网页名字消失
v1.2.9
  • 添加修改段落间距
    在/assets/scss/layout/_single.scss中 
    .post {
  p {
      margin: 1em 0;
      line-height: $lineHeight; //行间距(在config.toml中调整)
      padding:10px 0; //段落间距
  }
v1.2.8
  • 给Markdown中的着重格式添加边框
    例：这里被着重了
    和v1.2.7一样，在/assets/scss/layout/_single.scss修改代码与代码块样式 
    code {
  ...
  font-size: 90%;
  border: 1px solid #272822;
}

pre {
  ...
  padding: 0px 30px 0px 30px; //左右内边距为30px
  line-height: 1.8;//行高为1.8
  border:0.5px  solid #272822; //边框宽度为23px，颜色为#272822
  max-height: 230px; //限制代码块高度为230px[1]
  code {
    ...
  }
}
// 代码块里的代码
pre code {
  border: none; //为了让着重有框，但代码块里的代码没有框   
}
  • [1]如果meme的config.toml中的是否开启竖直滚动 enableOverflowY = true ，则优先调用config.toml中的代码块高度设置
v1.2.7
  • 给代码块添加边框
    参考
v1.2.6
v1.2.5
  • 采用submodule的形式自定义
    重置并添加了因添加音乐播放器而变更的head.html文件,但感觉降低了加载速度...?，参考
  • 更改评论功能
    将评论功能更改为Waline，参考1,参考2，
v1.2.0
  • 添加评论功能
    使用Valine添加评论功能，并解决无法发评论的问题，参考1,参考2
v1.1.5
  • 添加站点浏览量统计
    使用Umami进行站点浏览量统计，参考1,参考2
v1.1.1
  • 自定义首页
    在content文件夹下添加_index.md文件并在config.toml中修改首页为"page"模式
v1.0.1
  • 添加“文章内插入播放器”功能，参考
v1.0.0
初始化
  • 基于hugo_extended_0.89.0的MemE主题搭建。
自定义

  • 背景颜色和顶栏颜色
    更改后的背景颜色为#f3f0f0，由于是通过_custom.scss更改，再加上自己目前技术力不足，暗色主题现在变成只是文字颜色变淡，对使用暗色主题的用户说声抱歉，之后想起来的话会再折腾折腾，暂时把暗色模式关掉了。
    顶栏颜色是在config.toml中直接删除,就变透明了。

  • 网页图标
    替换为像素画。

  • 添加两个图标
    使用在顶栏上面。

将来
  • 对首页不太满意，但尝试了很多次也不知道怎么修改，先设置成“摘要”模式了，以后有机会再修改吧。
  • 想开字数统计，但开了之后“关于”页面也会有字数统计，不知道该怎么修改，先关掉了。
  • 修改评论框样式
  • 评论邮箱提醒功能
  • 加背景图片（还没画）
  • 修改评论匿名头像（也还没画）