更新日志

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中直接删除,就变透明了。

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

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

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