1

Hugo 主题移动端开发的一些心得

 2 years ago
source link: https://wocai.de/post/2020/03/hugo-%E4%B8%BB%E9%A2%98%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9A%84%E4%B8%80%E4%BA%9B%E5%BF%83%E5%BE%97/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在开发 Hugo 的主题中，移动端的体验是必不可少的，我总结了一些经验。

一、利用scss优化移动端样式 #

一般情况下，只需要支持手机和非手机两种就行了，如果你做的比较细致，可以分三档，这样平板的体验就会好一些。

为了更好的兼容手机展示，我们需要写大量的媒体查询的css，这样是很复杂的。为了优化这个问题，我们需要引入断点管理。

我使用sass进行开发，如果你目前还是手写css的话，不妨先看一下这篇文章：

在 Hugo 中使用 Sass

在scss文件中，加入以下的内容：

$breakpoints: ('medium': (min-width: 767px),'large': (min-width: 1226px));
/// Responsive manager.
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
    $raw-query: map-get($breakpoints, $breakpoint);
    @if $raw-query {
        $query: if(type-of($raw-query)=='string', unquote($raw-query), inspect($raw-query));
        @media #{$query} {
            @content;
        }
    }
    @else {
        @error 'No value found for `#{$breakpoint}`. '
        +'Please make sure it is defined in `$breakpoints` map.';
    }
}

这段scss起到的作用就是根据你定的breakpoint，在scss中快速加入断点查询。示例如下：

/// 默认用最小宽度写css
.title{
    font-size:18px;
    @mixin respond-to('medium'){
        font-size:20px;
    }
    @mixin respond-to('large'){
        font-size:24px;
    }
}

这样就相当于在一个块中，写完了这个元素在三种不同宽度下的表现，是不是比媒体查询好多了？

二、局域网手机设备调试 #

直接用浏览器的开发者功能也能调试，但是手机设备上的展示更加准确一些。

Hugo本身支持一个小而强悍的服务器，你可以这么做：

hugo server --bind=yourIP --baseURL=http://yourIP:1313

这里bind 参数后面跟着的是你的局域网IP，后面跟着的是带着 http://的局域网IP。

然后用手机访问这个地址，就可以预览了。

三、让手机调试更方便 #

实际的开发中，经常会通过二维码的方式来进行调试，这里我们通过在页面中增加一个二维码，简化输地址的流程。

我在左上角的title元素中，加入：

<h1 class="title">
    {{ if .Site.IsServer }}
    <a href="{{.Site.BaseURL}}" tooltip>{{ .Site.Title }}</a>
    {{ else }}
    <a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a>
    {{ end }}
</h1>

这里的 {{ if .Site.IsServer }} 是用来判断当前是不是本地开发状态，如果是，加上一个tooltip。

在css中，加上：

[tooltip] {
  position: relative;
}

[tooltip]::after {
  display: none;
  content: url(http://qr.topscan.com/api.php?text={{.Site.BaseURL}});
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 20px;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  z-index: 10;
  top:50px;
}

[tooltip]::before {
  display: none;
  content: "当前是开发环境，手机扫码预览";
  position: absolute;
  top:50px;
  width: 600px;
  font-size: $font-p;
  font-weight: 400;
  border: 5px solid transparent;
  border-bottom-width: 0;
  z-index: 20;
}

[tooltip]:hover::after {
  display: block;
}

[tooltip]:hover::before {
  display: block;
}

这里 content: url(http://qr.topscan.com/api.php?text={{.Site.BaseURL}}); 相当于生成了一个你本地url的二维码。

这样鼠标放到logo上的时候，就出现了如下效果：

预览二维码

这里的css来自聪明的汤姆。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK