• 博客系统（页面）

    目录

    博客列表页

    博客正文页

    博客登录页

    博客编辑页

    实现一个简单的博客系统，有四个页面：

    博客列表页、博客正文页、博客登录页、博客编辑页

    博客列表页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>博客编辑页title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/blog_edit.css">
    9.     <script src="js/jquery.min.js">script>
    10.  
    11.     
    12.     
    13.         
    14.         <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    15.         <script src="editor.md/lib/marked.min.js">script>
    16.         <script src="editor.md/lib/prettify.min.js">script>
    17.         <script src="editor.md/editormd.js">script>
    18. head>
    19. <body>
    20.     
    21.    <div class="nav">
    22.     <img src="image/csdn.webp" alt="">
    23.     <span class="title">我的博客系统span>
    24.     
    25.     <div class="spacer">div>
    26.     <a href="#">主页a>
    27.     <a href="#">写博客a>
    28.     <a href="#">注销a>
    29. div>
    30.  
    32. <div class="blog-edit-container">
    34. <div class="blog-edit-title">
    35. <input type="text" id="title-edit" placeholder="请输入文章标题">
    36. <button id="submit">发布文章button>
    37. div>
    39. <div id="editor">
    40.  
    41. div>
    42. div>
    43. <script>
    44.     var editor = editormd("editor", {
    45.         // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    46.         width: "100%",
    47.         // 设定编辑器高度
    48.         // height: "calc(100% - 50px)",
    49.         height:"450px",
    50.         // 编辑器中的初始内容
    51.         markdown: "# 在这里写下一篇博客",
    52.         // 指定 editor.md 依赖的插件路径
    53.         path: "editor.md/lib/"
    54.     });
    55. script>
    56. body>
    57. html>

    博客正文页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>博客详情页title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/blog_detail.css">
    9. head>
    10. <body>
    11.     
    12.     <div class="nav">
    13.         <img src="image/csdn.webp" alt="">
    14.         <span class="title">我的博客系统span>
    15.         
    16.         <div class="spacer">div>
    17.         <a href="#">主页a>
    18.         <a href="#">写博客a>
    19.         <a href="#">注销a>
    20.     div>
    21.  
    22.       
    23.       <div class="container">
    24.         
    25.         <div class="container-left">
    26.             
    27.             <div class="card">
    28.                 
    29.                 <img src="image/touxiang.png" alt="">
    30.                 
    31.                 <h3>丸圆圆h3>
    32.                 <a href="#">github地址a>
    33.     
    34.                 <div class="counter">
    35.                     <span>文章span>
    36.                     <span>分类span>
    37.                 div>
    38.     
    39.                  <div class="counter">
    40.                     <span>33span>
    41.                     <span>3span>
    42.                  div>
    43.             div>
    44.             div>
    45.         
    46.         <div class="container-right">
    47.             
    48.             <h3 class="detail-title">我的第一篇博客h3>
    49.             
    50.             <div class="date">2023-10-01div>
    51.             
    52.           <div class="content">
    53.             <p class="content-p">
    54.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    55.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    56.                 p>
    57.  
    58.             <p class="content-p">
    59.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    60.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    61.                 p>
    62.  
    63.             <p class="content-p">
    64.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    65.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    66.                 p>
    67.           div>
    68.         div>
    69.     div>
    70. body>
    71. html>

    博客登录页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>登录页面title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/login.css">
    9. head>
    10. <body>
    11.    
    12.    <div class="nav">
    13.     <img src="image/csdn.webp" alt="">
    14.     <span class="title">我的博客系统span>
    15.     
    16.     <div class="spacer">div>
    17.     <a href="#">主页a>
    18.     <a href="#">写博客a>
    19. div>
    20.  
    23. <div class="login-container">
    24.     
    25.     <div class="login-dialog">
    26.     <h3>登录h3>
    27.     <div class="login-dialog-row">
    28.         <span>用户名span>
    29.         <input type="text" id="username" placeholder="手机号/邮箱">
    30.     div>
    31.     <div class="login-dialog-row">
    32.        <span>密码span>
    33.        <input type="password" id="password">
    34.     div>
    35.     <div class="login-dialog-row">
    36.         <button id="submit">登录button>
    37.     div>
    38.  
    39. div>
    40.  
    41. body>
    42. html>

    博客编辑页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>博客编辑页title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/blog_edit.css">
    9.     <script src="js/jquery.min.js">script>
    10.  
    11.     
    12.     
    13.         
    14.         <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    15.         <script src="editor.md/lib/marked.min.js">script>
    16.         <script src="editor.md/lib/prettify.min.js">script>
    17.         <script src="editor.md/editormd.js">script>
    18. head>
    19. <body>
    20.     
    21.    <div class="nav">
    22.     <img src="image/csdn.webp" alt="">
    23.     <span class="title">我的博客系统span>
    24.     
    25.     <div class="spacer">div>
    26.     <a href="#">主页a>
    27.     <a href="#">写博客a>
    28.     <a href="#">注销a>
    29. div>
    30.  
    32. <div class="blog-edit-container">
    34. <div class="blog-edit-title">
    35. <input type="text" id="title-edit" placeholder="请输入文章标题">
    36. <button id="submit">发布文章button>
    37. div>
    39. <div id="editor">
    40.  
    41. div>
    42. div>
    43. <script>
    44.     var editor = editormd("editor", {
    45.         // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    46.         width: "100%",
    47.         // 设定编辑器高度
    48.         // height: "calc(100% - 50px)",
    49.         height:"450px",
    50.         // 编辑器中的初始内容
    51.         markdown: "# 在这里写下一篇博客",
    52.         // 指定 editor.md 依赖的插件路径
    53.         path: "editor.md/lib/"
    54.     });
    55. script>
    56. body>
    57. html>

    这里没有提交css的代码，在编辑页需要引入一个editor编辑器，可以在GitHub上获取源代码，编辑页的启用editor编辑器的方式在官方文档中也有具体写法。

    成果展示：

  • 相关阅读:
    CentOS 7迁移Anolis OS 7
    源码解析springbatch的job是如何运行的？
    APS智能排产可以给咖啡机企业带来哪些效益？
    pytorch深度学习实战lesson25
    手机怎么修改编辑PDF中的文字？两分钟教你学会编辑方法
    记录nvm use node.js版本失败，出现报错： exit status 1: ��û���㹻��Ȩ��ִ�д˲�����
    扁平化嵌套列表迭代器 [树的递归前序遍历 + 迭代前序遍历]
    MyBatis-----3、MyBatis获取参数值的两种方式（重点，面试可能会问）
    C语言学习笔记（七）
    QJsonParseError::errorString() == “unterminated object“
  • 原文地址：https://blog.csdn.net/weixin_67793092/article/details/133249075