在博客里面添加个人开发的移动端项目演示

Juenfy Lv1

在博客里面添加个人项目演示

一、准备工作

1.安装一个主题,这里以主题redefine为例子

传送门:Github

2.定位修改代码的位置

首选我们可以确定不能直接修改public里面生成出来的html,因为这样下次hexo generate的时候,代码会丢失,所以我们需要修改主题的模板文。
可以修改这个文件,因为页面空旷的位置比较多。
blog\themes\redefine\layout\pages\home\home-banner.ejs

二、修改代码

1. 定位div

在这个文件找到.home-banner-container>.content的div,直接在这个div里面添加代码即可。

2. 添加代码如下:

我这里是准备了个手机外壳的图片+iframe搞成跟手机一样的演示我的项目,最终效果就是我博客现在的这个样子。

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
<div class="cover-wechat-iframe-container">
<img src="<%- url_for(theme.defaults.mobile) %>" alt="">
<iframe
width="375"
height="735"
frameborder="0"
scrolling="no"
style="overflow: hidden;"
id="cover-wechat-iframe"
>
</iframe>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let url = 'http://124.71.219.151:5173';
let coverWechatIframe = document.getElementById('cover-wechat-iframe');
coverWechatIframe.src = url;
document.getElementsByClassName('tool-dark-light-toggle')[0].addEventListener('click', function () {
console.log(document.body.className);
if (document.body.className.indexOf('dark') !== -1) {
coverWechatIframe.src = url + '?theme=light';
} else {
coverWechatIframe.src = url + '?theme=dark';
}
});
});
</script>
<style>
.cover-wechat-iframe-container {
position: absolute;
top: 10px;
right: 100px;
height: 755px;
width: 395px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.cover-wechat-iframe-container > img {
height:755px;
width: 395px;
position: absolute;
top: 0;
left: 0;
}
.cover-wechat-iframe-container > iframe {
height: 735px;
width: 375px;
border-radius: 40px;
overflow: hidden;
z-index: 100;
}
@media only screen and (max-width: 768px) {
.cover-wechat-iframe-container {
display: none;
}
}
@media only screen and (min-width: 768px) {
.cover-wechat-iframe-container {
display: flex;
}
}
</style>
  • 标题: 在博客里面添加个人开发的移动端项目演示
  • 作者: Juenfy
  • 创建于 : 2025-06-13 16:31:37
  • 更新于 : 2025-06-13 16:51:58
  • 链接: https://juenfy.github.io/2025/06/13/在博客里面添加个人开发的移动端项目演示/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论