如果你有好的内容或想法,欢迎给本站投稿文章,文章的范围是技术类相关的,不限于前端,可以是客户端开发,后台开发,运维测试等。但是请不要写那种鸡汤文章,例如:《如何一个月内从月薪3千变成月薪3万》,《到了35岁被裁员怎么办》等类似的文章。

本站希望你写的文章都是来自于日常遇到的实际问题、知识点、总结、插件使用等,切勿在网上随便粘贴复制一个文章,这是本站一直都深恶痛绝的。你可以从网上借鉴内容,但是一定要有自己的见解和看法。

可以得到什么

如果你写的文章被采纳,可以获得1至5的积分,影响文章积分的因素有很多,比如文章的难度,是否有独特见解,是科普类还是问题/解答类等。但是也不一定会被采纳,主要看你写文章的态度,如果你只是为了获得积分而随便乱写,那么肯定是不会采纳的;如果你是真心实意的去写,一般都是可以被采纳的。

如果你写的文章中含有demo下载,如果有人充值下载的话,你可以得到n/2的现金,例如,你的demo下载积分为5,有人充值下载了,你可以得到2.5元。具体细节将在后面讨论。

如何写文章

这里提供两种上传方式:markdown格式内容和html文件。如果提交的内容比较简单,只有文字,图片,代码之类的,那么可以用markdown格式提交;如果比较复杂,有demo演示和demo积分下载,可以选择提交html文件。

预览文章
提交

首先下载一个一般性文章的模版: 点击下载模版

下载下来后,解压后我们先来看下目录结构:

上图是项目的结构,整体的结构也是很简单,文章在index.html中去写,文章中的图片放在img中,source是demo的目录,css和js目录中放demo中需要的css/js。

模版里面包含所有用到的结构,以及一个小demo案例,下面就讲如何去修改模版以及写文章用到的结构。

文章基础内容修改

包括标题,简介(搜索时用),难易程度,时间的设置,这些都在index.html中修改。

标题的设置有两处:

简介的设置写在keywords和description中,写在“秋天爱美丽”后面即可,两个都要写上。

创建时间就是你写文章的日期,难易程度有四种,[入门,简单,中等,高级],写上你认为的等级即可。

文章主要结构

index.html中写文章的主体部分如下,其他部分的结构不用去管,那些我这边会处理。

段落,标题

文章中的段落标签用p,标题用h4,一般就用这两个标签。

图片

图片部分的话,在index.html中的style定义了一些class,可以实际根据图片的尺寸自己进行调用:

图片都是做了适配的,如果是一行展示一张图片,在手机端宽度为9rem,在pc上的宽度可以在@media (min-width: 1200px){}内调整;

如果是两张图片并排放一行的话,首先设置float:left(上面中的img2),在手机端宽度为4.5rem,在pc上宽度同样可以调整。同时要在后面加一个class为clear的div。

例如上面中的img1,img3,img4都是一行展示一个图片的;img2是一行展示两个图片的。这个可以根据自己的情况自己调整,下面就是一些简单的示例。出于适配的考虑,不建议一行放超过2张图片,当然也不限制。

图片上最好加上alt属性,这样搜索引擎抓取的时候就知道这个图片大概是干嘛的了。

gif动图

gif动图需要提供一个gif和gif第一屏的图片,以及动图关键词(alt),如下:

上图中的react_composition_e1.jpg就是gif第一帧的静态图,christmas.gif就是那个gif图片。如果你已经有了,直接替换它们就好了,后续的gif播放效果都是已经写好的。

有一个可以变动的就是class="play-gif black",如果把black去掉的话,那么显示的暂停gif就是白色的,如果有black,那么那个gif就是黑色的,这个根据情况去调整。gifplayer-wrapper1这个class是用来设置gif的宽度和高度的,因为每个gif的宽高都不一样,这个的设置和图片是一样的。

有些人可能不知道gif如何制作,我一般的做法是先把效果进行录屏,然后再去找软件将视频变成gif,再将gif另存一张图片(这是为了得到gif的第一帧图片)。

代码片段

如果你想插入代码片段,首先进入网站: 生成代码网址,然后按下面步骤操作即可:

代码美化后,要注意看下排版是否正确,毕竟如果排版没弄好,看起来还是比较费劲。

插入svg

svg相对图片,占用空间更小,而且易更改,如果想插入svg,先访问网站: 绘制svg网站

绘制完成后,点击view->source获取svg的源码。考虑到有些svg可能很长,因此在它的外层需要包裹一个div,具体代码如下:

class为svg_container的div可以让svg超出的时候进行滚动。

关于下载DEMO

这个功能是选配的,如果你的文章中有demo,并且认为这些demo花费你不少时间和精力,那么你可以设置一个积分,让别人通过积分去下载你的这个demo。同时,如果别人通过充值去下载了你的demo,那么你将获得n/2的现金,到时我将会联系你。当然,自己就不要作弊了,因为后台是可以看到下载记录,如果你的demo真的能解决大部分的痛点,你也是能赚不少的。

现在很多网站都有积分这个概念,每个网站积分的分量也是不一样的,在本站中积分的分量还是比较重的,大部分的积分都在5,6个左右,建议一般就是设置5至10的样子;如果有你认为很耗时,很难的,也可以设置的很高。如果你只是想方便别人下载,积分设置为0也是可以的。

如果要设置积分,需要在index.html中下载demo的地方写上你希望的积分,例如下面我希望下载的积分是8个:

很多人会担心demo中已经包含了全部的源码,懂的人直接F12就看到了,哪里还需要下载源码?这个问题本站已经有解决方案的,如果你开启了下载Demo功能,会对demo中的关键代码进行加密操作。

提交你的文章

现在,你离成功之差一步了,将你的项目压缩成zip或者rar,然后点击下方按钮,选择你的项目并上传。

提交

邮件和通知

建议绑定一个邮箱,这样方便将审核的结果通过邮件发送给你,同时,本站的评论/回复都是有邮件提示的,这样如果有人评论你的文章,你将会收到邮件提醒。

如果不想邮件打扰你,可以在"我的"页面中查看你提交的文章列表以及文章审核信息。

绑定取消

我的邮箱:

本站微信群

如果你有任何想法/问题,也欢迎进群探讨。