Lamirs ☆ Blog

分享技术小站

发表于 更新于

添加如下代码：

给 hexo next 加上背景图片，首先启用相应的styl

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

修改source/_data/styles.styl

添加几行代码：

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

//  更改背景图片
body {
	height: 100%;
	width: 100%;
	// 透明度 0.6 的黑色半透明遮罩
	background-color: rgba(0, 0, 0, .5);
	// 設置背景混和模式為相乘模式
	background-blend-mode: multiply;
	// 图片自适应剪裁,56.25%=1080/1920
	// padding-top: 56.25%
	background-image:url(https://api.dongmanxingkong.com/suijitupian/acg/1080p/index.php);
	//这一行的括号里填背景图片的路径，将图片重命名为background.jpg放在\themes\next\source\images下
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position:center center;
	background-size:cover;
}
//body上的所有子元素, 包括
.comments, .pagination, .post-block, .popup, .sidebar {
    opacity:0.8;
}
// header需要单独设置,避免遮挡某些元素的点击事件
// 这里的rgb都是从main.css中扒出来的,之后从16进制转换成了rgba数据
.header-inner {
	background: rgba(255,255,255,0.8);
}
// 针对darkmode单独设置
@media (prefers-color-scheme: dark){
	.header-inner {
		background: rgba(51,51,51,0.8);
	}
	
// }
// 页面头样式属性  .header-inner 
// sidebar侧边工具栏样式属性  .sidebar
// 文章版块样式 .post-block 
// 评论系统  .comments
// 搜索框(local-search) .popup

// example: 页脚 <a> 标签 颜色修改
// #footer a {
// 	coler: #eee;
// }

发表于 更新于

一、前言

Hexo博客NexT主题中是有目录的，只是在默认情况下没有开启，需要我们来手动开启。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  #是否启动侧边栏
  enable: true
  # Automatically add list number to toc.
  #自动将列表编号添加到toc
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  #true时是当标题宽度很长时，自动换到下一行
  wrap: true
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

二、修改样式文件

首先启用相应的styl

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #ariable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

然后打开source/_data/styles.styl添加下列代码：

1.文章目录默认展开

1
2
//文章目录默认展开
.post-toc .nav .nav-child { display: block; }

2.文章目录字体大小调整

1
2
3
.post-toc ol {  
  font-size : 13px;     
}

四、结果图展示

文章目录.png

发表于 更新于

一、配置项

  1. 配置pom文件，引入发送邮件的依赖

在pom文件中添加：

1
2
3
4
5
6
<!--邮件发送核心包-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

  1. 修改配置文件application.yml，这里以QQ邮箱为例

我这里使用的是yml方式，当然也可以采用properties方式来写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#邮件发送配置
spring:
  mail:
    default-encoding: UTF-8
    host: smtp.qq.com
    username: 你的邮箱
    password: 邮箱授权码
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
            required: true

邮箱授权码可以按以下方法获取:

打开QQ邮箱网页→设置→账户→POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务→开启POP3/SMTP服务，然后就能看到授权码了

邮箱验证01.png

二、编写mailService和mailServiceImpl

即邮件服务层和邮件服务接口实现层

${spring.mail.username}是在yml中配置的属性，这里有一个方法，第一个是发送普通邮件，第二个是发送带有附件的邮件

  1. 邮件服务层（IMailService）
1
2
3
4
5
6
7
8
public interface IMailService {

    //发送普通邮件
    void sendSimpleMail(String to,String title,String content);

    //发送带有附件的邮件
    void sendAttachmentsMail(String to, String title, String content, List<File> fileList);
}
  1. 邮件服务接口实现层（MailServiceImpl）
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
@Service
public class MailServiceImpl implements IMailService {

    @Value("${spring.mail.username}")
    private String from;

    @Resource
    private JavaMailSender mailSender;

    Logger logger = LoggerFactory.getLogger(this.getClass());

    //发送普通邮件
    @Override
    public void sendSimpleMail(String to, String title, String content) {

        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom(from);
        message.setTo(to);
        message.setSubject(title);
        message.setText(content);
        mailSender.send(message);
        logger.info("邮件发送成功");

    }

    //发送带有附件的邮件
    @Override
    public void sendAttachmentsMail(String to, String title, String content, List<File> fileList) {

        MimeMessage message = mailSender.createMimeMessage();
        try {
            MimeMessageHelper helper = new MimeMessageHelper(message,true);
            helper.setFrom(from);
            helper.setTo(to);
            helper.setSubject(title);
            helper.setText(content);
            String fileName = null;
            for (File file:fileList) {
                fileName = MimeUtility.encodeText(file.getName(), "GB2312", "B");
                helper.addAttachment(fileName, file);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        mailSender.send(message);
        logger.info("邮件发送成功");

    }
}

三、编写controller

即邮件发送控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//获取邮箱验证的验证码
    @RequestMapping("/getCheckCode")
    public JsonResult getCheckCode(HttpServletRequest request) {
        //获取微信小程序get的参数值并打印
        String userEmail = request.getParameter("userEmail");
        user = userService.queryUserByUserEmail(userEmail);
        if (null == user) {
            return new JsonResult(JsonResponseStatus.EMPTY.getCode(), JsonResponseStatus.EMPTY.getMsg());
        }else{
            String checkCode = String.valueOf(new Random().nextInt(899999) + 100000);
            String message = "您的注册验证码为："+checkCode;
            try {
                mailService.sendSimpleMail(userEmail, "注册验证码", message);
            }catch (Exception e){
                return new JsonResult(JsonResponseStatus.EMPTY.getCode(), JsonResponseStatus.EMPTY.getMsg());
            }
            return new JsonResult(JsonResponseStatus.SUCCESS.getCode(), JsonResponseStatus.SUCCESS.getMsg(),checkCode);
        }
    }

附Web网页上可以用的控制层代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Controller
public class MailController {
    
    @Resource
    private IMailService mailService;

    @RequestMapping("getCheckCode")
    @ResponseBody
    public String getCheckCode(String email){
        String checkCode = String.valueOf(new Random().nextInt(899999) + 100000);
        String message = "您的注册验证码为："+checkCode;
        try {
            mailService.sendSimpleMail(email, "注册验证码", message);
        }catch (Exception e){
            return "";
        }
        return checkCode;
    }
}

四、编写小程序邮箱验证页面

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
<!--pages/getCheckCode/getCheckCode.wxml-->
<form bindsubmit="getCheckCode">
  <view class="form-list">
    <view class="form-item">
      <view class="form-item-hd">邮箱</view>
      <view class="form-item-bd">
        <input type="email" name="userEmail" value="{{userEmail}}" placeholder="请输入邮箱" maxlength="25" />
      </view>
    </view>
  </view>
  <!--按钮-->
  <button formType="submit" class="edit-btn">获取验证码</button>
</form>

<form bindsubmit="toPasswordReset">
  <view class="form-list">
    <view class="form-item">
      <view class="form-item-hd">验证码</view>
      <view class="form-item-bd">
        <input type="text" name="checkCode" value="{{checkCode}}" placeholder="请输入验证码" maxlength="20" />
      </view>
    </view>
  </view>
  <button formType="submit" class="edit-btn">进行验证</button>
</form>

五、测试

邮箱验证03.png

邮箱验证04.png

好了，就分享到这边了啊，有问题可以在下面留言…

0%