File: C:/github_repos/ho-xsj-website/templates/article_share.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{data['title']}}</title>
<meta name="keywords" content="新世纪教学资源,电子教材,教材培训,编委回访,基地风采,博客,论坛,教材,教案,试题,课件,论文,小学,中学" />
<meta name="description" content="服务于小学师生的综合性资源互动平台,本站收集全部教案,试题,课件,论文,计划,总结等资源,并提供网络教研指导,互动服务功能" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 网站图标 -->
<link rel="shortcut icon" href="https://osscdn.xsj21.com/image/favicon.ico" />
<style>
body, p{
margin:0;
padding: 0;
}
html,body{
width: 100%;
/*height: 100%;*/
}
body{
margin-bottom: 70px;
}
a {
text-decoration: none;
}
.download {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: #f5f5f5;
}
.download>div {
display: inline-block;
vertical-align: middle;
}
.download-btn {
position: absolute;
border: 1px solid #2ca1fc;
border-radius: 3px;
height: 30px;
width: 78px;
text-align: center;
right: 12px;
top: 50%;
margin-top: -15px;
background-color: #2ca1fc;
}
.download-btn a {
color: #fff;
line-height: 30px;
font-size:12px;
width: 100%;
background: none;
border: none;
}
.download .download-icon {
width: 60px;
height: 60px;
}
.download-icon img {
border-radius: 6px;
margin: 10px;
width: 40px;
height: 40px;
}
.download-title p:first-child {
line-height:20px;
font-size: 14px;
}
.download-title p:last-child {
font-size: 10px;
line-height:14px;
}
.download-title {
color:#2ca1fc;
}
.content-container{
padding: 12px;
}
#title {
color: #333;
font-size: 20px;
line-height: 20px;
}
#author {
margin: 10px 0;
}
#author img {
width:32px;
height:32px;
border-radius: 20px;
}
#author img,#author span{
vertical-align: middle;
}
#author span {
margin-left: 10px;
color:#999;
font-size: 16px;
line-height:32px;
}
#content{
width: 100%;
}
#content ,#content p,#content span{
font-size:16px;
font-family:PingFangSC-Regular;
color:#333;
line-height:22px;
}
#content img {
width: 100%;
margin: 8px 0;
}
</style>
</head>
<body>
<script>
function replaceContent(content) {
const reg = /vid:(http:\/\/.+\.(mp4|m3u8))/;
const regex = new RegExp(reg, 'g');
const s = content.match(regex);
let html = content;
let ids = [];
const width = document.body.clientWidth - 24;
const height = (width - 24) * 9 / 16;
if (s && s.length) {
for (let i = 0; i < s.length; i += 1) {
const id = `jplayer-${i}`;
ids.push({ id, vid: s[i].replace(reg, '$1') });
const source = s[i].replace(reg, '$1');
html = html.replace(reg, `<video controls width="${width}" height="${height}" poster="https://osscdn.xsj21.com/micro/cover.png"><source type="video/mp4" src="${source}" /></video>`);
}
}
return html;
// this.setState({ article }, () => {
// this.initPlayer(ids);
// });
}
</script>
<div class="content-container">
<h1 id="title">{{data['title']}}</h1>
<div id="author">
<img src={{data['teacher_avatar']}} alt="头像">
<span>{{data['teacher_name']}}</span>
</div>
<div id="content">
{# |safe 是让jinja2不自动转译 #}
{{data['content']|safe}}
</div>
</div>
<div class="download">
<div class="download-icon"><img src="https://osscdn.xsj21.com/xsjApp/about-us-teacher.png" alt="新世纪"></div><div class="download-title">
<p>新世纪数学</p>
<p>不仅仅是让老师成长</p>
</div><div class="download-btn">
<a href="https://v2.xsj21.com/download/share">立即下载</a>
</div>
</div>
<script>
window.onload = function() {
let contenthtml = document.querySelector('#content').innerHTML;
document.querySelector('#content').innerHTML = replaceContent(contenthtml);
}
</script>
</body>
</html>