目次
序文
簡単なブログ システムを実装します。
現在、ページのデザイン部分は完了しています。前に学んだフロントエンドの知識に従って Web ページを構築します。
主に 4 つのページに分かれています:
ブログリストページ
ブログ本文ページ
ブログランディングページ
ブログ編集ページ
1. 期待される効果
1.1 ブログ一覧ページの効果
1.2 ブログ詳細ページの効果
1.3 ブログのランディング ページの効果
2.ブログ一覧ページを実装
blog_list.html を作成し、ブログ一覧ページを記述します。
2.1 ナビゲーションバーの実装
blog_list.html を編集し、ナビゲーション バーの HTML コードを作成します。
ナビゲーション バーには、ロゴ、タイトル、いくつかのボタン (ジャンプ リンク) が含まれます。< a i= 2> 左右の配置を実現するには、ロゴとボタンの間にプレースホルダーとしてスペーサーを追加します。
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>logo2.jpgを用意してimgディレクトリに置きます。
common.css を作成します。
ナビゲーション バーの場合、すべてのページで必要となるため、スタイルを抽出します。
最初にブラウザのデフォルト スタイルをクリアします< /span> ナビゲーション バーのナビゲーションは内部でフレックス レイアウトを使用して、ロゴといくつかのボタンを配置します。 背景の高さが画像と同じになるように、html と本文の高さを両方とも 100% に設定する必要があります。ブラウザ ウィンドウの高さは同じです。
背景画像として cat.jpg を準備します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置整体页面高度 */
html, body {
height: 100%;
background-image: url(../img/cat.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* 上方导航栏 */
.nav {
width: 100%;
height: 50px;
background-color: rgba(51, 51, 51, 0.4);
color: #fff;
display: flex;
justify-content: left;
align-items: center;
}
/* 导航栏中的图标 */
.nav img {
width: 40px;
height: 40px;
margin-left: 30px;
margin-right: 10px;
border-radius: 50%;
}
/* 导航栏中的占位器 */
.nav .spacer {
width: 70%;
}
/* 导航栏中的按钮 */
.nav a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}common.cssの導入
<link rel="stylesheet" href="css/conmmon.css">2.2 バージョンセンターの実現
blog_list.html を編集
コンテナは、中央揃えの効果を実現するためにページの中心として使用されます。
ユーザー情報を左側
右側にブログリストを配置
<!-- 版心 -->
<div class="container">
<!-- 左侧个人信息 -->
<div class="container-left">
</div>
<!-- 右侧内容详情 -->
<div class="container-right">
</div>
</div>common.cssを編集する
/* 页面内容容器, 版心 */
.container {
/* 使用 calc 计算高度 */
height: calc(100% - 50px);
/* 设置版心宽度 */
width: 1000px;
/* 水平居中 */
margin: 0 auto;
/* 使用弹性布局 */
display: flex;
justify-content: space-between;
align-items: center;
}
/* 左侧部分, 用来放置用户信息 */
.container-left {
height: 100%;
width: 200px;
}
/* 右侧部分, 用来放置正文 */
.container-right {
height: 100%;
/* 和左侧部分中间留出 5px 间隙 */
width: 795px;
/* 如果内容溢出就自动加上滚动条 */
overflow: auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}2.3 個人情報の実現
blog_list.html を編集
個人情報を .card div に配置します。
個人情報には、アバター (img)、ユーザー名 (h3)、ユーザーの github (a)、ユーザーの記事とカテゴリの数。
<!-- 左侧个人信息 -->
<div class="container-left">
<div class="card">
<img src="img/doge.jpg" class="avtar" alt="">
<h3>小林</h3>
<a href="http:www.github.com">github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>common.cssを編集する
/* 展示用户信息的卡片 */
.card {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 30px;
}
/* 用户头像 */
.card img {
width: 140px;
height: 140px;
border-radius: 50%;
}
/* 用户名 */
.card h3 {
text-align: center;
padding: 10px;
}
/* 用户 github 链接 */
.card a {
display: block;
text-align: center;
color: #999;
text-decoration: none;
padding: 10px;
}
/* 展示文章数目的面板 */
.card .counter {
padding: 5px;
display: flex;
justify-content: space-around;
}2.4 実装ブログ一覧
blog_list.html を編集
各ブログは div.blog で表されます。
各ブログにはタイトル、公開時刻、説明、全文表示ボタンが含まれます。 .
<div class="container-right">
<div class="blog">
<div class="title">我的第一篇博客</div>
<div class="date">2023-10-15</div>
<div class="desc">
从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Cum distinctio ullam eum ut
veroab laborum numquam tenetur est in dolorum a sint, assumenda
adipisci similique quaerat vel.Facere,et.
</div>
<a href="content.html" class="detail">查看全文>></a>
<div class="title">我的第二篇博客</div>
<div class="date">2023-10-15</div>
<div class="desc">
从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Cum distinctio ullam eum ut
veroab laborum numquam tenetur est in dolorum a sint, assumenda
adipisci similique quaerat vel.Facere,et.
</div>
<a href="content.html" class="detail">查看全文>></a>
</div>
</div>blog_list.css を作成する
コンテンツのこの部分は公開部分ではなくなり、別の CSS に配置されます。
疑似クラスを使用するselectors.blog .detail:hover は、カーソルがホバーしているときにスタイルを変更する機能を実装します。
ホバー スタイルを変更するには、トランジション効果transition: all 0.3s; を .blog .detail に追加します。より現実的です。
/* 表示第一篇博客 */
.blog {
width: 100%;
padding: 10px 20px;
}
/* 博客的标题 */
.blog .title {
color: black;
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 10px 0;
}
/* 博客的摘要 */
.blog .desc {
color: #000;
text-indent: 2em;
margin-top: 10px;
}
/* 博客的日期 */
.blog .date {
color: #008000;
margin-top: 10px;
text-align: center;
}
/* 查看详情按钮 */
.blog .detail {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
color: black;
text-align: center;
text-decoration: none;
margin: 10px auto 0 auto;
border: 2px solid black;
/* 给颜色加上过渡效果 */
transition: all 0.3s;
}
/* 查看详情按钮的鼠标hover效果 */
.blog .detail:hover {
background-color: #000;
color: #fff;
}blog_list.css の導入
<link rel="stylesheet" href="css/blog_content.css">3. ブログのテキストページを実装する
blog_content.html を作成する
3.1ナビゲーションバーの紹介
blog_content.html を編集する
コードのこの部分は blog_list.html と同じなので、直接コピーしてください。
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>スタイル common.css の導入
<link rel="stylesheet" href="css/conmmon.css">3.2 バージョンセンターの導入
blog_content.html を編集する
コードのこの部分は blog_list.html と同じなので、直接コピーします
<!-- 版心 -->
<div class="container">
<!-- 左侧个人信息 -->
<div class="container-left">
</div>
<div class="container-right">
</div>
</div>3.3 個人情報の導入
blog_content.html を編集する
コードのこの部分は blog_list.html と同じなので、直接コピーします
<!-- 左侧个人信息 -->
<div class="container-left">
<div class="card">
<img src="img/doge.jpg" class="avtar" alt="">
<h3>小林</h3>
<a href="http:www.github.com">github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>3.4 ブログテキストの実装
blog_content.html を編集
ブログ コンテンツ全体を div.blog-content に配置します。
ブログ コンテンツにはブログ タイトル (h3) が含まれます。ブログ時間 (div.date)、ブログ テキスト (p)
<div class="blog-content">
<!-- 博客标题 -->
<h3>我的第一篇博客</h3>
<!-- 博客时间 -->
<div class="date">2021-06-02</div>
<!-- 博客正文 -->
<p>
从今天起我要好好敲代码.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim iste
corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiis
pariatur delectus perferendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim iste
corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiis
pariatur delectus perferendis.
</p>
</div>blog_content.css を作成する
/* 博客正文容器 */
.blog-content {
padding: 30px;
}
/* 博客标题 */
.blog-content h3 {
text-align: center;
padding: 20px 0;
}
/* 博客日期 */
.blog-content .date {
color: #008000;
padding: 10px 0;
text-align: center;
}
/* 博客内容段落 */
.blog-content p {
text-indent: 2em;
padding: 10px 0;
}blog_content.css の導入
<link rel="stylesheet" href="css/blog_content.css">4. ブログのランディング ページを実装する
4.1ナビゲーションバーの紹介
login.html を編集
コードのこの部分は blog_list.html と同じなので、直接コピーしてください。
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>スタイル common.css の導入
<link rel="stylesheet" href="css/conmmon.css">4.2 バージョンセンターの実現
login.html を編集する
flex を使用して、ログイン ダイアログ ボックスをページの水平方向と垂直方向の中央に配置します。
<!-- 版心 -->
<div class="login-container">
</div>ログイン.cssを作成する
.login-container {
width: 100%;
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}login.css を導入する
<link rel="stylesheet" href="css/login.css">4.3 ログインボックスの実装
login.html を編集
ログイン ボックス全体が div.login-dialog に配置されます。
中には div で表される 3 行があります。 row .
各行には、ユーザー名入力ボックス、パスワード入力ボックス、送信ボタンが含まれます。
login.css を編集する
#submit:active 擬似クラス セレクターを使用して、ボタンをクリックしたときにスタイルが切り替わる効果を実現します。
.login-dialog {
width: 400px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
.login-dialog h3 {
padding: 50px 0;
text-align: center;
}
.login-dialog .row {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.login-dialog .row span {
display: block;
width: 100px;
font-weight: 700;
}
#username,
#password {
width: 200px;
height: 40px;
line-height: 40px;
font-size: 24px;
border-radius: 10px;
border: none;
outline: none;
text-indent: 10px;
}
#submit {
width: 300px;
height: 50px;
color: white;
background-color: green;
border: none;
border-radius: 10px;
}
#submit:active {
background-color: #666;
}5.ブログ編集ページの実装
blog_edit.html を作成する
5.1ナビゲーションバーの紹介
blog_edit.html を編集
コードのこの部分は blog_list.html と同じなので、直接コピーしてください。
<!-- 导航栏 -->
<div class="nav">
<img src="img/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 用来占据中间位置 -->
<span class="spacer"></span>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="logout">注销</a>
</div>スタイル common.css の導入
<link rel="stylesheet" href="css/conmmon.css">5..2 実装編集領域
blog_edit.html を編集
編集領域全体が div.blog-edit-container に配置されます。
タイトル編集領域とコンテンツが含まれます。編集領域。
タイトル編集領域には、タイトルを入力するための入力と、送信用のボタンが含まれています。
まず、コンテンツ編集領域で div を作成します# editor は、後で editor.md を使用して初期化されます。
<!-- 编辑框容器 -->
<div class="blog-edit-container">
<!-- 标题编辑区 -->
<div class="title">
<input type="text" placeholder="在这里写下文章标题" id="title">
<button id="submit">发布文章</button>
</div>
<!-- 创建编辑器标签 -->
<div id="editor"></div>
</div>blog_edit.css を作成する
#editor は透明度を設定するために opacity: 80%; を使用する必要があります。background-color を直接使用すると、
後でエディターを実行すると、md が上書きされます。
.blog-edit-container {
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
.blog-edit-container .title {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
#title {
height: 40px;
width: 890px;
text-indent: 10px;
border-radius: 10px;
outline: none;
border: none;
background-color:rgba(255, 255, 255, 0.8);
}
#submit {
height: 40px;
width: 100px;
color: white;
background-color: orange;
border: none;
outline: none;
border-radius: 10px;
}
#editor {
border-radius: 10px;
/* 针对 #editor 用 bgc 属性无法设置半透明了. 里面包含的内容带了背景色 */
/* background-color:rgba(255, 255, 255, 0.8); */
/* 可以使用 opacity 属性实现 */
opacity: 80%;
}5.3 editor.mdの導入
editor.md は、オープンソースのページ マークダウン エディター コンポーネントです。
公式 Web サイトについては、https://pandao.github.io/editor.md/ を参照してください。 >
使用方法については、コード内のサンプル ディレクトリにあるサンプルを参照してください。非常に豊富です。
1) editor.md をダウンロードします
公式 Web サイトから圧縮パッケージをダウンロードし、ディレクトリに配置します。ディレクトリ構造は次のとおりです:
2) editor.mdを導入する
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="js/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>3) editor.md を初期化する
blog_edit.html を編集する
// 初始化编辑器
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
height: "calc(100% - 50px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});