日记：从零开始搭网站（更新于2024.2.14）
|
学习笔记
本文最后更新于90天前，其中的信息可能已经有所发展或者是有所改变

网站的更新

2024年2月3日

完成服务器域名的购买，搭建宝塔面板，搭建基于WordPress的以Argon的个人网站，命名为凋翎的笔记本

参考视频：【个人网站搭建】1小时WordPress从0到1建站系列 保姆级教程 零基础新手搭建个人博客及企业网站_哔哩哔哩_bilibili

2024年2月4日

于WordPress的Argon主题面板完成左侧栏，标题，个人头像，个人链接的编辑。

通过引用代码完成页脚的编辑（包括备案号和网站运行时间）。代码如下：

<style>
/* 核心样式 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.bg-orange {
background-color: #ec8a64 !important;
}
.bg-red {
background-color: #cb7574 !important;
}
.bg-apricots {
background-color: #f7c280 !important;
}
.bg-casein {
background-color: #dfe291 !important;
}
.bg-shallots {
background-color: #97c3c6 !important;
}
.bg-ogling {
background-color: #95c7e0 !important;
}
.bg-haze {
background-color: #9aaec7 !important;
}
.bg-mountain-terrier {
background-color: #99a5cd !important;
}
</style>
 
  <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
        <span class="badge-value bg-orange">
            <!-- 备案链接 -->
            <a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">闽ICP备2024034762号</a>|
            <a href="https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank"
                one-link-mark="yes">
               闽公网安备35012102550443号</a>
        </span>
 
        <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
        <span class="badge-value bg-green">
            <!-- wordpress链接 -->
            <a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
                WordPress</a></span>
    </div>
 
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
        <span class="badge-value bg-red">2024</i>
            <a href="https://www.sefletrir.xyz/" target="_blank" one-link-mark="yes">@ Se_fletrir
        </span>
        </script>
    </div>
 
	<!-- 运行时间 -->
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span><span
            class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
            days
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>S
        </span>
 <script no-pjax="">
var blog_running_days = document.getElementById("blog_running_days");
var blog_running_hours = document.getElementById("blog_running_hours");
var blog_running_mins = document.getElementById("blog_running_mins");
var blog_running_secs = document.getElementById("blog_running_secs");
function refresh_blog_running_time() {
var time = new Date() - new Date(2024, 1, 3, 15, 17, 0); /*此处日期的月份改为自己真正月份的前一个月*/
var d = parseInt(time / 24 / 60 / 60 / 1000);
var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
var s = parseInt((time % (60 * 1000)) / 1000);
blog_running_days.innerHTML = d;
blog_running_hours.innerHTML = h;
blog_running_mins.innerHTML = m;
blog_running_secs.innerHTML = s;
}
refresh_blog_running_time();
if (typeof bottomTimeIntervalHasSet == "undefined") {
var bottomTimeIntervalHasSet = true;
setInterval(function () {
refresh_blog_running_time();
}, 500);
}
</script>

同时将域名sefletrir.xyz进行初审备案。

2024年2月5日

域名sefletrir.xyz备案通过，凋翎的笔记本正式上线，同时提交公安联网备案。

完成了顶部菜单导航，同时为菜单添加图标样式，为文章添加头图。

编辑了《关于本站》页面。

2023月2月6日

添加了友情链接，留言板页面。完成了Favorites icon的更换。

完成主题背景虚化。加了页面背景。对页面CSS进行设置。CSS代码如下：

/*小工具栏背景完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {margin:0;}

/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}

/*菜单间距*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.4em;
    padding-left: 1.4em;
}

/* 标题，链接等 */
a, .btn-neutral{
    color:#8B4513;
}

/* 页脚透明 */
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}
/* 头像 */
#leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

/*  头像亮暗  */
#leftbar_overview_author_image:hover {
	transform: scale(1.23);
	filter: brightness(100%);
}
/* 名称 */
#leftbar_overview_author_name {
  	margin-top: 15px;
	font-size: 18px;align-content;
	color:;
}
/* 简介 */
#leftbar_overview_author_description {
    font-size: 14px;
    margin-top: -4px;
    opacity: 0.8;
	color:;
}

致此。凋翎的笔记本大体完成搭建。

2023年2月9日

今天是跨年夜！在昨天网站完成了公安联网的备案。已更新页脚备案号。

2023年2月14日

添加了Aplayer音乐播放器，添加至页脚脚本，代码如下：

于2月16日坏掉（不知原因）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 
<meting-js 
    server="netease" 
    type="playlist" 
    id="7233213714"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

推荐文章

代码转载于：Argon主题博客美化 – Echo小窝 (liveout.cn)

一些话

本人不是计算机行业，在搭建网站方面也是纯小白无基础 ，希望以上文章对你有帮助。其次是我不推荐导入个人json（我也没有放出来），一点点从上往下改可能能更理解，方便日后自行更改。

作者：Se_fletrir
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~

评论

  1. Ning_meng_Cat
    Windows Edge
    3 月前
    2024-2-05 13:00:20

    好欸

  4. 安妮的熊
    iPhone Safari
    3 月前
    2024-2-06 17:16:50

    哇！真不错！！

    • Se_fletrir
      博主
      安妮的熊
      Windows Edge
      3 月前
      2024-2-06 17:24:46

      欸嘿嘿

  7. gdgfty
    Windows Edge
    3 月前
    2024-2-09 20:56:50

    好耶

  10. live
    Windows Chrome
    3 月前
    2024-2-09 20:57:58

    哇

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






下一篇