1. 提示块 note

1

{% note info flat %}说明文字{% endnote %}

2. 标签页 tabs

1
2
3
4
5
6
7
8

{% tabs 分组名 %}
<!-- tab 第一个标签 -->
内容一
<!-- endtab -->
<!-- tab 第二个标签 -->
内容二
<!-- endtab -->
{% endtabs %}

1
2

title: 示例
tags: [Hexo]

1

{ "title": "示例", "tags": ["Hexo"] }

3. 折叠 hideToggle

1
2
3

{% hideToggle 点开看更多 %}
被折叠的内容
{% endhideToggle %}

4. 按钮、标签、居中标题

1
2
3

{% btn https://hexo.io/zh-cn/, Hexo 文档, hexo %}
{% label 绿色标签 green %}
<h2 style="text-align:center">居中的大标题</h2>

5. 时间线与画廊

1
2
3
4
5
6
7

{% timeline 标题 %}
<!-- timeline 2026-10-01 -->
条目一
<!-- endtimeline -->
{% endtimeline %}

{% galleryGroup '分组名' '描述' '/链接' 封面图 %}

6. 图表 mermaid

  graph LR  A[写 Markdown] --> B[hexo generate]  B --> C[gulp 压缩]  C --> D[推到托管平台]  

一个跑在 Hexo 6.3.0 上的静态站点，主题是 hexo-theme-fomalhaut v1.0.4（基于 Butterfly 4.3.1 二次开发）。
仓库里 source/_posts/ 下只有这一篇与另一篇《外挂标签速查》作为示例，其余空位留给你自己填。

三步换成你自己的站

1. 改站点信息

打开根目录的 _config.yml：

1
2
3

title: 你的站点名
author: 你的名字
url: https://your-domain.com/

2. 改主题配置

主题的所有开关都在根目录的 _config.fomalhaut.yml：

1
2
3
4
5
6
7

avatar:
  img: /assets/avatar.webp      # 换成你自己的头像

social:                          # 社交链接，格式： 名称: 链接 || 图标 || 动画
  Github: https://github.com/yourname || icon-github || faa-tada

index_img: /assets/head.jpg      # 首页大图

3. 写文章、跑起来

1
2
3

hexo new post "我的第一篇文章"   # 在 source/_posts/ 生成
hexo server                      # 本地预览 http://localhost:4000
hexo generate && gulp            # 构建（gulp 负责压缩）

这篇示例用到的写法

上面用到了 {% note info flat %}...{% endnote %} 提示块、二级/三级标题、行内代码与代码块。
更多外挂标签（时间线、标签页、画廊、按钮、折叠、Mermaid 等）见另一篇《外挂标签速查》。

项目简介

大厂都在卷AI编程的赛道，无论是网页还是AI应用生成器，这是当下的风口。

像百度的秒哒，美团的noCode都可以做到零代码编程

百度-秒哒

网址：https://console.bce.baidu.com/miaoda/design

美团-NoCode

网址：https://nocode.cn/

我自己亲身实践了一下百度的秒哒，确实爽的飞起~~~~

我用秒哒生成了一个幸运抽取网站，如果生成的样式和自己的想法有所不同，可以继续修改prompt来改进自己的项目。

我马上也开始了这种零代码的开发，手撕一个属于自己的零代码开发平台！！

好~~ 那么新项目就叫 兔子应用生成

项目初始化

环境准备

1）安装的 JDK 版本必须 >= 17，推荐使用 21 版本！

2）MyS؜QL 数据库最好安‎装 8.x 版本，⁢或者 5.7 版本‎。

新建项目

选择 Sprin؜g Boot 3.5.x 版本，‎必须添加的依赖包括 Spring⁢ Web、MySQL、Lombo‎k，Spring Boot De‎vTools 可以按需选取：

当然，后续通过修改 Maven 配置添加依赖也是可以的。

💡 小提示，如果 Lombok 依赖报错的话，可以手动指定 Lombok 的版本，修改 pom.xml 的代码：

1
2
3
4
5
6

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
  <version>1.18.36</version>
    <optional>true</optional>
</dependency>

整合依赖

Hutool工具库

不多bb，Hutool yyds！！

参考官方文档引入：https://doc.hutool.cn/pages/index/#%F0%9F%8D%8Amaven

1
2
3
4
5

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.38</version>
</dependency>

Knife4j接口文档

参考官方文档引入：https://doc.xiaominfo.com/docs/quick-start#spring-boot-3

1
2
3
4
5

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId>
    <version>4.4.0</version>
</dependency>

这里需要在配置文件中加入配置

1
2
3
4
5
6
7
8
9
10

# springdoc-openapi
springdoc:
  group-configs:
    - group: 'default'
      packages-to-scan: com.fantasy.rabbitaicodemother.controller
# knife4j
knife4j:
  enable: true
  setting:
    language: zh_cn

继续测试一下我们的swagger~~~

1
2
3
4
5
6
7
8
9

@RestController
@RequestMapping("/health")
public class HealthController {

    @GetMapping("/")
    public String healthCheck() {
        return "ok";
    }
}

这里发现swagger已经成功有了接口，说明可以正常使用了~~

那么接下来就需要继续写一些通用的代码

样板代码

这时候再来一个自定义错误码，用于统一返回错误信息

所以在 exception 包下新建错误码枚举类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

@Getter
public enum ErrorCode {

    SUCCESS(0, "ok"),
    PARAMS_ERROR(40000, "请求参数错误"),
    NOT_LOGIN_ERROR(40100, "未登录"),
    NO_AUTH_ERROR(40101, "无权限"),
    NOT_FOUND_ERROR(40400, "请求数据不存在"),
    FORBIDDEN_ERROR(40300, "禁止访问"),
    SYSTEM_ERROR(50000, "系统内部异常"),
    OPERATION_ERROR(50001, "操作失败");

    /**
     * 状态码
     */
    private final int code;

    /**
     * 信息
     */
    private final String message;

    ErrorCode(int code, String message) {
        this.code = code;
        this.message = message;
    }

}

有了自定义的错误码，自然也要生成自定义异常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@Getter
public class BusinessException extends RuntimeException {

    /**
     * 错误码
     */
    private final int code;

    public BusinessException(int code, String message) {
        super(message);
        this.code = code;
    }

    public BusinessException(ErrorCode errorCode) {
        super(errorCode.getMessage());
        this.code = errorCode.getCode();
    }

    public BusinessException(ErrorCode errorCode, String message) {
        super(message);
        this.code = errorCode.getCode();
    }
}

那么，问题来了，什么时候抛这个自定义异常呢？难道还要用if来判断吗，那也太麻烦了

不如直接生成一个专门抛异常的类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

public class ThrowUtils {

    /**
     * 条件成立则抛异常
     *
     * @param condition        条件
     * @param runtimeException 异常
     */
    public static void throwIf(boolean condition, RuntimeException runtimeException) {
        if (condition) {
            throw runtimeException;
        }
    }

    /**
     * 条件成立则抛异常
     *
     * @param condition 条件
     * @param errorCode 错误码
     */
    public static void throwIf(boolean condition, ErrorCode errorCode) {
        throwIf(condition, new BusinessException(errorCode));
    }

    /**
     * 条件成立则抛异常
     *
     * @param condition 条件
     * @param errorCode 错误码
     * @param message   错误信息
     */
    public static void throwIf(boolean condition, ErrorCode errorCode, String message) {
        throwIf(condition, new BusinessException(errorCode, message));
    }
}

接下来就是每一个controller层都要返回的通用响应类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@Data
public class BaseResponse<T> implements Serializable {

    private int code;

    private T data;

    private String message;

    public BaseResponse(int code, T data, String message) {
        this.code = code;
        this.data = data;
        this.message = message;
    }

    public BaseResponse(int code, T data) {
        this(code, data, "");
    }

    public BaseResponse(ErrorCode errorCode) {
        this(errorCode.getCode(), null, errorCode.getMessage());
    }
}

但是如果用了这个通用响应类，那我每一次在controller层返回结果的时候，都要new一个对象，再把code，data，message都输入出来，这也太麻烦了

所以，我们写一个工具类，其实就是把各种可能的结果都用static列了出来，比如我们直接就可以ResultUtils.sucess()就ok了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

public class ResultUtils {

    /**
     * 成功
     *
     * @param data 数据
     * @param <T>  数据类型
     * @return 响应
     */
    public static <T> BaseResponse<T> success(T data) {
        return new BaseResponse<>(0, data, "ok");
    }

    /**
     * 失败
     *
     * @param errorCode 错误码
     * @return 响应
     */
    public static BaseResponse<?> error(ErrorCode errorCode) {
        return new BaseResponse<>(errorCode);
    }

    /**
     * 失败
     *
     * @param code    错误码
     * @param message 错误信息
     * @return 响应
     */
    public static BaseResponse<?> error(int code, String message) {
        return new BaseResponse<>(code, null, message);
    }

    /**
     * 失败
     *
     * @param errorCode 错误码
     * @return 响应
     */
    public static BaseResponse<?> error(ErrorCode errorCode, String message) {
        return new BaseResponse<>(errorCode.getCode(), null, message);
    }
}

好，接下来就是全局异常处理器了

有人问，全局异常处理器是干嘛用的？其实这个就是来增加代码的健壮性，所谓“健壮性"就是让程序在运行的时候遇到我们一般预示不到的异常时保证自己的程序不中断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@Hidden
@RestControllerAdvice
@Slf4j
public class GlobalExceptionHandler {

    @ExceptionHandler(BusinessException.class)
    public BaseResponse<?> businessExceptionHandler(BusinessException e) {
        log.error("BusinessException", e);
        return ResultUtils.error(e.getCode(), e.getMessage());
    }

    @ExceptionHandler(RuntimeException.class)
    public BaseResponse<?> runtimeExceptionHandler(RuntimeException e) {
        log.error("RuntimeException", e);
        return ResultUtils.error(ErrorCode.SYSTEM_ERROR, "系统错误");
    }
}

让我们来读一下这个代码，这里的@ExceptionHandler(BusinessException.class)意思是在系统运行的过程中，如果有了BusinessException，系统能继续走return ResultUtils.error(e.getCode(), e.getMessage());

在最新版的springboot中，knife4j会发生不兼容的情况，这里采用了@Hidden来解决问题

在很多的情况，我们要用分页查询，分页查询有一些参数，比如：页号，页面大小，排序字段，顺序等等

这里统一写成一个封装类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@Data
public class PageRequest {

    /**
     * 当前页号
     */
    private int pageNum = 1;

    /**
     * 页面大小
     */
    private int pageSize = 10;

    /**
     * 排序字段
     */
    private String sortField;

    /**
     * 排序顺序（默认降序）
     */
    private String sortOrder = "descend";
}

当然删除也是~~

1
2
3
4
5
6
7
8
9
10

@Data
public class DeleteRequest implements Serializable {

    /**
     * id
     */
    private Long id;

    private static final long serialVersionUID = 1L;
}

还有前后端分离开发时，前端和后端的域名或者端口号是不同的，这就产生了跨域的问题，那么其实我们可以在后端统一写一个解决跨域的类来解决问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 覆盖所有请求
        registry.addMapping("/**")
                // 允许发送 Cookie
                .allowCredentials(true)
                // 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

最后测试一下

1
2
3
4
5
6
7
8
9

@RestController
@RequestMapping("/health")
public class HealthController {

    @GetMapping("/")
    public BaseResponse<String> healthCheck() {
        return ResultUtils.success( "ok");
    }
}

本网站采用的是三栏+响应式布局的方案，也就是slidecard的方案，但是为了可拓展性，我还是把两种都搬了过来，方便大家阅读！

1. 修改[BlogRoot]\themes\butterfly\layout\includes\mixins\post-ui.pug,整个替换为下面的代码，注意，我这里用的是彩色的图标，每个//- i.fas那里表示我注释了黑白的额图标并换上彩色图标，彩色图标引入的具体方法见之前的教程，这里只需要替换成你自己的图标名字和调节相应的大小即可：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146

   mixin postUI(posts) each article , index in page.posts.data .recent-post-item - let link = article.link || article.path let title = article.title || _p('no_title') const position = theme.cover.position let leftOrRight = position === 'both' ? index%2 == 0 ? 'left' : 'right' : position === 'left' ? 'left' : 'right' let post_cover = article.cover let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' - .recent-post-content(class=leftOrRight) .recent-post-cover img.article-cover(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) .recent-post-info a.article-title(href=url_for(link) title=title) .article-title-link= title .recent-post-meta .article-meta-wrap if (is_home() && (article.top || article.sticky > 0)) span.article-meta //- i.fas.fa-thumbtack.sticky svg.meta_icon(style="width:16px;height:16px;position:relative;top:3px").post-ui-icon use(xlink:href='#icon-tuding') span.sticky= _p('sticky') span.article-meta-separator | if (theme.post_meta.page.date_type) span.post-meta-date if (theme.post_meta.page.date_type === 'both') //- i.far.fa-calendar-alt svg.meta_icon(style="width:21px;height:21px;position:relative;top:6px").post-ui-icon use(xlink:href='#icon-rili') span.article-meta-label=_p('post.created') time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) span.article-meta-separator | //- i.fas.fa-history svg.meta_icon(style="width:13px;height:13px;position:relative;top:2px").post-ui-icon use(xlink:href='#icon-gengxin1') span.article-meta-label=_p('post.updated') + " " time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format) else - let data_type_updated = theme.post_meta.page.date_type === 'updated' - let date_type = data_type_updated ? 'updated' : 'date' - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt' - let date_title = data_type_updated ? _p('post.updated') : _p('post.created') i(class=date_icon) span.article-meta-label=date_title time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format) if (theme.post_meta.page.categories && article.categories.data.length > 0) span.article-meta span.article-meta-separator | //- i.fas.fa-inbox svg.meta_icon(style="width:12px;height:12px;position:relative;top:1px").post-ui-icon use(xlink:href='#icon-fenlei') 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.article-meta-link if (theme.post_meta.page.tags && article.tags.data.length > 0) span.article-meta.tags span.article-meta-separator | //- i.fas.fa-tag svg.meta_icon(style="width:13px;height:13px;position:relative;top:2px").post-ui-icon use(xlink:href='#icon-biaoqian') 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 #[=' • '] mixin countBlockInIndex - needLoadCountJs = true span.article-meta span.article-meta-separator | //- i.fas.fa-comments svg.meta_icon(style="width:13px;height:13px;position:relative;top:2px").post-ui-icon use(xlink:href='#icon-pinglun1') if block block span.article-meta-label= ' ' + _p('card_post_count') if theme.comments.card_post_count case theme.comments.use[0] when 'Disqus' +countBlockInIndex a(href=full_url_for(link) + '#disqus_thread') i.fa-solid.fa-spinner.fa-spin when 'Disqusjs' +countBlockInIndex a(href=full_url_for(link) + '#disqusjs') span.disqus-comment-count(data-disqus-url=full_url_for(link)) i.fa-solid.fa-spinner.fa-spin when 'Valine' +countBlockInIndex a(href=url_for(link) + '#post-comment') span.valine-comment-count(data-xid=url_for(link)) i.fa-solid.fa-spinner.fa-spin when 'Waline' +countBlockInIndex a(href=url_for(link) + '#post-comment') span.waline-comment-count(id=url_for(link)) i.fa-solid.fa-spinner.fa-spin when 'Twikoo' +countBlockInIndex a.twikoo-count(href=url_for(link) + '#post-comment') i.fa-solid.fa-spinner.fa-spin when 'Facebook Comments' +countBlockInIndex a(href=url_for(link) + '#post-comment') span.fb-comments-count(data-href=urlNoIndex(article.permalink)) when 'Remark42' +countBlockInIndex a(href=url_for(link) + '#post-comment') span.remark42__counter(data-url=urlNoIndex(article.permalink)) i.fa-solid.fa-spinner.fa-spin when 'Artalk' +countBlockInIndex a(href=url_for(link) + '#post-comment') span.artalk-count(data-page-key=url_for(link)) i.fa-solid.fa-spinner.fa-spin a.article-content(href=url_for(link) title=title) //- Display the article introduction on homepage case theme.index_post_content.method when false - break when 1 .article-content-text!= article.description when 2 if article.description .article-content-text!= article.description else - const content = strip_html(article.content) - let expert = content.substring(0, theme.index_post_content.length) - content.length > theme.index_post_content.length ? expert += ' ...' : '' .article-content-text!= expert default - const content = strip_html(article.content) - let expert = content.substring(0, theme.index_post_content.length) - content.length > theme.index_post_content.length ? expert += ' ...' : '' .article-content-text!= expert .recent-post-arrow if theme.ad && theme.ad.index if (index + 1) % 3 == 0 .recent-post-item.ads-wrap!=theme.ad.index

2. 样式方案提供两种：

   • 样式一：电脑端宽屏采用滑动卡片，平板宽度采用双栏布局，手机宽度采用单栏卡片

   • 样式二：移除滑动卡片，按屏幕宽度依次应用三栏、双栏、单栏

     新建目录[BlogRoot]\themes\butterfly\source\css\_index_card_style\,并在下面新建对应的文件slidecard.styl和multicard.styl并分别填入以下内容，第一个滑动卡片的是店长原版的，我微调一下第二个的样式，大家可以根据自己的选择进行修改：

     • 样式一：slidecard
     • 样式二：multicard

       
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
     96
     97
     98
     99
     100
     101
     102
     103
     104
     105
     106
     107
     108
     109
     110
     111
     112
     113
     114
     115
     116
     117
     118
     119
     120
     121
     122
     123
     124
     125
     126
     127
     128
     129
     130
     131
     132
     133
     134
     135
     136
     137
     138
     139
     140
     141
     142
     143
     144
     145
     146
     147
     148
     149
     150
     151
     152
     153
     154
     155
     156
     157
     158
     159
     160
     161
     162
     163
     164
     165
     166
     167
     168
     169
     170
     171
     172
     173
     174
     175
     176
     177
     178
     179
     180
     181
     182
     183
     184
     185
     186
     187
     188
     189
     190
     191
     192
     193
     194
     195
     196
     197
     198
     199
     200
     201
     202
     203
     204
     205
     206
     207
     208
     209
     210
     211
     212
     213
     214
     215
     216
     217
     218
     219
     220
     221
     222
     223
     224
     225
     226
     227
     228
     229
     230
     231
     232
     233
     234
     235
     236
     237
     238
     239
     240
     241
     242
     243
     244
     245
     246
     247
     248
     249
     250
     251
     252
     253
     254
     255
     256
     257
     258
     259
     260
     261
     262
     263
     264
     265
     266
     267
     268
     269
     270
     271
     272
     273
     274
     //default color:
     :root
       --recent-post-bgcolor: rgba(255, 255, 255, 0.9)  //默认背景
       --article-content-bgcolor: #49b1f5 //描述版块背景
       --recent-post-arrow: #ffffff //箭头配色
       --recent-post-cover-shadow: #ffffff //封面遮罩层配色，建议和默认值的颜色相对应。
       --recent-post-transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)  //动画效果。不了解的不要改动
     [data-theme="dark"]
       --recent-post-bgcolor: rgba(35,35,35,0.5)
       --article-content-bgcolor: #99999a
       --recent-post-arrow: #37e2dd
       --recent-post-cover-shadow: #232323
     // 默认的首页卡片容器布局
     .recent-posts
       padding 0 15px 0 15px
       height fit-content
       .recent-post-item
         margin-bottom 15px
         width 100%
         background var(--recent-post-bgcolor)
         overflow hidden
         border-radius 15px
         .recent-post-content
           display flex
           background var(--recent-post-bgcolor)
           position relative
           .recent-post-cover
             display flex
             background transparent
           .recent-post-info
             display flex
             background transparent
             flex-direction column
             justify-content center
             align-items center
             .article-title
               height 50%
               display: flex
               text-align: center
               align-items: center
               justify-content: flex-end
               flex-direction: column
               .article-title-link
                 color: var(--text-highlight-color)
                 transition: all .2s ease-in-out
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 overflow: hidden;
                 &:hover
                   color: $text-hover
             .recent-post-meta
               height 50%
               display: flex
               text-align: center
               align-items: center
               justify-content: flex-start
               flex-direction: column
               .article-meta-wrap
                 color #969797
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 overflow: hidden;
                 a
                   color: var(--text-highlight-color)
                   transition: all .2s ease-in-out
                   color #969797
                   &:hover
                     color: $text-hover
           .article-content
             display flex
             text-align: center
             flex-direction row
             align-items center
             justify-content center
             .article-content-text
               display -webkit-box
               -webkit-box-orient vertical
               text-overflow: ellipsis
               overflow hidden
               color #fff
               text-shadow 1px 2px 3px #000
               &::before
                 content "❝"
                 font-size 20px
               &::after
                 content "❞"
                 font-size 20px
         &.ads-wrap
           display: block !important
           height: auto !important
     // PC端滑动卡片样式
     @media screen and (min-width:1069px)
       .recent-posts
         padding 0 15px 0 15px
         .recent-post-item
           .recent-post-content
             position relative
             height 200px
             width 100%
             transition var(--recent-post-transition)
             &:hover
               .recent-post-cover-shadow
                 width 10.1%
                 transition var(--recent-post-transition)
               .recent-post-cover
                 width 10%
                 transition var(--recent-post-transition)
               .article-content
                 width calc(30% + 80px)
                 transition var(--recent-post-transition)
                 .article-content-text
                   opacity 1
               .recent-post-arrow
                 transition var(--recent-post-transition)
             .recent-post-cover-shadow
               z-index: 1
               transition var(--recent-post-transition)
               position: absolute
               height 200px
               width 40%
             .recent-post-cover
               height 200px
               width 40%
               transition var(--recent-post-transition)
               img
                 height 100%
                 width 100%
                 object-fit cover
     
             .recent-post-info
               height 200px
               width calc(60% - 80px)
               .article-title
                 margin: 0px 40px
                 font-size 24px
                 .article-title-link
                   -webkit-line-clamp: 2;
               .recent-post-meta
                 margin: 0px 20px
                 .article-meta-wrap
                   font-size 12px
                   -webkit-line-clamp: 3;
             .article-content
               height 200px
               width 90px
               background var(--article-content-bgcolor)
               transition var(--recent-post-transition)
               .article-content-text
                 -webkit-line-clamp 4
                 transition: var(--recent-post-transition)
                 opacity 0
             .recent-post-arrow
               transition var(--recent-post-transition)
               display block
               position absolute
               height 20px
               width 8px
               background var(--recent-post-arrow)
             &.both,
             &.right
               .recent-post-cover-shadow
                 left 0
                 background linear-gradient(to left, var(--recent-post-cover-shadow), transparent)
               .recent-post-cover
                 order: 1
               .recent-post-info
                 order: 2
               .article-content
                 order: 3
                 clip-path polygon(0 50%, 80px 0, 100% 0, 100% 100%, 80px 100%)
                 .article-content-text
                   margin 20px 40px 20px 80px
               .recent-post-arrow
                 order: 4
                 left calc(100% - 80px)
                 top calc(50% - 10px)
                 clip-path polygon(0 10px, 8px 0, 8px 20px)
               &:hover
                 .recent-post-arrow
                   left calc(100% - 40px)
             &.left
               .recent-post-cover-shadow
                 right 0
                 background linear-gradient(to right, var(--recent-post-cover-shadow), transparent)
               .recent-post-cover
                 order: 4
               .recent-post-info
                 order: 3
               .article-content
                 order: 2
                 clip-path polygon(100% 50%,calc(100% - 80px) 100%,0 100%,0 0,calc(100% - 80px) 0)
                 .article-content-text
                   margin 20px 80px 20px 40px
               .recent-post-arrow
                 order: 1
                 left 72px
                 top calc(50% - 10px)
                 clip-path polygon(0 0, 8px 10px, 0 20px)
               &:hover
                 .recent-post-arrow
                   left 32px
     // 双栏布局卡片自适应适配
     @media screen and (min-width:572px) and (max-width:1068px)
       .recent-posts
         padding 0 15px 0 15px
         display flex
         flex-direction row
         flex-wrap wrap
         .recent-post-item
           border-radius 15px
           overflow hidden
           width 47%
           margin 0px 3% 20px 0px
         nav#pagination
           width: 100%
     // 手机端单栏布局自适应适配
     @media screen and (max-width:572px)
       .recent-posts
         padding 0 15px 0 15px
         .recent-post-item
           border-radius 15px
           overflow hidden
     
     // 手机端及双栏卡片样式
     @media screen and (max-width:1068px)
       .recent-posts
         .recent-post-item
           .recent-post-content
             flex-direction column
             flex-wrap nowrap
             align-items center
             max-height 350px
             height: auto 
             width 100%
             .recent-post-cover
               width 100%
               height 200px
               clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
               img
                 height 200px
                 width 100%
                 object-fit cover
             .recent-post-info
               height 150px
               width 100%
               padding 0px 25px 5px 25px
               .article-title
                 margin: 0px 40px
                 font-size 18px
                 .article-title-link
                   -webkit-line-clamp: 2;
               .recent-post-meta
                 margin: 0px 20px
                 .article-meta-wrap
                   font-size 12px
                   -webkit-line-clamp: 3;
             .article-content
               position absolute
               height 200px
               width 100%
               background rgba(25,25,25,0.5)
               clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
               .article-content-text
                 -webkit-line-clamp 3
                 font-size 16px
                 margin 0px 25px 30px 25px
             .recent-post-arrow
               display block
               background var(--article-content-bgcolor)
               position absolute
               height 10px
               width 20px
               clip-path polygon(0 0,100% 0,50% 100%)
               top 20px
     

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
     96
     97
     98
     99
     100
     101
     102
     103
     104
     105
     106
     107
     108
     109
     110
     111
     112
     113
     114
     115
     116
     117
     118
     119
     120
     121
     122
     123
     124
     125
     126
     127
     128
     129
     130
     131
     132
     133
     134
     135
     136
     137
     138
     139
     140
     141
     142
     143
     144
     145
     146
     147
     148
     149
     150
     151
     152
     153
     154
     155
     156
     157
     158
     159
     160
     161
     162
     163
     164
     165
     166
     167
     168
     169
     170
     171
     172
     173
     174
     //default color:
           :root
             --recent-post-bgcolor: rgba(200, 200, 200, 0.5)  //默认背景
             --article-content-bgcolor: #49b1f5 //描述版块背景
             --recent-post-arrow: #ffffff //箭头配色
             --recent-post-cover-shadow: #ffffff //封面遮罩层配色，建议和默认值的颜色相对应。
             --recent-post-transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)  //动画效果。不了解的不要改动
           [data-theme="dark"]
             --recent-post-bgcolor: rgba(35,35,35,0.5)
             --article-content-bgcolor: #99999a
             --recent-post-arrow: #37e2dd
             --recent-post-cover-shadow: #232323
           // 默认的首页卡片容器布局
           .recent-posts
             padding 0 15px 0 15px
             height fit-content
             .recent-post-item
               margin-bottom 15px
               background var(--recent-post-bgcolor)
               overflow hidden
               border-radius 15px
               .recent-post-content
                 display flex
                 background var(--recent-post-bgcolor)
                 position relative
                 .recent-post-cover
                   display flex
                   background transparent
                 .recent-post-info
                   display flex
                   background transparent
                   flex-direction column
                   justify-content center
                   align-items center
                   .article-title
                     height 50%
                     display: flex
                     text-align: center
                     align-items: center
                     justify-content: flex-end
                     flex-direction: column
                     .article-title-link
                       color: var(--text-highlight-color)
                       transition: all .2s ease-in-out
                       display: -webkit-box;
                       -webkit-box-orient: vertical;
                       overflow: hidden;
                       &:hover
                         color: $text-hover
                   .recent-post-meta
                     height 50%
                     display: flex
                     text-align: center
                     align-items: center
                     justify-content: flex-start
                     flex-direction: column
                     .article-meta-wrap
                       color #969797
                       display: -webkit-box;
                       -webkit-box-orient: vertical;
                       overflow: hidden;
                       a
                         color: var(--text-highlight-color)
                         transition: all .2s ease-in-out
                         color #969797
                         &:hover
                           color: $text-hover
                 .article-content
                   display flex
                   text-align: center
                   flex-direction row
                   align-items center
                   justify-content center
                   .article-content-text
                     display -webkit-box
                     -webkit-box-orient vertical
                     text-overflow: ellipsis
                     overflow hidden
                     color #fff
                     text-shadow 1px 2px 3px #000
               &.ads-wrap
                 display: block !important
                 height: auto !important
             nav#pagination
               width: 100%
           // 卡片单元布局样式
           .recent-posts
             padding 0 15px 0 15px
             display flex
             flex-direction row
             flex-wrap wrap
             .recent-post-item
               border-radius 15px
               overflow hidden
               .recent-post-content
                 flex-direction column
                 flex-wrap nowrap
                 align-items center
                 max-height 350px
                 height: auto
                 width 100%
                 .recent-post-cover
                   width 100%
                   height 200px
                   clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
                   img
                     height 200px
                     width 100%
                     object-fit cover
                 .recent-post-info
                   height 150px
                   width 100%
                   padding 0px 25px 5px 25px
                   .article-title
                     margin: 0px 40px
                     font-size 18px
                     .article-title-link
                       -webkit-line-clamp: 2;
                   .recent-post-meta
                     margin: 0px 20px
                     .article-meta-wrap
                       font-size 12px
                       -webkit-line-clamp: 3;
                 .article-content
                   position absolute
                   height 200px
                   width 100%
                   background rgba(25,25,25,0.5)
                   clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
                   .article-content-text
                     -webkit-line-clamp 3
                     font-size 16px
                     margin 0px 25px 30px 25px
                     &::before
                       content "❝"
                       font-size 20px
                     &::after
                       content "❞"
                       font-size 20px
                 .recent-post-arrow
                   display block
                   background var(--article-content-bgcolor)
                   position absolute
                   height 10px
                   width 20px
                   clip-path polygon(0 0,100% 0,50% 100%)
                   top 20px
           // 三栏布局滑动卡片样式
           @media screen and (min-width:1069px)
             .recent-posts
               .recent-post-item
                 width 32.3%
                 margin 0px 1% 20px 0px
                 .recent-post-content
                   .recent-post-info
                     .article-title
                       margin: 0px 5px
                       .article-title-link
                         -webkit-line-clamp: 1;
                     .recent-post-meta
                       margin: 0px 5px
                       .article-meta-wrap
                         -webkit-line-clamp: 2;
           // 双栏布局卡片自适应适配
           @media screen and (min-width:572px) and (max-width:1068px)
             .recent-posts
               .recent-post-item
                 width 47%
                 margin 0px 3% 20px 0px
           // 单栏布局卡片自适应适配
           @media screen and (max-width:572px)
             .recent-posts
               .recent-post-item
                 width 100%
     

     ​

3. 修改[BlogRoot]\themes\butterfly\source\css\_page\homepage.styl,将整文件内容替换为以下代码：

   1 2 3 4

   if hexo-config('index_card_style') == 'slidecard' @import './_index_card_style/slidecard' else if hexo-config('index_card_style') == 'multicard' @import './_index_card_style/multicard'

4. 然后在主题配置文件[BlogRoot]\_config.butterfly.yml里新增配置项，这样我们就可以通过配置项自由切换使用哪款了：

   1 2 3

   # 主页卡片样式 # Docs: https://akilar.top/posts/d6b69c49/ index_card_style: multicard # slidecard | multicard

5. 考虑到不管是样式一还是样式二都存在一个布局突变的情况。为了不至于让首页的文章出现空缺，建议将首页生成的文章数量控制为1,2,3的公倍数。修改站点配置文件[BlogRoot]\_config.yml。找到以下配置项进行调整，注意这是站点配置文件本就有的配置项，不是新增配置项。建议是调整为12篇。如果你的侧边栏魔改内容特别多，那么建议改成18、24、30。务必确保文章卡片栏比侧栏完全展开要长，这样展示效果最好

   1 2 3 4 5 6 7 8

   # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 12 order_by: -date

6. 本教程讨论的卡片都是考虑有封面和有描述的。所以需要保证你已经开启了相应的配置，查看主题配置文件[BlogRoot]\_config.butterfly.yml,找到配置项开启描述栏，建议选择2模式

   1 2 3 4 5 6 7 8

   # Display the article introduction on homepage # 1: description # 2: both (if the description exists, it will show description, or show the auto_excerpt) # 3: auto_excerpt (default) # false: do not show the article introduction index_post_content: method: 2 length: 500 # if you set method to 2 or 3, the length need to config

参考：Android Studio项目gradle下载慢问题

一、问题起因

通过Android studio新建了一个Android项目，同步gradle居然花费了30多分钟。忍不了，真的忍不了。

二、原因分析

1. 通过观察日志耗时情况

发现耗时主要集中在两方面：gradle下载和gradle依赖下载，如下图所示，gradle下载耗时24分钟，gradle依赖下载耗时7分钟

2. 查看gradle-wrapper.properties

文件路径gradle/wrapper/gradle-wrapper.properties

• gradle-wrapper.properties是Gradle Wrapper的配置文件，用于指定Gradle版本。通过配置这个文件，可以确保项目在不同的环境中使用相同版本的Gradle进行构建。
• Gradle Wrapper的目的是解决不同机器上Gradle版本不一致的问题，通过配置gradle-wrapper.properties文件，项目可以在任何环境下自动下载并使用正确的Gradle版本进行构建。

查看后发现，默认使用的地址为https://services.gradle.org/distributions/gradle-8.2-bin.zip。

1
2
3
4
5

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

提示：可能你的gradle版本与我的不同，但并无影响

通过ip查询工具，可发现services.gradle.org域名所在地理位置为美国。呵呵！国外源，慢得理所应当。

3. 查看settings.gradle.kts

文件路径根目录

• settings.gradle.kts文件是Kotlin DSL格式的settings文件，它用于配置项目的模块结构。在这个文件中，你可以声明项目中包含哪些模块、这些模块之间的依赖关系，以及全局的构建逻辑。
• 在新版本gradle中，settings.gradle.kts文件还承担了仓库配置的工作，而这也是我们关注的重点

通过Android studio新建的项目，gradle仓库配置默认如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

pluginManagement {
 repositories {
     google()
     mavenCentral()
     gradlePluginPortal()
 }
}
dependencyResolutionManagement {
 repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
 repositories {
     google()
     mavenCentral()
 }
}

rootProject.name = "My Application"
include(":app")

通过ip查询工具，分别查询地理位置，默认源同样均在国外

行吧，国外源，网络情况不理想，下载速度相对较慢，慢得有理有据。

三、解决方式

对于上述问题，常见的解决方式无非走VPN代理或通过国内镜像源加速，由于合规的VPN代理需要申请，本文主要讲解通过国内镜像源加速的方式。有合规VPN代理的观众老爷们可以撤了。

1. gradle下载慢解决方案

常见的解决方案包括：使用gradle离线下载或通过gradle国内镜像源加速

个人觉得，gradle离线下载相对麻烦，不展开讲解。感兴趣的同学可自行百度gradle离线下载

对比gradle离线下载，通过gradle国内镜像源相对方便些，国内知名的gradle镜像源，包含阿里云和腾讯云

阿里云gradle镜像源：https://mirrors.aliyun.com/gradle
腾讯云gradle镜像源：https://mirrors.cloud.tencent.com/gradle/
可惜的是，阿里云gradle镜像源截至2019年就不再更新，gradle版本也停留在了gradle-5.6.2，若你使用的是gradle-5.6.2以上版本，更推荐你使用腾讯云gradle镜像源，使用方式如下：

替换https\://services.gradle.org/distributions为https\://mirrors.cloud.tencent.com/gradle

1
2
3
4
5

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.2-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

2. gradle依赖下载慢解决方案

为加速gradle依赖下载，我们可以通过国内镜像源加速，这里强烈安利 阿里云镜像源

提示：上面仅列出我们使用到的镜像源，全量镜像源请见附录1：阿里云全量镜像源

使用方式如下：

修改settings.gradle.kts，将对应阿里云镜像仓库添加到google()和mavenCentral()上方，优先从国内源下载，如果没有再去原网站下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

pluginManagement {
    repositories {
        maven { url=uri ("https://www.jitpack.io")}
        maven { url=uri ("https://maven.aliyun.com/repository/releases")}
        maven { url=uri ("https://maven.aliyun.com/repository/google")}
        maven { url=uri ("https://maven.aliyun.com/repository/central")}
        maven { url=uri ("https://maven.aliyun.com/repository/gradle-plugin")}
        maven { url=uri ("https://maven.aliyun.com/repository/public")}
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        maven { url=uri ("https://www.jitpack.io")}
        maven { url=uri ("https://maven.aliyun.com/repository/releases")}
        maven { url=uri ("https://maven.aliyun.com/repository/google")}
        maven { url=uri ("https://maven.aliyun.com/repository/central")}
        maven { url=uri ("https://maven.aliyun.com/repository/gradle-plugin")}
        maven { url=uri ("https://maven.aliyun.com/repository/public")}
        google()
        mavenCentral()
    }
}

rootProject.name = "My Application"
include(":app")

建议：请不要随意改变仓库位置。各个仓库的列出顺序决定了 Gradle 在这些仓库中搜索各个项目依赖项的顺序。例如，如果从仓库 A 和 B 均可获得某个依赖项，而您先列出了仓库 A，则 Gradle 会从仓库 A 下载该依赖项。

提示：若你使用的groovy，非kotlin，请转附录2：gradle依赖下载加速-groovy版

四、总结（省流版）

1. gradle下载慢解决方案

替换https\://services.gradle.org/distributions为https\://mirrors.cloud.tencent.com/gradle

1
2
3
4
5

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.2-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

2. gradle依赖下载慢解决方案

修改settings.gradle.kts，将对应阿里云镜像仓库添加到google()和mavenCentral()上方，优先从国内源下载，如果没有再去原网站下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

pluginManagement {
    repositories {
        maven { url=uri ("https://www.jitpack.io")}
        maven { url=uri ("https://maven.aliyun.com/repository/releases")}
        maven { url=uri ("https://maven.aliyun.com/repository/google")}
        maven { url=uri ("https://maven.aliyun.com/repository/central")}
        maven { url=uri ("https://maven.aliyun.com/repository/gradle-plugin")}
        maven { url=uri ("https://maven.aliyun.com/repository/public")}
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        maven { url=uri ("https://www.jitpack.io")}
        maven { url=uri ("https://maven.aliyun.com/repository/releases")}
        maven { url=uri ("https://maven.aliyun.com/repository/google")}
        maven { url=uri ("https://maven.aliyun.com/repository/central")}
        maven { url=uri ("https://maven.aliyun.com/repository/gradle-plugin")}
        maven { url=uri ("https://maven.aliyun.com/repository/public")}
        google()
        mavenCentral()
    }
}

rootProject.name = "My Application"
include(":app")

建议：请不要随意改变仓库位置。各个仓库的列出顺序决定了 Gradle 在这些仓库中搜索各个项目依赖项的顺序。例如，如果从仓库 A 和 B 均可获得某个依赖项，而您先列出了仓库 A，则 Gradle 会从仓库 A 下载该依赖项。

提示：若你使用的groovy，非kotlin，请转附录2：gradle依赖下载加速-groovy版

附录

附录1：阿里云全量镜像源

阿里云常见镜像库：https://developer.aliyun.com/mvn/guide

提示：由于阿里云官网更新，大家查到的数据可能比上面少。大部分库未在常见镜像库中展示，如google()库，全量仓库请通过https://developer.aliyun.com/mvn/view查看

附录2：gradle依赖下载加速-groovy版

修改settings.gradle，将对应阿里云镜像仓库添加到google()和mavenCentral()上方，优先从国内源下载，如果没有再去原网站下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

pluginManagement {
    repositories {
        maven { url=uri ("https://www.jitpack.io")}
        maven { url=uri ("https://maven.aliyun.com/repository/releases")}
        maven { url=uri ("https://maven.aliyun.com/repository/google")}
        maven { url=uri ("https://maven.aliyun.com/repository/central")}
        maven { url=uri ("https://maven.aliyun.com/repository/gradle-plugin")}
        maven { url=uri ("https://maven.aliyun.com/repository/public")}
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        maven { url=uri ("https://www.jitpack.io")}
        maven { url=uri ("https://maven.aliyun.com/repository/releases")}
        maven { url=uri ("https://maven.aliyun.com/repository/google")}
        maven { url=uri ("https://maven.aliyun.com/repository/central")}
        maven { url=uri ("https://maven.aliyun.com/repository/gradle-plugin")}
        maven { url=uri ("https://maven.aliyun.com/repository/public")}
        google()
        mavenCentral()
    }
}

rootProject.name = "My Application"
include(":app")

建议：请不要随意改变仓库位置。各个仓库的列出顺序决定了 Gradle 在这些仓库中搜索各个项目依赖项的顺序。例如，如果从仓库 A 和 B 均可获得某个依赖项，而您先列出了仓库 A，则 Gradle 会从仓库 A 下载该依赖项。

参考文档

添加 build 依赖项 | Android Studio | Android Developers (google.cn)

阿里云仓库服务 (aliyun.com)

阿里巴巴开源镜像站

Android Studio 配置国内镜像源、HTTP代理

在VMware界面中操作虚拟机非常不友好，所以一般推荐使用专门的SSH客户端。市面上常见的有：

• Xshell：个人免费，商业收费，之前爆出过有隐藏后门。不推荐
• Finshell：基础功能免费，高级功能收费，基于Java，内存占用较高（在1个G左右）。不推荐
• MobarXterm：基础功能免费、高级功能收费。开源、功能强大、内存占用低（只有10m左右），但是界面不太漂亮。推荐使用

安装MobarXterm

这里我们会选择内存占用较低的MobarXterm作为SSH客户端，其官网地址：

安装完成后界面如图所示：

点击session按钮，进入会话管理：

在弹出的session管理页面中，按照下图填写信息并保存：

点击OK后会提示你是第一次连接，询问你是信任连接的服务：

选择accept之后，会询问你是否要记住密码，选择yes：

紧接着需要你设置一个MobarXterm的全局密码用于做密码管理，建议设置一个与虚拟机密码不同的：

输入密码：

输入成功后，就会连接成功，并进入操作界面了：

这里需要做一些基础的配置：

配置默认编辑器

首先建议设置一下默认编辑器，这样我们通过MobarXterm的FTP工具打开文件时会以指定的编辑器打开，方便修改。我这里配置的是vscode：

配置右键粘贴

复制粘贴是很常用的配置，MobarXterm默认左键选中即复制，但是需要配置右键点击为粘贴：

这样，复制和粘贴可以全部通过鼠标操作，无需按键。

SSH配置

接下来还有几个ssh配置：

分别是：

• 默认的登录用户
• ssh保持连接
• 取消连接成功后的欢迎banner

关闭X-Server服务

大多数情况下，我们没有x-server的需求，因此可以选择不要自启动：

目标：掌握定位的作用及特点；掌握 CSS 高级技巧

01-定位

作用：灵活的改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

• left
• right
• top
• bottom

相对定位

position: relative

特点：

• 不脱标，占用自己原来位置
• 显示模式特点保持不变
• 设置边偏移则相对自己原来位置移动

1
2
3
4
5

div {
  position: relative;
  top: 100px;
  left: 200px;
}

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移则相对最近的已经定位的祖先元素改变位置
• 如果祖先元素都未定位，则相对浏览器可视区改变位置

1
2
3
4
5
6
7
8
9

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

定位居中

实现步骤：

1. 绝对定位
2. 水平、垂直边偏移为 50%
3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为 –尺寸的一半
• transform: translate(-50%, -50%)

1
2
3
4
5
6
7
8
9
10
11

img {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移相对浏览器窗口改变位置

1
2
3
4
5
6
7

div {
  position: fixed;
  top: 0;
  right: 0;

  width: 500px;
}

堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

1
2
3
4
5
6
7
8
9
10
11
12
13

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

02-高级技巧

CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性，改变背景图位置

​ 3.1 使用 PxCook 测量小图片左上角坐标

​ 3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

案例-京东服务

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  .service {
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    /* background-color: pink; */
  }

  .service ul {
    display: flex;
  }

  .service li {
    display: flex;
    padding-left: 40px;
    width: 297px;
    height: 42px;
    /* background-color: skyblue; */
  }

  .service li h5 {
    margin-right: 10px;
    width: 36px;
    height: 42px;
    /* background-color: pink; */
    background: url(./images/sprite.png) 0 -192px;
  }

  .service li:nth-child(2) h5 {
    background-position: -41px -192px;
  }

  .service li:nth-child(3) h5 {
    background-position: -82px -192px;
  }

  .service li:nth-child(4) h5 {
    background-position: -123px -192px;
  }

  .service li p {
    font-size: 18px;
    color: #444;
    font-weight: 700;
    line-height: 42px;
  }
</style>

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：先下载再使用

下载字体

iconfont 图标库：https://www.iconfont.cn/

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

使用字体

1. 引入字体样式表（iconfont.css）

2. 标签使用字体图标类名
   • iconfont：字体图标基本样式（字体名，字体大小等等）
   • icon-xxx：图标对应的类名

上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

03-CSS修饰属性

垂直对齐方式

属性名：vertical-align

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

• 过渡的属性可以是具体的 CSS 属性
• 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
• transition 设置给元素本身

1
2
3
4
5
6
7
8
9
10

img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 500px;
  height: 500px;
}

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

• 0：完全透明（元素不可见）
• 1：不透明
• 0-1之间小数：半透明

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

04-综合案例-轮播图

图片效果

HTML结构

1
2
3
4
5
6
7
8

<div class="banner">
    <!-- 图: ul > li -->
    <ul>
      <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
    </ul>
</div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.banner {
  position: relative;
  margin: 100px auto;
  width: 564px;
  height: 315px;
  /* background-color: pink; */
  overflow: hidden;
}

/* 图片 */
.banner img {
  width: 564px;
  border-radius: 12px;
  vertical-align: middle;
}

.banner ul {
  display: flex;
}

箭头

HTML结构

1
2
3
4
5
6
7
8
9

<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev">
  <i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一张 next -->
<a href="#" class="next">
  <i class="iconfont icon-youce"></i>
</a>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34