在博客里面添加个人项目演示
一、准备工作
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>
|
