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;
}

实验截图

结语

最后感谢 @XiaoFans 的教程，感谢访问强仔博客，希望本文对你们有所帮助！