twitter主题实现前台发文章
博客原来主题是仿推特的一款主题，文章样式特别多，所以咱也是特别喜欢，也总喜欢搞来搞去的，今晚也是从 @XiaoFans 那里发现了新东西，实现主题前台的发文，前台发文挺新颖的，也是特别想动手实现一下，前台发文是博客的一大特点，可以更加方便，目前只能实现发送文章，后期 @XiaoFans 会加更多功能，上传图片和表情之类的，其他主题原理一样，过程适用于typecho博客，一起来学习下吧
文字教程
twitter主题实践： 在修改前台发文之前，在主题设置中启用大按钮，就是左侧栏的管理按钮 首先在 important/header.php 中底部第二行加入一下代码。
<?php if($this->user->hasLogin()):?>
<?php
Typecho_Widget::widget('Widget_Init');
Typecho_Plugin::factory('admin/common.php')->begin();
Typecho_Widget::widget('Widget_Options')->to($options);
Typecho_Widget::widget('Widget_Security')->to($security);
?>
<?php Typecho_Widget::widget('Widget_Contents_Post_Edit')->to($post); ?>
<?php endif; ?>找到yoniu-nav-list list-btn mobile-hidden类，把按钮下功能改变为推文功能，即将此类下整个div块内的内容替换为以下内容
<div class="yoniu-nav-list list-btn mobile-hidden">
<?php if($this->user->hasLogin()):?>
<a style="cursor: pointer;" onclick="openTwe()">
<span><?php _e('推文'); ?></span>
</a>
<?php else: ?>
<a style="cursor: pointer;" onclick="modify()">
<span><?php _e('推文'); ?></span>
</a>
<?php endif ?>
</div>滑至最下面，添加以下内容
<script>
function modify() {
document.getElementById("yoniu-login-framework").className = "yoniu-login-framework-active";
}
function closes() {
document.getElementById('tw-mask').style.display = 'none';
}
function openTwe() {
document.getElementById('tw-mask').style.display = 'block';
}
</script>找到标签，在其里面的最上面添加以下内容，注意修改带那种自己的博客网站
<?php if($this->user->hasLogin()): ?>
<div id="tw-mask" class="tweets-mask" style="display: none;">
<div class="tweets-all">
<div class="tweets-tops">
<div class="tweets-closes-box">
<div class="tweets-closes" style="cursor: pointer;" onclick="closes()">
<svg viewBox="0 0 24 24" width="25" height="25"><g><path d="M13.414 12l5.793-5.793c.39-.39.39-1.023 0-1.414s-1.023-.39-1.414 0L12 10.586 6.207 4.793c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L10.586 12l-5.793 5.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293L12 13.414l5.793 5.793c.195.195.45.293.707.293s.512-.098.707-.293c.39-.39.39-1.023 0-1.414L13.414 12z"></path></g></svg>
</div>
</div>
<hr class="top-hr" />
</div>
<div id="tweets" class="tweets-post">
<div class="tweets-img"><img src="<?php echo getGravatar($this->user->mail,48); ?>" style="border-radius:100%;width:50px;" /></div>
<div>
<form action="<?php $security->index('/action/contents-post-edit'); ?>" method="post" name="write_post" style="padding-left: 49px;" target="ajaxFrame">
<input type="hidden" id="title" name="title" value="<?php echo date("Y-m-d H:i:s");?>——前台快捷推文" />
<div class="tweets-post-textbox">
<textarea class="tweets-post-text" rows="3" name="text" id="text" autocomplete="off" onkeydown='countChar("text","counter");' onkeyup='countChar("text","counter");' required placeholder="有什么新鲜事？"></textarea>
<div class="from-hr"></div>
<input type="hidden" id="allowComment" name="allowComment" value="1" checked="true" />
<input type="hidden" name="markdown" value="1" />
<input type="hidden" name="date" value="<?php echo date("Y-m-d H:i:s");?>" />
<input type="hidden" name="allowPing" value="1" />
<input type="hidden" name="allowFeed" value="1" />
<input type="hidden" name="do" value="publish" />
<input type="hidden" name="timezone" value="28800" />
<input type="hidden" name="fields[show_theme]" value="3" />
</div>
<div class="tweets-post-btnbox">
<input class="tweets-post-btn" type="submit" class="pub" value="推文" onclick="window.location.href = 'http:\/\/你的网站'" />
</div>
</form>
<iframe name="ajaxFrame" style="display: none;"></iframe>
</div>
</div>
</div>
</div>
<?php endif; ?>最后找到主题根目录style.css文件 末尾添加以下样式
/* 前台推文功能 */
.tweets-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 30%);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10050;
transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
}
.tweets-all {
margin: 10% 0 0 33.5%;
z-index: 999999999;
}
.tweets-tops {
width: 590px;
background-color: white;
border-radius: 15px 15px 0 0;
}
.tweets-post {
width: 590px;
height: 275px;
background-color: white;
border-radius: 0 0 15px 15px;
}
.tweets-post-textbox {
padding: 10px 10px 0 10px;
overflow-y:visible;
}
.tweets-post-btnbox {
padding: 0 10px 2px 0;
flex-direction:row;
}
.tweets-post-btn {
margin-bottom: 10px;
display: block;
line-height: 1;
font-weight: bold;
padding: 10px 20px;
color: var(--themecolor);
border: 1px solid var(--themecolor);
border-radius: 50px;
max-height: 38px;
max-width: 106px;
min-width: 74px;
white-space: nowrap;
outline: none;
float: right;
}
.tweets-post-btn:hover {
text-decoration: none;
color: var(--themecolor);
border: 1px solid var(--themecolor);
background-color: var(--themecolorop);
}
.tweets-btn-span {
flex-grow: 1;
}
.tweets-post-text {
width: 501px;
font-size: 25px;
height: 196px;
border: none;
resize: none;
outline: none;
overflow: hidden;
}
.tweets-closes-box {
padding: 5px 10px 0 10px;
}
.tweets-closes {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
font-size: 16px;
border-radius: 50%;
color: var(--themecolor);
flex-shrink: 0;
transition: all 0.6s ease-out; */
-ms-transition: all 0.6s ease-out;
}
.tweets-closes:hover {
text-decoration: none;
color: var(--themecolor);
background-color: var(--themecolorop);
}
.tweets-img {
position: fixed;
padding: 10px 0 0 5px;
}
.top-hr {
margin: 0;
}
.from-hr {
background-color: #a9a9a96b;
height: 1px;
margin: 0 0 10px 0;
}实验截图
$(document).ready(function(){$(".galleryidpost").lightGallery({selector: ".yoniu-index-img",share: false,share: false,showThumbByDefault: false,autoplayControls: false});});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-146，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
